add samples readme

.gitignore

@@ -55,3 +55,6 @@ android/src/main/res/drawable/
 **/*.*~
 **/*.swp
 **/*.~
+.project
+.settings
+.classpath

samples/README.md

@@ -0,0 +1,5 @@
+# react native agora samples
+
+| name | description |
+| :-------------: | :-------------: |
+| [simpleDemo](./simpleDemo) | react-native-agora demo for beginner |

samples/simpleDemo/App.js

@@ -57,7 +57,8 @@ export default class App extends Component<Props> {
       channelProfile: 1,
       videoProfile: 40,
       clientRole: 1,
-      swapWidthAndHeight: true
+      swapWidthAndHeight: true,
+      channelName: 'defaultChannel'
     };
   }
 
@@ -83,6 +84,7 @@ export default class App extends Component<Props> {
         videoProfile={this.state.videoProfile}
         clientRole={this.state.clientRole}
         swapWidthAndHeight={this.state.swapWidthAndHeight}
+        channelName={this.state.channelName}
       ></AgoraRTCView>);
     }
     return (
@@ -119,6 +121,11 @@ export default class App extends Component<Props> {
               this.setState({clientRole: +matched})
             }          }
         } />
+        <TextInput
+          style={{height: 40}}
+          placeholder="Enter channelName"
+          onChnageText={(text) => this.setState({channelName: text})}
+        />
         <TouchableOpacity
           style={styles.button}
           onPress={this.joinChannel}
@@ -128,4 +135,4 @@ export default class App extends Component<Props> {
       </View>
     );
   }
-}
+}

samples/simpleDemo/README.md

@@ -17,6 +17,40 @@
   npm install
   npm run android
   ```
+## Build Signed App
+### Generate keystore file.
+
+  ```bash
+    keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
+  ```
+### Edit android/app/build.gradle
+
+  ```java
+    signingConfigs {
+        release {
+            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
+                storeFile file(MYAPP_RELEASE_STORE_FILE)
+                storePassword MYAPP_RELEASE_STORE_PASSWORD
+                keyAlias MYAPP_RELEASE_KEY_ALIAS
+                keyPassword MYAPP_RELEASE_KEY_PASSWORD
+            }
+        }
+    }
+  ```
+
+### Edit android/gradle.properties
+
+  ```
+  MYAPP_RELEASE_STORE_FILE=my-release-key.keystore # your keystore file name
+  MYAPP_RELEASE_KEY_ALIAS=my-key-alias # key alias
+  MYAPP_RELEASE_STORE_PASSWORD=****** # password
+  MYAPP_RELEASE_KEY_PASSWORD=****** # password confirm
+  ```
+
+### Build
+  ```
+  npm run build-android
+  ```
 
 # iOS Setup
 
@@ -31,4 +65,4 @@
   ```bash
   npm install
   npm run ios
-  ```
+  ```

samples/simpleDemo/components/agora.js

@@ -1,12 +1,13 @@
 import React, {Component, PureComponent} from 'react';
 import {
   StyleSheet, Text, View, TouchableOpacity,
-  Image, Dimensions, Modal
+  Image, Dimensions, Modal, Platform
 } from 'react-native';
 
 import {RtcEngine, AgoraView} from 'react-native-agora';
 import {
   APPID,
+  isIphoneX, isIphoneXR
 } from '../utils';
 
 const BtnEndCall = () => require('../assets/btn_endcall.png');
@@ -19,9 +20,14 @@ const DisableCamera = () => require('../assets/disable_camera.png');
 const EnablePhotoflash = () => require('../assets/enable_photoflash.png');
 const DisablePhotoflash = () => require('../assets/disable_photoflash.png');
 const IconMuted = () => require('../assets/icon_muted.png');
-const IconSpeaker = () =>require('../assets/icon_speaker.png');
+const IconSpeaker = () => require('../assets/icon_speaker.png');
 
-const {width} = Dimensions.get('window');
+const {width, height} = Dimensions.get('window');
+
+const safeTop = (top) => (isIphoneX(Platform, width, height) ?
+  (top + 88) :
+  (isIphoneXR(Platform, width, height) ? ( top + 64 ) : top)
+);
 
 const styles = StyleSheet.create({
   container: {
@@ -30,7 +36,7 @@ const styles = StyleSheet.create({
   },
   absView: {
     position: 'absolute',
-    top: 20,
+    top: safeTop(0),
     left: 0,
     right: 0,
     bottom: 0,
@@ -77,6 +83,7 @@ class OperateButton extends PureComponent {
 
 type Props = {
   channelProfile: Number,
+  channelName: String,
   videoProfile: Number,
   clientRole: Number,
   swapWidthAndHeight: Boolean,
@@ -113,17 +120,12 @@ export default class Agora extends Component<Props> {
       console.log('[RtcEngine] getSdkVersion', version);
     })
 
-    RtcEngine.joinChannel();
+    console.log('[joinChannel] ' + this.props.channelName);
+    RtcEngine.joinChannel(this.props.channelName);
     RtcEngine.enableAudioVolumeIndication(500, 3);
     RtcEngine.eventEmitter({
       onFirstRemoteVideoDecoded: (data) => {
         console.log('[RtcEngine] onFirstRemoteVideoDecoded', data);
-        const {peerIds} = this.state;
-        if (peerIds.indexOf(data.uid) !== -1) {
-          this.setState({
-            peerIds: [...peerIds, data.uid]
-          })
-        }
       },
       onUserOffline: (data) => {
         console.log('[RtcEngine] onUserOffline', data);
@@ -144,6 +146,12 @@ export default class Agora extends Component<Props> {
       },
       onUserJoined: (data) => {
         console.log('[RtcEngine] onUserJoined', data);
+        const {peerIds} = this.state;
+        if (peerIds.indexOf(data.uid) !== -1) {
+          this.setState({
+            peerIds: [...peerIds, data.uid]
+          })
+        }
       },
       onError: (data) => {
         console.log('[RtcEngine] onError', data);
@@ -156,171 +164,172 @@ export default class Agora extends Component<Props> {
     })
   }
 
-componentWillUnmount () {
-  RtcEngine.removeEmitter()
-}
+  componentWillUnmount () {
+    RtcEngine.removeEmitter()
+  }
 
-handleCancel = () => {
-  RtcEngine.leaveChannel();
-  RtcEngine.destroy();
-  this.props.onCancel();
-}
+  handleCancel = () => {
+    RtcEngine.leaveChannel();
+    RtcEngine.destroy();
+    this.props.onCancel();
+  }
 
-switchCamera = () => {
-  RtcEngine.switchCamera();
-}
+  switchCamera = () => {
+    RtcEngine.switchCamera();
+  }
 
-toggleAllRemoteAudioStreams = () => {
-  this.setState({
-    isMute: !this.state.isMute
-  }, () => {
-    RtcEngine.muteAllRemoteAudioStreams(this.state.isMute);
-  })
-}
+  toggleAllRemoteAudioStreams = () => {
+    this.setState({
+      isMute: !this.state.isMute
+    }, () => {
+      RtcEngine.muteAllRemoteAudioStreams(this.state.isMute);
+    })
+  }
 
-toggleSpeakerPhone = () => {
-  this.setState({
-    isSpeak: !this.state.isSpeak
-  }, () => {
-    RtcEngine.setDefaultAudioRouteToSpeakerphone(this.state.isSpeak);
-  })
-}
+  toggleSpeakerPhone = () => {
+    this.setState({
+      isSpeak: !this.state.isSpeak
+    }, () => {
+      RtcEngine.setDefaultAudioRouteToSpeakerphone(this.state.isSpeak);
+    })
+  }
 
-toggleCameraTorch = () => {
-  this.setState({
-    isCameraTorch: !this.state.isCameraTorch
-  }, () => {
-    RtcEngine.setCameraTorchOn(this.state.isCameraTorch)
-  })
-}
+  toggleCameraTorch = () => {
+    this.setState({
+      isCameraTorch: !this.state.isCameraTorch
+    }, () => {
+      RtcEngine.setCameraTorchOn(this.state.isCameraTorch)
+    })
+  }
 
-toggleVideo = () => {
-  this.setState({
-    disableVideo: !this.state.videodisableVideo
-  }, () => {
-    this.state.disableVideo ? RtcEngine.enableVideo() : RtcEngine.disableVideo()
-  });
-}
+  toggleVideo = () => {
+    this.setState({
+      disableVideo: !this.state.videodisableVideo
+    }, () => {
+      this.state.disableVideo ? RtcEngine.enableVideo() : RtcEngine.disableVideo()
+    });
+  }
 
-toggleHideButtons = () => {
-  this.setState({
-    hideButton: !this.state.hideButton
-  })
-}
+  toggleHideButtons = () => {
+    this.setState({
+      hideButton: !this.state.hideButton
+    })
+  }
 
-onPressVideo = (uid) => {
-  this.setState({
-    selectedUid: uid
-  }, () => {
+  onPressVideo = (uid) => {
     this.setState({
-      visible: true
+      selectedUid: uid
+    }, () => {
+      this.setState({
+        visible: true
+      })
     })
-  })
-}
+  }
 
-buttonsView = ({hideButton, isCameraTorch, disableVideo, isMute, isSpeaker}) => {
-  if (!hideButton) {
-  return (
-    <View>
-      <OperateButton
-        style={{alignSelf: 'center', marginBottom: -10}}
-        onPress={this.handleCancel}
-        imgStyle={{width: 60, height: 60}}
-        source={BtnEndCall()}
-    />
-    <View style={styles.bottomView}>
-      <OperateButton
-        onPress={this.toggleCameraTorch}
-        imgStyle={{width: 40, height: 40}}
-        source={isCameraTorch ? EnablePhotoflash() : DisablePhotoflash()}
-      />
-      <OperateButton
-        onPress={this.toggleVideo}
-        source={disableVideo ? EnableCamera() : DisableCamera()}
-      />
-    </View>
-    <View style={styles.bottomView}>
-      <OperateButton
-        onPress={this.toggleAllRemoteAudioStreams}
-        source={isMute ? IconMuted() : BtnMute()}
-      />
-      <OperateButton
-        onPress={this.switchCamera}
-        source={BtnSwitchCamera()}
-      />
-      <OperateButton
-        onPress={this.toggleSpeakerPhone}
-        source={!isSpeaker ? IconSpeaker() : BtnSpeaker()}
+  buttonsView = ({hideButton, isCameraTorch, disableVideo, isMute, isSpeaker}) => {
+    if (!hideButton) {
+    return (
+      <View>
+        <OperateButton
+          style={{alignSelf: 'center', marginBottom: -10}}
+          onPress={this.handleCancel}
+          imgStyle={{width: 60, height: 60}}
+          source={BtnEndCall()}
       />
-    </View>
-    </View>)
+      <View style={styles.bottomView}>
+        <OperateButton
+          onPress={this.toggleCameraTorch}
+          imgStyle={{width: 40, height: 40}}
+          source={isCameraTorch ? EnablePhotoflash() : DisablePhotoflash()}
+        />
+        <OperateButton
+          onPress={this.toggleVideo}
+          source={disableVideo ? EnableCamera() : DisableCamera()}
+        />
+      </View>
+      <View style={styles.bottomView}>
+        <OperateButton
+          onPress={this.toggleAllRemoteAudioStreams}
+          source={isMute ? IconMuted() : BtnMute()}
+        />
+        <OperateButton
+          onPress={this.switchCamera}
+          source={BtnSwitchCamera()}
+        />
+        <OperateButton
+          onPress={this.toggleSpeakerPhone}
+          source={!isSpeaker ? IconSpeaker() : BtnSpeaker()}
+        />
+      </View>
+      </View>)
+    }
   }
-}
-
-agoraPeerViews = ({visible, peerIds}) => {
-  return (visible ? 
-  <View style={styles.videoView} /> :
-  <View style={styles.videoView}>{
-    peerIds.map((uid, key) => (
-    <TouchableOpacity
-      activeOpacity={1}
-      onPress={() => this.onPressVideo(uid)}
-      key={key}>
-    <AgoraView
-        style={styles.remoteView}
-        zOrderMediaOverlay={true}
-        remoteUid={uid}
-    />
-    </TouchableOpacity>
-    ))
-    }</View>)
-}
 
-modalView = ({visible}) => {
-  return (
-  <Modal
-    visible={visible}
-    presentationStyle={'fullScreen'}
-    animationType={'slide'}
-    onRequestClose={() => {}}
-    >
-    <TouchableOpacity
-      activeOpacity={1}
-      style={{flex: 1}}
-      onPress={() => this.setState({
-        visible: false
-    })} >
+  agoraPeerViews = ({visible, peerIds}) => {
+    return (visible ? 
+    <View style={styles.videoView} /> :
+    <View style={styles.videoView}>{
+      peerIds.map((uid, key) => (
+      <TouchableOpacity
+        activeOpacity={1}
+        onPress={() => this.onPressVideo(uid)}
+        key={key}>
       <AgoraView
-        style={{flex: 1}}
-        zOrderMediaOverlay={true}
-        remoteUid={this.state.selectedUid}
+          style={styles.remoteView}
+          zOrderMediaOverlay={true}
+          remoteUid={uid}
       />
-    </TouchableOpacity>
-  </Modal>)
-}
+      </TouchableOpacity>
+      ))
+      }</View>)
+  }
 
-render () {
-  if (!this.state.joinSucceed) {
+  modalView = ({visible}) => {
     return (
-    <View style={{flex: 1, backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center'}}>
-      <Text>Creating a video conference...</Text>
-    </View>
-    )
+    <Modal
+      visible={visible}
+      presentationStyle={'fullScreen'}
+      animationType={'slide'}
+      onRequestClose={() => {}}
+      >
+      <TouchableOpacity
+        activeOpacity={1}
+        style={{flex: 1}}
+        onPress={() => this.setState({
+          visible: false
+      })} >
+        <AgoraView
+          style={{flex: 1}}
+          zOrderMediaOverlay={true}
+          remoteUid={this.state.selectedUid}
+        />
+      </TouchableOpacity>
+    </Modal>)
   }
 
-  return (
-    <TouchableOpacity
-      activeOpacity={1}
-      onPress={this.toggleHideButtons}
-      style={styles.container}
-    >
-      <AgoraView style={styles.localView} showLocalVideo={true} />
-        <View style={styles.absView}>
-          {this.agoraPeerViews(this.state)}
-          {this.buttonsView(this.state)}
-        </View>
-      {this.modalView(this.state)}
-    </TouchableOpacity>
+  render () {
+    if (!this.state.joinSucceed) {
+      return (
+      <View style={{flex: 1, backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center'}}>
+        <Text>Creating a video conference...</Text>
+      </View>
+      )
+    }
+
+    return (
+      <TouchableOpacity
+        activeOpacity={1}
+        onPress={this.toggleHideButtons}
+        style={styles.container}
+      >
+        <AgoraView style={styles.localView} showLocalVideo={true} />
+          <View style={styles.absView}>
+            <Text>channelName: {this.props.channelName}, peers: {this.state.peerIds.length}</Text>
+            {this.agoraPeerViews(this.state)}
+            {this.buttonsView(this.state)}
+          </View>
+        {this.modalView(this.state)}
+      </TouchableOpacity>
     )
-  } 
-}
+  }
+}

samples/simpleDemo/package.json

@@ -6,6 +6,8 @@
     "start": "node node_modules/react-native/local-cli/cli.js start",
     "ios": "react-native run-ios && react-native log-ios",
     "android": "react-native run-android && react-native log-android",
+-   "bundle-android": "react-native bundle --entry-file index.js --bundle-output android/app/build/generated/assets/react/release/index.android.bundle --platform android --assets-dest android/app/src/main/res --dev false",
+-   "build-android": "cd android && ./gradlew assembleRelease",
     "test": "jest"
   },
   "dependencies": {

samples/simpleDemo/utils.js

@@ -1 +1,26 @@
-export const APPID = 'Your Agora APP_ID'; //'Your Agora APP_ID'
+export const APPID = 'Your Agora APP_ID'; //'Your Agora APP_ID'
+// iPhoneX Xs
+const X_WIDTH = 375;
+const X_HEIGHT = 812;
+
+// iPhoneXR XsMax
+const XR_WIDTH = 414;
+const XR_HEIGHT = 896;
+
+//判断是否为iphoneX或Xs
+export function isIphoneX(Platform, SCREEN_WIDTH, SCREEN_HEIGHT) {
+    return (
+        Platform.OS === 'ios' &&
+        ((SCREEN_HEIGHT === X_HEIGHT && SCREEN_WIDTH === X_WIDTH) ||
+        (SCREEN_HEIGHT === X_WIDTH && SCREEN_WIDTH === X_HEIGHT))
+    )
+};
+
+//判断是否为iphoneXR或XsMAX
+export function isIphoneXR(Platform, SCREEN_WIDTH, SCREEN_HEIGHT) {
+    return (
+        Platform.OS === 'ios' &&
+        ((SCREEN_HEIGHT === XR_HEIGHT && SCREEN_WIDTH === XR_WIDTH) ||
+        (SCREEN_HEIGHT === XR_WIDTH && SCREEN_WIDTH === XR_HEIGHT))
+    )
+};