安卓AgoraView封装

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

+package com.syan.agora;
+
+import android.content.Context;
+import android.util.Log;
+import android.util.SparseArray;
+import android.view.SurfaceView;
+
+import com.facebook.react.bridge.ReadableMap;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import io.agora.rtc.IRtcEngineEventHandler;
+import io.agora.rtc.RtcEngine;
+import io.agora.rtc.video.VideoCanvas;
+
+/**
+ * Created by Leon on 2017/4/9.
+ */
+
+public class AgoraManager {
+
+    public static AgoraManager sAgoraManager;
+
+    private RtcEngine mRtcEngine;
+
+    private Context context;
+
+    private int mLocalUid = 0;
+
+    private AgoraManager() {
+        mSurfaceViews = new SparseArray<SurfaceView>();
+    }
+
+    private SparseArray<SurfaceView> mSurfaceViews;
+
+    public static AgoraManager getInstance() {
+        if (sAgoraManager == null) {
+            synchronized (AgoraManager.class) {
+                if (sAgoraManager == null) {
+                    sAgoraManager = new AgoraManager();
+                }
+            }
+        }
+        return sAgoraManager;
+    }
+
+    /**
+     * 初始化RtcEngine
+     */
+    public void init(Context context, IRtcEngineEventHandler mRtcEventHandler, ReadableMap options) {
+        this.context = context;
+
+        //创建RtcEngine对象，mRtcEventHandler为RtcEngine的回调
+        mRtcEngine = RtcEngine.create(context, options.getString("appid"), mRtcEventHandler);
+        //开启视频功能
+        mRtcEngine.enableVideo();
+        //视频配置，设置为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); //设置为主播
+    }
+
+    /**
+     * 设置本地视频，即前置摄像头预览
+     */
+    public AgoraManager setupLocalVideo() {
+        //创建一个SurfaceView用作视频预览
+        SurfaceView surfaceView = RtcEngine.CreateRendererView(context);
+        //将SurfaceView保存起来在SparseArray中，后续会将其加入界面。key为视频的用户id，这里是本地视频, 默认id是0
+
+        mSurfaceViews.put(mLocalUid, surfaceView);
+
+        //设置本地视频，渲染模式选择VideoCanvas.RENDER_MODE_HIDDEN，如果选其他模式会出现视频不会填充满整个SurfaceView的情况，
+        //具体渲染模式参考官方文档https://docs.agora.io/cn/user_guide/API/android_api.html#set-local-video-view-setuplocalvideo
+        mRtcEngine.setupLocalVideo(new VideoCanvas(surfaceView, VideoCanvas.RENDER_MODE_HIDDEN, mLocalUid));
+        return this;//返回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);
+        return this;
+    }
+
+    public void startPreview() {
+        int a = mRtcEngine.startPreview();
+        Log.i("Agora", "开启预览---" + a);
+    }
+
+    public void stopPreview() {
+        mRtcEngine.stopPreview();
+    }
+
+    public void leaveChannel() {
+        mRtcEngine.leaveChannel();
+    }
+
+    public void removeSurfaceView(int uid) {
+        mSurfaceViews.remove(uid);
+    }
+
+    public List<SurfaceView> getSurfaceViews() {
+        List<SurfaceView> list = new ArrayList<SurfaceView>();
+        for (int i = 0; i < mSurfaceViews.size(); i++) {
+            SurfaceView surfaceView = mSurfaceViews.valueAt(i);
+            list.add(surfaceView);
+        }
+        return list;
+    }
+
+    public SurfaceView getLocalSurfaceView() {
+        return mSurfaceViews.get(mLocalUid);
+    }
+
+    public SurfaceView getSurfaceView(int uid) {
+        return mSurfaceViews.get(uid);
+    }
+}

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

 package com.syan.agora;
 
-import android.content.Context;
-import android.os.Handler;
+import android.support.annotation.Nullable;
 import android.util.Log;
-import android.view.SurfaceView;
-import android.view.View;
 
+import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.modules.core.DeviceEventManagerModule;
-import com.facebook.react.uimanager.NativeViewHierarchyManager;
-import com.facebook.react.uimanager.UIBlock;
-import com.facebook.react.uimanager.UIManagerModule;
-import com.facebook.react.views.view.ReactViewGroup;
 
