Brak opisu

agora.js 9.5KB

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