调整AgoraView 修复安卓样式bug 添加文档

AgoraView.js

@@ -18,7 +18,7 @@ export default class AgoraView extends Component {
 }
 
 AgoraView.propTypes = {
-    localUid: PropTypes.number,
+    showLocalVideo: PropTypes.bool,
     remoteUid: PropTypes.number,
     ...View.propTypes
 };

README.md

@@ -1,2 +1,354 @@
 [![QQ Group](https://img.shields.io/badge/QQ%20Group-471757030-red.svg)]()
+
 # react-native-agora
+
+## Installation and linking libraries
+
+Install with npm:
+
+ `npm install --save react-native-agora`
+
+Or, install with yarn:
+
+ `yarn add react-native-agora`
+
+Either way, then link with:
+
+ `react-native link react-native-agora`
+
+#### iOS
+
+TARGETS->Build Phases-> Link Binary With Libaries中点击“+”按钮，选择
+
+    libresolv.tbd
+    libc++.tbd
+    AVFoundation.framework
+    AudioToolbox.framework
+    VideoToolbox.framework
+    CoreMotion.framework
+    CoreMedia.framework
+    CoreTelephony.framework
+TARGETS->Build Phases-> Link Binary With Libaries中点击“+”按钮，在弹出的窗口中点击“Add Other”按钮，选择
+    node_modules/react-native-agora/ios/RCTAgora/libs/libcrypto.a
+    node_modules/react-native-agora/ios/RCTAgora/libs/AgoraRtcCryptoLoader.framework
+    node_modules/react-native-agora/ios/RCTAgora/libs/AgoraRtcEngineKit.framework
+TARGETS->Build Settings->Search Paths->Framework Search Paths添加
+    "$(SRCROOT)/../node_modules/react-native-agora/ios/RCTAgora/libs"
+TARGETS->Build Settings->Search Paths->Library Search Paths添加
+    "$(SRCROOT)/../node_modules/react-native-agora/ios/RCTAgora/libs"
+TARGETS->Build Settings->Enable Bitcode设置为No
+
+TARGETS->Capabilities->Background Modes->Modes勾选Audio,AirPlay,and Picture In Picture
+
+项目目录->Info.plist->增加2项
+
+    "Privacy - Camera Usage Description":"use camera to start video call"
+    "Privacy - Microphone Usage Description":"use microphone to start video call"
+
+
+#### Android
+
+Add following to `AndroidManifest.xml`
+
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
+    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+
+当您在写混淆代码时，请添加以下代码:
+
+    -keep class io.agora.**{*;}
+
+
+## Documentation
+
+[声网API文档](https://docs.agora.io/cn/1.11.1/user_guide/API/ios_api_live_cn.html)
+
+##### RtcEngine方法
+
+| Property                         | Type                                     | Description                           |
+| -------------------------------- | ---------------------------------------- | ------------------------------------- |
+| init                             | object {appid: 'agora注册的应用id', channelProfile: '频道模式', videoProfile: '视频模式', clientRole: '角色'} | 初始化Agora引擎                            |
+| joinChannel                      | string channelName （房间名称）   number uid （用户设置的uid 传0系统会自动分配） | 加入房间                                  |
+| leaveChannel                     |                                          | 离开频道                                  |
+| destroy                          |                                          | 销毁引擎实例                                |
+| startPreview                     |                                          | 开启视频预览                                |
+| stopPreview                      |                                          | 关闭视频预览                                |
+| switchCamera                     |                                          | 切换前置/后置摄像头                            |
+| enableVideo                      |                                          | 开启视频模式                                |
+| disableVideo                     |                                          | 关闭视频                                  |
+| setEnableSpeakerphone            | bool                                     | 开启扬声器  trun: 音频输出至扬声器  false: 音频输出至听筒 |
+| muteLocalAudioStream             | bool (default false)                     | 将自己静音                                 |
+| muteAllRemoteAudioStreams        | bool (default false)                     | 静音所有远端 音频                             |
+| muteRemoteAudioStream            | number uid（用户uid） bool  mute（是否静音）       | 静音指定用户 音频                             |
+| muteLocalVideoStream             | bool (default false)                     | 暂停发送本地 视频流                            |
+| enableLocalVideo                 | bool (default false)                     | 禁用本地视频功能                              |
+| muteAllRemoteVideoStreams        | bool (default false)                     | 暂停所有远端视频流                             |
+| muteRemoteVideoStream            | number uid（用户uid） bool  mute（是否暂停）       | 暂停指定远端视频流                             |
+| startRecordingService (ios only) | string  recordingKey                     | 启动服务端录制服务                             |
+| stopRecordingService (ios only)  | string  recordingKey                     | 停止服务端录制服务                             |
+| getSdkVersion                    | callback                                 | 获取版本号                                 |
+
+##### 原生通知事件
+
+```
+RtcEngine.eventEmitter({
+  onFirstRemoteVideoDecoded: data => {},
+  onJoinChannelSuccess: data => {},
+  onUserOffline: data => {},
+  onUserJoined: data => {},
+  onError: data => {},
+  onWarning: data => {},
+  onLeaveChannel: data => {}
+})
+```
+
+| Name                      | Description  |
+| ------------------------- | ------------ |
+| onFirstRemoteVideoDecoded | 远端首帧视频接收解码回调 |
+| onJoinChannelSuccess      | 加入频道成功的回调    |
+| onUserOffline             | 其他用户离开当前频道   |
+| onUserJoined              | 其他用户加入当前频道   |
+| onError                   | 错误信息         |
+| onWarning                 | 警告           |
+| onLeaveChannel            | 退出频道         |
+
+##### AgoraView 组件
+
+| Name           | Description          |
+| -------------- | -------------------- |
+| showLocalVideo | 是否显示本地视频（bool）       |
+| remoteUid      | 显示远程视频（number 传入uid） |
+
+## Usage
+
+```
+import React, {Component} from 'react';
+import {
+    StyleSheet,
+    View,
+    Text,
+    TouchableOpacity,
+    Image,
+    Dimensions
+} from 'react-native';
+
+const {width, height} = Dimensions.get('window');
+
+import {RtcEngine, AgoraView} from 'react-native-agora'
+
+export default class Meeting extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            remotes: [],
+            isJoinSuccess: false,
+            isSpeaker: false,
+            isMute: false
+        };
+    }
+
+    componentWillMount() {
+
+        //初始化Agora
+        const options = {
+            appid: '',
+            channelProfile: 1,
+            videoProfile: 40,
+            clientRole: 1,
+        };
+        RtcEngine.init(options);
+    }
+
+    componentDidMount() {
+
+        //加入房间
+        RtcEngine.joinChannel();
+
+        //所以的原生通知统一管理
+        RtcEngine.eventEmitter({
+            onFirstRemoteVideoDecoded: (data) => {
+                console.log(data);
+                //有远程视频加入 返回重要的  uid  AgoraView 根据uid 来设置remoteUid值
+                const {remotes} = this.state;
+
+                let arr = [...remotes];
+                let sign = false;
+                arr.forEach(v => {
+                    sign = v === data.uid
+                });
+
+                if (!sign) {
+                    arr.push(data.uid)
+                }
+
+                this.setState({
+                    remotes: arr
+                })
+            },
+            onUserOffline: (data) => {
+             	console.log(data);
+              	//有人离开了！
+                const {remotes} = this.state;
+
+                let arr = [...remotes];
+
+                let newArr = [];
+                newArr = arr.filter(v => {
+                    return v !== data.uid
+                });
+
+                this.setState({
+                    remotes: newArr
+                });
+            },
+            onJoinChannelSuccess: (data) => {
+                console.log(data);
+ 			   //加入房间成功!
+                this.setState({
+                    isJoinSuccess: true
+                });
+            },
+            onUserJoined: (data) => {
+                console.log(data);
+                //有人来了!
+            },
+            onError: (data) => {
+                console.log(data);
+                //错误!
+                RtcEngine.leaveChannel();
+            }
+        })
+    }
+
+    componentWillUnmount() {
+        RtcEngine.removeEmitter()
+    }
+
+    handlerCancel = () => {
+
+        RtcEngine.leaveChannel();
+
+        const {navigator} = this.props;
+        navigator.pop()
+    };
+
+    handlerSwitchCamera = () => {
+        RtcEngine.switchCamera();
+    };
+
+    handlerMuteAllRemoteAudioStreams = () => {
+        this.setState({
+            isMute: !this.state.isMute
+        }, () => {
+            RtcEngine.muteAllRemoteAudioStreams(this.state.isMute)
+        })
+    };
+
+    handlerSetEnableSpeakerphone = () => {
+
+        this.setState({
+            isSpeaker: !this.state.isSpeaker
+        }, () => {
+            RtcEngine.setEnableSpeakerphone(this.state.isSpeaker)
+        });
+
+    };
+
+    render() {
+
+        const {isMute, isSpeaker, remotes, isJoinSuccess} = this.state;
+
+        if (!isJoinSuccess) {
+            return(
+                <View style={{flex:1, backgroundColor:'#fff', justifyContent:'center', alignItems:'center'}}>
+                    <Text>正在创建视频会议...</Text>
+                </View>
+            )
+        }
+
+        return (
+            <View style={styles.container}>
+                <AgoraView style={styles.localView} showLocalVideo={true} />
+                <View style={styles.absView}>
+                    <View style={styles.videoView}>
+                        {remotes.map((v, k) => {
+                            return (
+                                <AgoraView
+                                    style={styles.remoteView}
+                                    key={k}
+                                    remoteUid={v}
+                                />
+                            )
+                        })}
+                    </View>
+                    <View>
+                        <TouchableOpacity
+                            style={{alignSelf: 'center'}}
+                            onPress={this.handlerCancel}>
+                            <Image
+                                style={{width: 60, height: 60}}
+                                source={require('../images/btn_endcall.png')}/>
+                        </TouchableOpacity>
+                        <View style={styles.bottomView}>
+                            <TouchableOpacity onPress={this.handlerMuteAllRemoteAudioStreams} activeOpacity={.7}>
+                                <Image
+                                    style={{width: 50, height: 50}}
+                                    source={ isMute ? require('../images/icon_muted.png') : require('../images/btn_mute.png')}/>
+                            </TouchableOpacity>
+
+                            <TouchableOpacity onPress={this.handlerSwitchCamera} activeOpacity={.7}>
+                                <Image
+                                    style={{width: 50, height: 50}}
+                                    source={ require('../images/btn_switch_camera.png')}/>
+                            </TouchableOpacity>
+
+                            <TouchableOpacity onPress={this.handlerSetEnableSpeakerphone} activeOpacity={.7}>
+                                <Image
+                                    style={{width: 50, height: 50}}
+                                    source={isSpeaker ? require('../images/icon_speaker.png') : require('../images/btn_speaker.png')}/>
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+
+                </View>
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#F4F4F4'
+    },
+    absView: {
+        position: 'absolute',
+        top: 20,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'space-between'
+    },
+    videoView: {
+        padding: 5,
+        flexWrap: 'wrap',
+        flexDirection: 'row',
+        zIndex: 100
+    },
+    localView: {
+        flex: 1
+    },
+    remoteView: {
+        width: (width - 40) / 3,
+        height: (width - 40) / 3,
+        margin: 5
+    },
+    bottomView: {
+        padding: 20,
+        flexDirection: 'row',
+        justifyContent: 'space-around'
+    }
+});
+```

RtcEngine.js

@@ -12,8 +12,8 @@ export default {
         this.listener && this.listener.remove();
         Agora.init(options);
     },
-    joinChannel(channelName = '001'){
-        Agora.joinChannel(channelName)
+    joinChannel(channelName = '00001', uid = 0){
+        Agora.joinChannel(channelName, uid)
     },
     eventEmitter(fnConf) {
         //there are no `removeListener` for NativeAppEventEmitter & DeviceEventEmitter

android/src/main/java/com/syan/agora/AgoraManager.java

@@ -1,7 +1,6 @@
 package com.syan.agora;
 
 import android.content.Context;
-import android.util.Log;
 import android.util.SparseArray;
 import android.view.SurfaceView;
 
@@ -58,10 +57,8 @@ public class AgoraManager {
         //视频配置，设置为360P
         mRtcEngine.setVideoProfile(options.getInt("videoProfile"), true);
         mRtcEngine.enableWebSdkInteroperability(true);  //设置和web通信
-//        mRtcEngine.setChannelProfile(Constants.CHANNEL_PROFILE_COMMUNICATION);//设置为通信模式（默认）
-        mRtcEngine.setChannelProfile(options.getInt("channelProfile")); //设置为直播模式
-//        mRtcEngine.setChannelProfile(Constants.CHANNEL_PROFILE_GAME); //设置为游戏模式
-        mRtcEngine.setClientRole(options.getInt("clientRole"), null); //设置为主播
+        mRtcEngine.setChannelProfile(options.getInt("channelProfile")); //设置模式
+        mRtcEngine.setClientRole(options.getInt("clientRole"), null); //设置角色
     }
 
     /**
@@ -82,23 +79,19 @@ public class AgoraManager {
 
     public AgoraManager setupRemoteVideo(int uid) {
 
-        Log.i("Agora", "mSurfaceViews1---" + mSurfaceViews.toString());
-
         SurfaceView surfaceView = RtcEngine.CreateRendererView(context);
         mSurfaceViews.put(uid, surfaceView);
         mRtcEngine.setupRemoteVideo(new VideoCanvas(surfaceView, VideoCanvas.RENDER_MODE_HIDDEN, uid));
-        Log.i("Agora", "mSurfaceViews2---" + mSurfaceViews.toString());
         return this;
     }
 
-    public AgoraManager joinChannel(String channel) {
-        mRtcEngine.joinChannel(null, channel, null, 0);
+    public AgoraManager joinChannel(String channel, int uid) {
+        mRtcEngine.joinChannel(null, channel, null, uid);
         return this;
     }
 
     public void startPreview() {
-        int a = mRtcEngine.startPreview();
-        Log.i("Agora", "开启预览---" + a);
+        mRtcEngine.startPreview();
     }
 
     public void stopPreview() {

android/src/main/java/com/syan/agora/AgoraModule.java

@@ -163,16 +163,29 @@ public class AgoraModule extends ReactContextBaseJavaModule {
 
     //进入房间
     @ReactMethod
-    public void joinChannel(String channelName) {
-        AgoraManager.getInstance().joinChannel(channelName);
+    public void joinChannel(String channelName, int uid) {
+        AgoraManager.getInstance().joinChannel(channelName, uid);
     }
 
     //退出
     @ReactMethod
     public void leaveChannel() {
+        AgoraManager.getInstance().stopPreview();
         AgoraManager.getInstance().leaveChannel();
     }
 
+    //开启预览
+    @ReactMethod
+    public void startPreview() {
+        AgoraManager.getInstance().startPreview();
+    }
+
+    //闭关预览
+    @ReactMethod
+    public void stopPreview() {
+        AgoraManager.getInstance().stopPreview();
+    }
+
     //打开音频
     @ReactMethod
     public void enableAudio() {

android/src/main/java/com/syan/agora/AgoraViewManage.java

@@ -22,32 +22,25 @@ public class AgoraViewManage extends SimpleViewManager<AgoraVideoView> {
 
     @Override
     protected AgoraVideoView createViewInstance(ThemedReactContext reactContext) {
-
         return new AgoraVideoView(reactContext);
-
     }
 
-    @ReactProp(name = "localUid")
-    public void setLocalUid(final AgoraVideoView agoraVideoView, int localUid) {
+    @ReactProp(name = "showLocalVideo")
+    public void setShowLocalVideo(final AgoraVideoView agoraVideoView, boolean showLocalVideo) {
 
-        if (localUid == 0) {
+        if (showLocalVideo) {
             SurfaceView surfaceView = AgoraManager.getInstance().getLocalSurfaceView();
-            surfaceView.setZOrderMediaOverlay(true);
             surfaceView.setVisibility(View.VISIBLE);
             agoraVideoView.addView(surfaceView);
         }
-
     }
 
     @ReactProp(name = "remoteUid")
     public void setRemoteUid(final AgoraVideoView agoraVideoView, int remoteUid) {
-
-        if (remoteUid != 0) {
-            AgoraManager.getInstance().setupRemoteVideo(remoteUid);
-            SurfaceView surfaceView = AgoraManager.getInstance().getSurfaceView(remoteUid);
-            surfaceView.setZOrderMediaOverlay(true);
-            surfaceView.setVisibility(View.VISIBLE);
-            agoraVideoView.addView(surfaceView);
-        }
+        AgoraManager.getInstance().setupRemoteVideo(remoteUid);
+        SurfaceView surfaceView = AgoraManager.getInstance().getSurfaceView(remoteUid);
+        surfaceView.setVisibility(View.VISIBLE);
+        agoraVideoView.addView(surfaceView);
+        surfaceView.setZOrderMediaOverlay(true);
     }
 }

ios/RCTAgora/AgoraConst.h

@@ -12,6 +12,8 @@
 
 @property (nonatomic, copy) NSString *appid;
 
+@property (nonatomic, assign) NSInteger localUid;
+
 @property (strong, nonatomic) AgoraRtcEngineKit *rtcEngine;
 
 + (instancetype)share;

ios/RCTAgora/RCTAgora.m

@@ -71,8 +71,10 @@ RCT_EXPORT_METHOD(init:(NSDictionary *)options) {
 }
 
 //加入房间
-RCT_EXPORT_METHOD(joinChannel:(NSString *)channelName) {
-    [self.rtcEngine joinChannelByKey:nil channelName:channelName info:nil uid:0 joinSuccess:NULL];
+RCT_EXPORT_METHOD(joinChannel:(NSString *)channelName uid:(NSInteger)uid) {
+    //保存一下uid 在自定义视图使用
+    [AgoraConst share].localUid = uid;
+    [self.rtcEngine joinChannelByKey:nil channelName:channelName info:nil uid:uid joinSuccess:NULL];
 }
 
 //离开频道
@@ -85,6 +87,11 @@ RCT_EXPORT_METHOD(leaveChannel){
     }];
 }
 
+//销毁引擎实例
+RCT_EXPORT_METHOD(destroy){
+    [AgoraRtcEngineKit destroy];
+}
+
 //设置 本地 视频显示属性
 RCT_EXPORT_METHOD(setupLocalVideo:(NSDictionary *)options){
     AgoraRtcVideoCanvas *canvas = [[AgoraRtcVideoCanvas alloc] init];
@@ -103,6 +110,17 @@ RCT_EXPORT_METHOD(setupRemoteVideo:(NSDictionary *)options){
     [self.rtcEngine setupRemoteVideo:canvas];
 }
 
+//开启视频预览
+RCT_EXPORT_METHOD(startPreview){
+    [self.rtcEngine startPreview];
+    
+}
+
+//关闭视频预览
+RCT_EXPORT_METHOD(stopPreview){
+    [self.rtcEngine stopPreview];
+}
+
 //切换前置/后置摄像头
 RCT_EXPORT_METHOD(switchCamera){
     [self.rtcEngine switchCamera];

ios/RCTAgora/RCTAgoraVideoView.h

@@ -13,7 +13,7 @@
 
 @property (strong, nonatomic) AgoraRtcEngineKit *rtcEngine;
 
-@property (nonatomic) NSInteger localUid;
+@property (nonatomic) BOOL showLocalVideo;
 @property (nonatomic) NSInteger remoteUid;
 
 @end

ios/RCTAgora/RCTAgoraVideoView.m

@@ -19,10 +19,20 @@
     return self;
 }
 
-- (void)setLocalUid:(NSInteger)localUid {
-    if (localUid == 0) {
+//- (void)setLocalUid:(NSInteger)localUid {
+//    if (localUid == 0) {
+//        AgoraRtcVideoCanvas *canvas = [[AgoraRtcVideoCanvas alloc] init];
+//        canvas.uid = localUid;
+//        canvas.view = self;
+//        canvas.renderMode = AgoraRtc_Render_Hidden;
+//        [_rtcEngine setupLocalVideo:canvas];
+//    }
+//}
+
+- (void)setShowLocalVideo:(Boolean)showLocalVideo {
+    if (showLocalVideo) {
         AgoraRtcVideoCanvas *canvas = [[AgoraRtcVideoCanvas alloc] init];
-        canvas.uid = localUid;
+        canvas.uid = [AgoraConst share].localUid;
         canvas.view = self;
         canvas.renderMode = AgoraRtc_Render_Hidden;
         [_rtcEngine setupLocalVideo:canvas];

ios/RCTAgora/RCTAgoraViewManager.m

@@ -13,7 +13,7 @@
 
 RCT_EXPORT_MODULE()
 
-RCT_EXPORT_VIEW_PROPERTY(localUid, NSInteger)
+RCT_EXPORT_VIEW_PROPERTY(showLocalVideo, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(remoteUid, NSInteger)
 
 - (UIView *)view {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-agora",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "声网Agora",
   "main": "index.js",
   "scripts": {