-import io.agora.rtc.Constants;
 import io.agora.rtc.IRtcEngineEventHandler;
-import io.agora.rtc.RtcEngine;
-import io.agora.rtc.video.VideoCanvas;
+
+import static com.facebook.react.bridge.UiThreadUtil.runOnUiThread;
 
 public class AgoraModule extends ReactContextBaseJavaModule {
 
-    private RtcEngine mRtcEngine;
+    public AgoraModule(ReactApplicationContext context) {
 
-    private Context mContext;
+        super(context);
+    }
 
-    private static ReactApplicationContext mRAC;
+    @Override
+    public String getName() {
+        return "RCTAgora";
+    }
 
     private IRtcEngineEventHandler mRtcEventHandler = new IRtcEngineEventHandler() {
 
          */
         @Override
         public void onFirstRemoteVideoDecoded(final int uid, int width, int height, int elapsed) {
-//            runOnUiThread(new Runnable() {
-//                @Override
-//                public void run() {
-//                    mRAC
-//                            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
-//                            .emit("onFirstRemoteVideoDecoded", uid);
-//                }
-//            });
-
-            new Handler().post(new Runnable() {
+            runOnUiThread(new Runnable() {
                 @Override
                 public void run() {
-                    mRAC.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
-                            .emit("onFirstRemoteVideoDecoded", uid);
+                    WritableMap map = Arguments.createMap();
+                    map.putString("type", "onFirstRemoteVideoDecoded");
+                    map.putInt("uid", uid);
+                    commonEvent(map);
                 }
             });
 
-
-
         }
 
         /**
          * 加入频道成功的回调
          */
         @Override
-        public void onJoinChannelSuccess(String channel,final int uid, int elapsed) {
+        public void onJoinChannelSuccess(final String channel,final int uid, int elapsed) {
 
             Log.i("Agora", "加入房间成功---");
-            mRAC
-                    .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
-                    .emit("onJoinChannelSuccess",uid);
-
-//            new Handler().post(new Runnable() {
-//                @Override
-//                public void run() {
-//                    mRAC
-//                            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
-//                            .emit("onJoinChannelSuccess",uid);
-//                }
-//            });
-
 
+            runOnUiThread(new Runnable() {
+                @Override
+                public void run() {
+                    WritableMap map = Arguments.createMap();
+                    map.putString("type", "onJoinChannelSuccess");
+                    map.putString("channel", channel);
+                    map.putInt("uid", uid);
+                    commonEvent(map);
+                }
+            });
         }
 
         /**
 
             Log.i("Agora", "有人来了----");
 
-            new Handler().post(new Runnable() {
+            runOnUiThread(new Runnable() {
                 @Override
                 public void run() {
-                    mRAC
-                            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
-                            .emit("onUserJoined", uid);
+                    WritableMap map = Arguments.createMap();
+                    map.putString("type", "onUserJoined");
+                    map.putInt("uid", uid);
+                    commonEvent(map);
                 }
             });
 
          * 错误信息
          */
         @Override
-        public void onError(int err) {
+        public void onError(final int err) {
             Log.i("Agora", err + "错误---");
+            runOnUiThread(new Runnable() {
+                @Override
+                public void run() {
+                    WritableMap map = Arguments.createMap();
+                    map.putString("type", "onError");
+                    map.putInt("err", err);
+                    commonEvent(map);
+                }
+            });
         }
 
         /**
          * 警告
          */
         @Override
-        public void onWarning(int warn) {
+        public void onWarning(final int warn) {
             Log.i("Agora", warn + "警告---");
+            runOnUiThread(new Runnable() {
+                @Override
+                public void run() {
+                    WritableMap map = Arguments.createMap();
+                    map.putString("type", "onWarning");
+                    map.putInt("warn", warn);
+                    commonEvent(map);
+                }
+            });
         }
 
         /**
     };
 
 
-    public AgoraModule(ReactApplicationContext context) {
-
-        super(context);
-    }
-
-    @Override
-    public String getName() {
-        return "RCTAgora";
-    }
-
-
     @ReactMethod
-    public void loadAgoraKit(ReadableMap options) {
-        Log.i("Agora", options.toString());
-
-        mContext = getCurrentActivity();
-        mRAC = getReactApplicationContext();
-
-        mRtcEngine = RtcEngine.create(mContext, options.getString("appid"), mRtcEventHandler);
-        mRtcEngine.enableVideo();
-//        mRtcEngine.setChannelProfile(options.getInt("channelProfile"));
-//        mRtcEngine.setVideoProfile(options.getInt("videoProfile"), true);
-
-        mRtcEngine.enableWebSdkInteroperability(true);
-        mRtcEngine.setVideoProfile(Constants.VIDEO_PROFILE_360P, false);
-        mRtcEngine.setChannelProfile(Constants.CHANNEL_PROFILE_LIVE_BROADCASTING);
-
-        mRtcEngine.joinChannel(null, options.getString("channelName"), options.getString("info"), 0);
-
-
-
+    public void init(ReadableMap options) {
+        AgoraManager.getInstance().init(getReactApplicationContext(), mRtcEventHandler, options);
+        AgoraManager.getInstance().setupLocalVideo().startPreview();
     }
 
+    //进入房间
     @ReactMethod
-    public void setupLocalVideo(final int uid, final int tag) {
-
-        final UIManagerModule uiManager = getReactApplicationContext().getNativeModule
-                (UIManagerModule.class);
-        uiManager.addUIBlock(new UIBlock() {
-            @Override
-            public void execute(NativeViewHierarchyManager nativeViewHierarchyManager) {
-
-                ReactViewGroup dView = (ReactViewGroup)nativeViewHierarchyManager.resolveView(tag);
-
-                Log.i("Agora", dView.getWidth() + "dView");
-                Log.i("Agora", dView.getHeight() + "dView");
-
-                SurfaceView surfaceView = RtcEngine.CreateRendererView(getReactApplicationContext());
-
-                Log.i("Agora", surfaceView.getWidth() + "surfaceView");
-                Log.i("Agora", getReactApplicationContext().toString());
-                Log.i("Agora", surfaceView.toString());
-
-                dView.addView(surfaceView);
-
-                mRtcEngine.setupLocalVideo(new VideoCanvas(surfaceView, VideoCanvas.RENDER_MODE_HIDDEN, uid));
-                mRtcEngine.startPreview();
-
-            }
-        });
+    public void joinChannel(String channelName) {
+        AgoraManager.getInstance().joinChannel(channelName);
     }
 
-
+    //退出
     @ReactMethod
-    public void setupRemoteVideo(final int uid, final int tag) {
-
-        final UIManagerModule uiManager = getReactApplicationContext().getNativeModule
-                (UIManagerModule.class);
-        uiManager.addUIBlock(new UIBlock() {
-            @Override
-            public void execute(NativeViewHierarchyManager nativeViewHierarchyManager) {
-
-                View dView = nativeViewHierarchyManager.resolveView(tag);
-
-                SurfaceView surfaceView = RtcEngine.CreateRendererView(dView.getContext());
-
-//                ViewGroup gView = (ViewGroup) dView;
-//                gView.addView(surfaceView);
+    public void leaveChannel() {
+        AgoraManager.getInstance().leaveChannel();
+    }
 
-//                Log.i("Agora", surfaceView.getWidth() + "");
-//                Log.i("Agora", uid+"---"+tag);
-//
-                mRtcEngine.setupRemoteVideo(new VideoCanvas(surfaceView, VideoCanvas.RENDER_MODE_HIDDEN, uid));
+    private void commonEvent(WritableMap map) {
+        sendEvent(getReactApplicationContext(), "agoraEvent", map);
+    }
 
-            }
-        });
+    private void sendEvent(ReactContext reactContext,
+                           String eventName,
+                           @Nullable WritableMap params) {
+        reactContext
+                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+                .emit(eventName, params);
     }
-}
-
-//                setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
-//                surfaceView.setZOrderOnTop(false);
-//                surfaceView.setZOrderMediaOverlay(false);
-
-//                int w = dView.getWidth();
-//                int h = dView.getHeight();
-//                surfaceView.measure(w, h);
-//                int height =surfaceView.getMeasuredHeight();
-
-//                ViewGroup.LayoutParams params = (ViewGroup.LayoutParams) surfaceView.getLayoutParams();
-//                params.width = 120;
-//                params.height = 120;
-//                surfaceView.setLayoutParams(params);
-
-//                Log.i("Agora", surfaceView.getWidth() + "surfaceView");
-//                Log.i("Agora", uid+"---"+tag);
-
-//                ViewGroup gView = (ViewGroup) dView;
-//                Log.i("Agora", gView.getWidth() + "gView");
-//                Log.i("Agora", gView.getHeight() + "gView");
-//
-//                gView.addView(surfaceView);
-//Button button = new Button(dView.getContext());
-//button.setText("123");
-//
-//        dView.addView(button);
-//                ArrayList<View> list = new ArrayList<>();
-//                list.add(surfaceView);
-//                dView.addChildrenForAccessibility(list);
+
+}

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

     @Override
     public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
         return Arrays.asList(new NativeModule[]{
-            new AgoraModule(reactContext),
+                new AgoraModule(reactContext),
         });
     }
 
 
     @Override
     public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-        return Collections.emptyList();
+        return Arrays.<ViewManager>asList(
+                new AgoraViewManage()
+        );
     }
 }

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

+package com.syan.agora;
+
+import android.content.Context;
+import android.widget.RelativeLayout;
+
+import com.facebook.react.uimanager.ThemedReactContext;
+
+/**
+ * Created by DB on 2017/6/27.
+ */
+
+public class AgoraVideoView extends RelativeLayout {
+
+    Context context;
+
+    public AgoraVideoView(ThemedReactContext context) {
+        super(context);
+
+        this.context = context;
+
+    }
+
+}

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

+package com.syan.agora;
+
+import android.view.SurfaceView;
+import android.view.View;
+
+import com.facebook.react.uimanager.SimpleViewManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+/**
+ * Created by DB on 2017/6/23.
+ */
+
+public class AgoraViewManage extends SimpleViewManager<AgoraVideoView> {
+
+    ThemedReactContext context;
+
+    private AgoraVideoView agoraVideoView;
+
+    @Override
+    public String getName() {
+        return "AgoraView";
+    }
+
+    @Override
+    protected AgoraVideoView createViewInstance(ThemedReactContext reactContext) {
+        this.context = reactContext;
+
+        agoraVideoView = new AgoraVideoView(reactContext);
+
+        return agoraVideoView;
+    }
+
+    @ReactProp(name = "localUid")
+    public void setLocalUid(final AgoraVideoView agoraVideoView, int localUid) {
+
+        if (localUid == 0) {
+            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);
+        }
+    }
+}

index.js

 import {
     NativeModules,
-    findNodeHandle
+    findNodeHandle,
+    NativeAppEventEmitter
 } from 'react-native';
 
 const { Agora } = NativeModules
 
-export const loadAgoraKit = (options) => Agora.loadAgoraKit(options)
+export default {
+
+    init(options = {}) {
+        this.listener && this.listener.remove();
+        Agora.init(options);
+    },
+    joinChannel(channelName = '001'){
+        Agora.joinChannel(channelName)
+    },
+    eventEmitter(fnConf) {
+        // const {
+        //     onFirstRemoteVideoDecoded = () => {},
+        //     onJoinChannelSuccess = () => {},
+        //     onUserJoined = () => {},
+        //     onError = () => {},
+        //     onWarning = () => {}
+        // } = options;
+
+        // let fnConf = {...options};
+        //there are no `removeListener` for NativeAppEventEmitter & DeviceEventEmitter
+        this.listener && this.listener.remove();
+        this.listener = NativeAppEventEmitter.addListener('agoraEvent', event => {
+            fnConf[event['type']] && fnConf[event['type']](event);
+        });
+    },
+    removeEmitter() {
+        this.listener && this.listener.remove();
+    }
+
+};

package.json

 {
   "name": "react-native-agora",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "声网Agora",
   "main": "index.js",
   "scripts": {