docs: update example and README.md

AgoraIO-Extensions · Dec 28, 2020 · 8d83a54 · 8d83a54
1 parent 17a3dd6
commit 8d83a54
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -1,19 +1,79 @@
 # react-native-agora-rawdata
 
-The rawdata plugin for react-native-agora
+The rawdata plugin for [react-native-agora](https://www.npmjs.com/package/react-native-agora).
+
+## Important
+
+The plugin only exports four methods to the javascript layer that can register or unregister the observer.
+
+```ts
+type AgoraRawdataType = {
+  registerAudioFrameObserver(engineHandle: number): Promise<void>;
+
+  unregisterAudioFrameObserver(): Promise<void>;
+
+  registerVideoFrameObserver(engineHandle: number): Promise<void>;
+
+  unregisterVideoFrameObserver(): Promise<void>;
+};
+```
+
+The plugin changes the color of the video stream by the default:
+
+* Change local video to green
+* Change remote video to pink
+
+You can find the code at:
+
+* Android: [AgoraRawdataModule.kt](android/src/main/java/io/agora/rtc/rawdata/react/AgoraRawdataModule.kt)
+  * Local video: `onCaptureVideoFrame`
+  * Remote video: `onRenderVideoFrame`
+* iOS: [AgoraRawdata.swift](ios/React/AgoraRawdata.swift)
+  * Local video: `onCapture`
+  * Remote video: `onRenderVideoFrame`
+
+**If you can program with C++, you should process raw data on the C++ layer to improve performance and remove code about
+calling Android and iOS.**
+
+You can find the code at:
+
+* Android:
+  * Audio: [AudioFrameObserver.cpp](cpp/android/AudioFrameObserver.cpp)
+  * Video: [VideoFrameObserver.cpp](cpp/android/VideoFrameObserver.cpp)
+* iOS:
+  * Audio: [AgoraAudioFrameObserver.mm](ios/Base/AgoraAudioFrameObserver.mm)
+  * Video: [AgoraVideoFrameObserver.mm](ios/Base/AgoraVideoFrameObserver.mm)
 
 ## Installation
 
-```sh
+```shell
 npm install react-native-agora-rawdata
 ```
 
+**You should fork this repository, and modify the code to implement your requirement, such as use third-party beauty SDK.**
+
 ## Usage
 
 ```js
 import AgoraRawdata from "react-native-agora-rawdata";
+import RtcEngine from 'react-native-agora';
+
+const agora = await RtcEngine.create(appId);
+await AgoraRawdata.registerAudioFrameObserver(
+  await agora.getNativeHandle()
+);
+await AgoraRawdata.registerVideoFrameObserver(
+  await agora.getNativeHandle()
+);
 ```
 
+## Resources
+
+* [Doc](https://docs.agora.io/en/Interactive%20Broadcast/landing-page?platform=React%20Native) for `react-native-agora`
+* [Doc](https://docs.agora.io/en/Interactive%20Broadcast/raw_data_video_android?platform=Android) for Android raw video
+  data
+* [Doc](https://docs.agora.io/en/Interactive%20Broadcast/raw_data_video_apple?platform=iOS) for iOS raw video data
+
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

diff --git a/example/package.json b/example/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "react": "16.11.0",
     "react-native": "0.62.2",
-    "react-native-agora": "3.1.4-rc.1"
+    "react-native-agora": "^3.1.7"
   },
   "devDependencies": {
     "@babel/core": "^7.9.6",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,24 +1,38 @@
 import * as React from 'react';
-import { PermissionsAndroid, StyleSheet, Text, View } from 'react-native';
+import { PermissionsAndroid, ScrollView, StyleSheet, View } from 'react-native';
 import AgoraRawdata from 'react-native-agora-rawdata';
-import Agora, { RtcLocalView, RtcRemoteView } from 'react-native-agora';
+import RtcEngine, { RtcLocalView, RtcRemoteView } from 'react-native-agora';
 
 const config = require('../agora.config.json');
 
 export default function App() {
-  const [joined, setJoined] = React.useState<boolean>();
+  const [engine, setEngine] = React.useState<RtcEngine>();
+  const [remoteUid, setRemoteUid] = React.useState<number[]>([]);
 
   React.useEffect(() => {
-    const test = async () => {
+    console.warn('mounted');
+
+    (async function () {
       await PermissionsAndroid.requestMultiple([
         PermissionsAndroid.PERMISSIONS.CAMERA,
         PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
       ]);
-      const agora = await Agora.create(config.appId);
-      agora.addListener('JoinChannelSuccess', () => {
-        setJoined(true);
+
+      const agora = await RtcEngine.create(config.appId);
+      setEngine(() => agora);
+      agora.addListener('JoinChannelSuccess', (channel, uid, elapsed) => {
+        console.info('JoinChannelSuccess', channel, uid, elapsed);
+      });
+      agora?.addListener('UserJoined', (uid, elapsed) => {
+        console.info('UserJoined', uid, elapsed);
+        setRemoteUid((value) => [...value, uid]);
+      });
+      agora?.addListener('UserOffline', (uid, reason) => {
+        console.info('UserOffline', uid, reason);
+        setRemoteUid((value) => value.filter((v) => v !== uid));
       });
       await agora.enableVideo();
+      await agora.startPreview();
       await AgoraRawdata.registerAudioFrameObserver(
         await agora.getNativeHandle()
       );
@@ -31,18 +45,38 @@ export default function App() {
         undefined,
         config.uid
       );
-    };
+    })();
 
-    // eslint-disable-next-line jest/no-disabled-tests
-    test();
+    return function () {
+      console.warn('unmounted');
+
+      (async function () {
+        await AgoraRawdata.unregisterAudioFrameObserver();
+        await AgoraRawdata.unregisterVideoFrameObserver();
+        setEngine((value) => {
+          value?.destroy();
+          return undefined;
+        });
+      })();
+    };
   }, []);
 
   return (
     <View style={styles.container}>
-      <Text>isJoined: {joined}</Text>
-      {joined && <RtcLocalView.SurfaceView style={styles.container} />}
-      {joined && (
-        <RtcRemoteView.SurfaceView style={styles.container} uid={123} />
+      {engine !== undefined && (
+        <RtcLocalView.SurfaceView style={styles.container} />
+      )}
+      {remoteUid !== undefined && (
+        <ScrollView horizontal={true} style={styles.remoteContainer}>
+          {remoteUid.map((value) => (
+            <RtcRemoteView.SurfaceView
+              key={value}
+              style={styles.remote}
+              uid={value}
+              zOrderMediaOverlay={true}
+            />
+          ))}
+        </ScrollView>
       )}
     </View>
   );
@@ -52,4 +86,13 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  remoteContainer: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+  },
+  remote: {
+    width: 120,
+    height: 120,
+  },
 });
diff --git a/package.json b/package.json
@@ -68,7 +68,8 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-agora": ">=3.1.7"
   },
   "jest": {
     "preset": "react-native",