暫無描述

agora.js 9.4KB

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. showVideo: boolean,
  96. }
  97. export default class AgoraComponent extends Component<Props> {
  98. state = {
  99. peerIds: [],
  100. joinSucceed: false,
  101. isSpeak: true,
  102. isMute: false,
  103. isCameraTorch: false,
  104. showVideo: true,
  105. hideButton: false,
  106. visible: false,
  107. selectedUid: undefined,
  108. };
  109. componentWillMount () {
  110. const config = {
  111. appid: APPID,
  112. channelProfile: this.props.channelProfile,
  113. videoProfile: this.props.videoProfile,
  114. clientRole: this.props.clientRole,
  115. videoEncoderConfig: {
  116. width: 360,
  117. height: 480,
  118. bitrate: 1,
  119. frameRate: FPS30,
  120. orientationMode: FixedLandscape,
  121. },
  122. clientRole: Host,
  123. audioProfile: AudioProfileDefault,
  124. audioScenario: AudioScenarioDefault
  125. };
  126. RtcEngine.on('firstRemoteVideoDecoded', (data) => {
  127. console.log('[RtcEngine] onFirstRemoteVideoDecoded', data);
  128. });
  129. RtcEngine.on('userJoined', (data) => {
  130. console.log('[RtcEngine] onUserJoined', data);
  131. const {peerIds} = this.state;
  132. if (peerIds.indexOf(data.uid) === -1) {
  133. this.setState({
  134. peerIds: [...peerIds, data.uid]
  135. })
  136. }
  137. });
  138. RtcEngine.on('userOffline', (data) => {
  139. console.log('[RtcEngine] onUserOffline', data);
  140. this.setState({
  141. peerIds: this.state.peerIds.filter(uid => uid !== data.uid)
  142. })
  143. });
  144. RtcEngine.on('joinChannelSuccess', (data) => {
  145. console.log('[RtcEngine] onJoinChannelSuccess', data);
  146. RtcEngine.startPreview();
  147. this.setState({
  148. joinSucceed: true
  149. })
  150. });
  151. RtcEngine.on('audioVolumeIndication', (data) => {
  152. console.log('[RtcEngine] onAudioVolumeIndication', data);
  153. });
  154. RtcEngine.on('clientRoleChanged', (data) => {
  155. console.log("[RtcEngine] onClientRoleChanged", data);
  156. })
  157. RtcEngine.on('error', (data) => {
  158. if (data.error === 17) {
  159. RtcEngine.leaveChannel().then(_ => {
  160. RtcEngine.destroy();
  161. this.props.onCancel(data);
  162. });
  163. }
  164. })
  165. console.log("[CONFIG]", JSON.stringify(config));
  166. console.log("[CONFIG.encoderConfig", config.videoEncoderConfig);
  167. RtcEngine.init(config);
  168. }
  169. componentDidMount () {
  170. RtcEngine.getSdkVersion((version) => {
  171. console.log('[RtcEngine] getSdkVersion', version);
  172. })
  173. console.log('[joinChannel] ' + this.props.channelName);
  174. RtcEngine.joinChannel(this.props.channelName, this.props.uid);
  175. RtcEngine.enableAudioVolumeIndication(500, 3);
  176. }
  177. componentWillUnmount () {
  178. if (this.state.joinSucceed) {
  179. RtcEngine.leaveChannel();
  180. RtcEngine.removeAllListeners();
  181. RtcEngine.destroy();
  182. }
  183. }
  184. handleCancel = () => {
  185. RtcEngine.leaveChannel();
  186. RtcEngine.removeAllListeners();
  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. const showVideo = !this.state.showVideo
  218. this.setState({
  219. showVideo
  220. })
  221. if (showVideo) {
  222. RtcEngine.enableVideo()
  223. RtcEngine.startPreview()
  224. } else {
  225. RtcEngine.disableVideo()
  226. RtcEngine.stopPreview()
  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, showVideo, 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={showVideo ? 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. { this.state.showVideo ? <AgoraView style={styles.localView} showLocalVideo={this.state.showVideo} /> : null}
  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. }