Ingen beskrivning

agora.js 9.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  1. import React, {Component, PureComponent} from 'react';
  2. import {
  3. StyleSheet, Text, View, TouchableOpacity,
  4. Image, Dimensions, Modal, Platform, NativeModules
  5. } from 'react-native';
  6. import {RtcEngine, AgoraView} from 'react-native-agora';
  7. import {
  8. APPID,
  9. isIphoneX, isIphoneXR
  10. } from '../utils';
  11. const {Agora} = NativeModules;
  12. if (!Agora) {
  13. throw new Error("Agora load failed in react-native, please check ur compiler environments");
  14. }
  15. const {
  16. FPS30,
  17. FixedLandscape,
  18. Host,
  19. AudioProfileDefault,
  20. AudioScenarioDefault,
  21. } = Agora;
  22. const BtnEndCall = () => require('../assets/btn_endcall.png');
  23. const BtnMute = () => require('../assets/btn_mute.png');
  24. const BtnSpeaker = () => require('../assets/btn_speaker.png');
  25. const BtnSwitchCamera = () => require('../assets/btn_switch_camera.png');
  26. const BtnVideo = () => require('../assets/btn_video.png');
  27. const EnableCamera = () => require('../assets/enable_camera.png');
  28. const DisableCamera = () => require('../assets/disable_camera.png');
  29. const EnablePhotoflash = () => require('../assets/enable_photoflash.png');
  30. const DisablePhotoflash = () => require('../assets/disable_photoflash.png');
  31. const IconMuted = () => require('../assets/icon_muted.png');
  32. const IconSpeaker = () => require('../assets/icon_speaker.png');
  33. const {width, height} = Dimensions.get('window');
  34. const safeTop = (top) => (isIphoneX(Platform, width, height) ?
  35. (top + 88) :
  36. (isIphoneXR(Platform, width, height) ? ( top + 64 ) : top)
  37. );
  38. const styles = StyleSheet.create({
  39. container: {
  40. flex: 1,
  41. backgroundColor: '#F4F4F4'
  42. },
  43. absView: {
  44. position: 'absolute',
  45. top: safeTop(0),
  46. left: 0,
  47. right: 0,
  48. bottom: 0,
  49. justifyContent: 'space-between',
  50. },
  51. videoView: {
  52. padding: 5,
  53. flexWrap: 'wrap',
  54. flexDirection: 'row',
  55. zIndex: 100
  56. },
  57. localView: {
  58. flex: 1
  59. },
  60. remoteView: {
  61. width: (width - 40) / 3,
  62. height: (width - 40) / 3,
  63. margin: 5
  64. },
  65. bottomView: {
  66. padding: 20,
  67. flexDirection: 'row',
  68. justifyContent: 'space-around'
  69. }
  70. });
  71. class OperateButton extends PureComponent {
  72. render() {
  73. const {onPress, source, style, imgStyle = {width: 50, height: 50}} = this.props;
  74. return (
  75. <TouchableOpacity
  76. style={style}
  77. onPress={onPress}
  78. activeOpacity={.7}
  79. >
  80. <Image
  81. style={imgStyle}
  82. source={source}
  83. />
  84. </TouchableOpacity>
  85. )
  86. }
  87. }
  88. type Props = {
  89. channelProfile: Number,
  90. channelName: String,
  91. videoProfile: Number,
  92. clientRole: Number,
  93. onCancel: Function,
  94. uid: Number,
  95. }
  96. export default class AgoraComponent extends Component<Props> {
  97. state = {
  98. peerIds: [],
  99. joinSucceed: false,
  100. isSpeak: true,
  101. isMute: false,
  102. isCameraTorch: false,
  103. disableVideo: false,
  104. hideButton: false,
  105. visible: false,
  106. selectedUid: undefined,
  107. };
  108. componentWillMount () {
  109. const config = {
  110. appid: APPID,
  111. channelProfile: this.props.channelProfile,
  112. videoProfile: this.props.videoProfile,
  113. clientRole: this.props.clientRole,
  114. videoEncoderConfig: {
  115. width: 360,
  116. height: 480,
  117. bitrate: 1,
  118. frameRate: FPS30,
  119. orientationMode: FixedLandscape,
  120. },
  121. clientRole: Host,
  122. audioProfile: AudioProfileDefault,
  123. audioScenario: AudioScenarioDefault
  124. }
  125. console.log("[CONFIG]", JSON.stringify(config));
  126. console.log("[CONFIG.encoderConfig", config.videoEncoderConfig);
  127. RtcEngine.init(config);
  128. RtcEngine.eventEmitter({
  129. onFirstRemoteVideoDecoded: (data) => {
  130. console.log('[RtcEngine] onFirstRemoteVideoDecoded', data);
  131. },
  132. onUserJoined: (data) => {
  133. console.log('[RtcEngine] onUserJoined', data);
  134. const {peerIds} = this.state;
  135. if (peerIds.indexOf(data.uid) === -1) {
  136. this.setState({
  137. peerIds: [...peerIds, data.uid]
  138. })
  139. }
  140. },
  141. onUserOffline: (data) => {
  142. console.log('[RtcEngine] onUserOffline', data);
  143. this.setState({
  144. peerIds: this.state.peerIds.filter(uid => uid !== data.uid)
  145. })
  146. },
  147. onJoinChannelSuccess: (data) => {
  148. console.log('[RtcEngine] onJoinChannelSuccess', data);
  149. RtcEngine.startPreview();
  150. this.setState({
  151. joinSucceed: true
  152. })
  153. },
  154. onAudioVolumeIndication: (data) => {
  155. console.log('[RtcEngine] onAudioVolumeIndication', data);
  156. },
  157. onClientRoleChanged: (data) => {
  158. console.log("[RtcEngine] onClientRoleChanged", data);
  159. },
  160. onError: (data) => {
  161. console.log('[RtcEngine] onError', data);
  162. if (data.error === 17) {
  163. RtcEngine.leaveChannel().then(_ => {
  164. RtcEngine.destroy();
  165. this.props.onCancel(data);
  166. });
  167. }
  168. }
  169. })
  170. }
  171. componentDidMount () {
  172. RtcEngine.getSdkVersion((version) => {
  173. console.log('[RtcEngine] getSdkVersion', version);
  174. })
  175. console.log('[joinChannel] ' + this.props.channelName);
  176. RtcEngine.joinChannel(this.props.channelName, this.props.uid);
  177. RtcEngine.enableAudioVolumeIndication(500, 3);
  178. }
  179. componentWillUnmount () {
  180. if (this.state.joinSucceed) {
  181. RtcEngine.leaveChannel();
  182. RtcEngine.destroy();
  183. }
  184. }
  185. handleCancel = () => {
  186. RtcEngine.leaveChannel();
  187. RtcEngine.destroy();
  188. this.props.onCancel();
  189. }
  190. switchCamera = () => {
  191. RtcEngine.switchCamera();
  192. }
  193. toggleAllRemoteAudioStreams = () => {
  194. this.setState({
  195. isMute: !this.state.isMute
  196. }, () => {
  197. RtcEngine.muteAllRemoteAudioStreams(this.state.isMute);
  198. })
  199. }
  200. toggleSpeakerPhone = () => {
  201. this.setState({
  202. isSpeak: !this.state.isSpeak
  203. }, () => {
  204. RtcEngine.setDefaultAudioRouteToSpeakerphone(this.state.isSpeak);
  205. })
  206. }
  207. toggleCameraTorch = () => {
  208. this.setState({
  209. isCameraTorch: !this.state.isCameraTorch
  210. }, () => {
  211. RtcEngine.setCameraTorchOn(this.state.isCameraTorch).then(val => {
  212. console.log("setCameraTorch", val);
  213. })
  214. })
  215. }
  216. toggleVideo = () => {
  217. this.setState({
  218. disableVideo: !this.state.videodisableVideo
  219. }, () => {
  220. this.state.disableVideo ? RtcEngine.enableVideo() : RtcEngine.disableVideo()
  221. });
  222. }
  223. toggleHideButtons = () => {
  224. this.setState({
  225. hideButton: !this.state.hideButton
  226. })
  227. }
  228. onPressVideo = (uid) => {
  229. this.setState({
  230. selectedUid: uid
  231. }, () => {
  232. this.setState({
  233. visible: true
  234. })
  235. })
  236. }
  237. buttonsView = ({hideButton, isCameraTorch, disableVideo, isMute, isSpeaker}) => {
  238. if (!hideButton) {
  239. return (
  240. <View>
  241. <OperateButton
  242. style={{alignSelf: 'center', marginBottom: -10}}
  243. onPress={this.handleCancel}
  244. imgStyle={{width: 60, height: 60}}
  245. source={BtnEndCall()}
  246. />
  247. <View style={styles.bottomView}>
  248. <OperateButton
  249. onPress={this.toggleCameraTorch}
  250. imgStyle={{width: 40, height: 40}}
  251. source={isCameraTorch ? EnablePhotoflash() : DisablePhotoflash()}
  252. />
  253. <OperateButton
  254. onPress={this.toggleVideo}
  255. source={disableVideo ? EnableCamera() : DisableCamera()}
  256. />
  257. </View>
  258. <View style={styles.bottomView}>
  259. <OperateButton
  260. onPress={this.toggleAllRemoteAudioStreams}
  261. source={isMute ? IconMuted() : BtnMute()}
  262. />
  263. <OperateButton
  264. onPress={this.switchCamera}
  265. source={BtnSwitchCamera()}
  266. />
  267. <OperateButton
  268. onPress={this.toggleSpeakerPhone}
  269. source={!isSpeaker ? IconSpeaker() : BtnSpeaker()}
  270. />
  271. </View>
  272. </View>)
  273. }
  274. }
  275. agoraPeerViews = ({visible, peerIds}) => {
  276. return (visible ?
  277. <View style={styles.videoView} /> :
  278. <View style={styles.videoView}>{
  279. peerIds.map((uid, key) => (
  280. <TouchableOpacity
  281. activeOpacity={1}
  282. onPress={() => this.onPressVideo(uid)}
  283. key={key}>
  284. <AgoraView
  285. style={styles.remoteView}
  286. zOrderMediaOverlay={true}
  287. remoteUid={uid}
  288. />
  289. </TouchableOpacity>
  290. ))
  291. }</View>)
  292. }
  293. modalView = ({visible}) => {
  294. return (
  295. <Modal
  296. visible={visible}
  297. presentationStyle={'fullScreen'}
  298. animationType={'slide'}
  299. onRequestClose={() => {}}
  300. >
  301. <TouchableOpacity
  302. activeOpacity={1}
  303. style={{flex: 1}}
  304. onPress={() => this.setState({
  305. visible: false
  306. })} >
  307. <AgoraView
  308. style={{flex: 1}}
  309. zOrderMediaOverlay={true}
  310. remoteUid={this.state.selectedUid}
  311. />
  312. </TouchableOpacity>
  313. </Modal>)
  314. }
  315. render () {
  316. if (!this.state.joinSucceed) {
  317. return (
  318. <View style={{flex: 1, backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center'}}>
  319. <Text>Creating a video conference...</Text>
  320. </View>
  321. )
  322. }
  323. return (
  324. <TouchableOpacity
  325. activeOpacity={1}
  326. onPress={this.toggleHideButtons}
  327. style={styles.container}
  328. >
  329. <AgoraView style={styles.localView} showLocalVideo={true} />
  330. <View style={styles.absView}>
  331. <Text>channelName: {this.props.channelName}, peers: {this.state.peerIds.length}</Text>
  332. {this.agoraPeerViews(this.state)}
  333. {this.buttonsView(this.state)}
  334. </View>
  335. {this.modalView(this.state)}
  336. </TouchableOpacity>
  337. )
  338. }
  339. }