暫無描述

agora.js 9.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  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. RtcEngine.on('firstRemoteVideoDecoded', (data) => {
  126. console.log('[RtcEngine] onFirstRemoteVideoDecoded', data);
  127. });
  128. RtcEngine.on('userJoined', (data) => {
  129. console.log('[RtcEngine] onUserJoined', data);
  130. const {peerIds} = this.state;
  131. if (peerIds.indexOf(data.uid) === -1) {
  132. this.setState({
  133. peerIds: [...peerIds, data.uid]
  134. })
  135. }
  136. });
  137. RtcEngine.on('userOffline', (data) => {
  138. console.log('[RtcEngine] onUserOffline', data);
  139. this.setState({
  140. peerIds: this.state.peerIds.filter(uid => uid !== data.uid)
  141. })
  142. });
  143. RtcEngine.on('joinChannelSuccess', (data) => {
  144. console.log('[RtcEngine] onJoinChannelSuccess', data);
  145. RtcEngine.startPreview();
  146. this.setState({
  147. joinSucceed: true
  148. })
  149. });
  150. RtcEngine.on('audioVolumeIndication', (data) => {
  151. console.log('[RtcEngine] onAudioVolumeIndication', data);
  152. });
  153. RtcEngine.on('clientRoleChanged', (data) => {
  154. console.log("[RtcEngine] onClientRoleChanged", data);
  155. })
  156. RtcEngine.on('error', (data) => {
  157. if (data.error === 17) {
  158. RtcEngine.leaveChannel().then(_ => {
  159. RtcEngine.destroy();
  160. this.props.onCancel(data);
  161. });
  162. }
  163. })
  164. console.log("[CONFIG]", JSON.stringify(config));
  165. console.log("[CONFIG.encoderConfig", config.videoEncoderConfig);
  166. RtcEngine.init(config);
  167. }
  168. componentDidMount () {
  169. RtcEngine.getSdkVersion((version) => {
  170. console.log('[RtcEngine] getSdkVersion', version);
  171. })
  172. console.log('[joinChannel] ' + this.props.channelName);
  173. RtcEngine.joinChannel(this.props.channelName, this.props.uid);
  174. RtcEngine.enableAudioVolumeIndication(500, 3);
  175. }
  176. componentWillUnmount () {
  177. if (this.state.joinSucceed) {
  178. RtcEngine.leaveChannel();
  179. RtcEngine.removeAllListeners();
  180. RtcEngine.destroy();
  181. }
  182. }
  183. handleCancel = () => {
  184. RtcEngine.leaveChannel();
  185. RtcEngine.removeAllListeners();
  186. RtcEngine.destroy();
  187. this.props.onCancel();
  188. }
  189. switchCamera = () => {
  190. RtcEngine.switchCamera();
  191. }
  192. toggleAllRemoteAudioStreams = () => {
  193. this.setState({
  194. isMute: !this.state.isMute
  195. }, () => {
  196. RtcEngine.muteAllRemoteAudioStreams(this.state.isMute);
  197. })
  198. }
  199. toggleSpeakerPhone = () => {
  200. this.setState({
  201. isSpeak: !this.state.isSpeak
  202. }, () => {
  203. RtcEngine.setDefaultAudioRouteToSpeakerphone(this.state.isSpeak);
  204. })
  205. }
  206. toggleCameraTorch = () => {
  207. this.setState({
  208. isCameraTorch: !this.state.isCameraTorch
  209. }, () => {
  210. RtcEngine.setCameraTorchOn(this.state.isCameraTorch).then(val => {
  211. console.log("setCameraTorch", val);
  212. })
  213. })
  214. }
  215. toggleVideo = () => {
  216. this.setState({
  217. disableVideo: !this.state.videodisableVideo
  218. }, () => {
  219. this.state.disableVideo ? RtcEngine.enableVideo() : RtcEngine.disableVideo()
  220. });
  221. }
  222. toggleHideButtons = () => {
  223. this.setState({
  224. hideButton: !this.state.hideButton
  225. })
  226. }
  227. onPressVideo = (uid) => {
  228. this.setState({
  229. selectedUid: uid
  230. }, () => {
  231. this.setState({
  232. visible: true
  233. })
  234. })
  235. }
  236. buttonsView = ({hideButton, isCameraTorch, disableVideo, isMute, isSpeaker}) => {
  237. if (!hideButton) {
  238. return (
  239. <View>
  240. <OperateButton
  241. style={{alignSelf: 'center', marginBottom: -10}}
  242. onPress={this.handleCancel}
  243. imgStyle={{width: 60, height: 60}}
  244. source={BtnEndCall()}
  245. />
  246. <View style={styles.bottomView}>
  247. <OperateButton
  248. onPress={this.toggleCameraTorch}
  249. imgStyle={{width: 40, height: 40}}
  250. source={isCameraTorch ? EnablePhotoflash() : DisablePhotoflash()}
  251. />
  252. <OperateButton
  253. onPress={this.toggleVideo}
  254. source={disableVideo ? EnableCamera() : DisableCamera()}
  255. />
  256. </View>
  257. <View style={styles.bottomView}>
  258. <OperateButton
  259. onPress={this.toggleAllRemoteAudioStreams}
  260. source={isMute ? IconMuted() : BtnMute()}
  261. />
  262. <OperateButton
  263. onPress={this.switchCamera}
  264. source={BtnSwitchCamera()}
  265. />
  266. <OperateButton
  267. onPress={this.toggleSpeakerPhone}
  268. source={!isSpeaker ? IconSpeaker() : BtnSpeaker()}
  269. />
  270. </View>
  271. </View>)
  272. }
  273. }
  274. agoraPeerViews = ({visible, peerIds}) => {
  275. return (visible ?
  276. <View style={styles.videoView} /> :
  277. <View style={styles.videoView}>{
  278. peerIds.map((uid, key) => (
  279. <TouchableOpacity
  280. activeOpacity={1}
  281. onPress={() => this.onPressVideo(uid)}
  282. key={key}>
  283. <AgoraView
  284. style={styles.remoteView}
  285. zOrderMediaOverlay={true}
  286. remoteUid={uid}
  287. />
  288. </TouchableOpacity>
  289. ))
  290. }</View>)
  291. }
  292. modalView = ({visible}) => {
  293. return (
  294. <Modal
  295. visible={visible}
  296. presentationStyle={'fullScreen'}
  297. animationType={'slide'}
  298. onRequestClose={() => {}}
  299. >
  300. <TouchableOpacity
  301. activeOpacity={1}
  302. style={{flex: 1}}
  303. onPress={() => this.setState({
  304. visible: false
  305. })} >
  306. <AgoraView
  307. style={{flex: 1}}
  308. zOrderMediaOverlay={true}
  309. remoteUid={this.state.selectedUid}
  310. />
  311. </TouchableOpacity>
  312. </Modal>)
  313. }
  314. render () {
  315. if (!this.state.joinSucceed) {
  316. return (
  317. <View style={{flex: 1, backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center'}}>
  318. <Text>Creating a video conference...</Text>
  319. </View>
  320. )
  321. }
  322. return (
  323. <TouchableOpacity
  324. activeOpacity={1}
  325. onPress={this.toggleHideButtons}
  326. style={styles.container}
  327. >
  328. <AgoraView style={styles.localView} showLocalVideo={true} />
  329. <View style={styles.absView}>
  330. <Text>channelName: {this.props.channelName}, peers: {this.state.peerIds.length}</Text>
  331. {this.agoraPeerViews(this.state)}
  332. {this.buttonsView(this.state)}
  333. </View>
  334. {this.modalView(this.state)}
  335. </TouchableOpacity>
  336. )
  337. }
  338. }