如何在 React Native 中实现视频通话(下)

阅读数:16 2019 年 11 月 30 日 22:07

如何在 React Native 中实现视频通话(下)

该 return() 方法为 Sample App 显示视图。AgoraRendererView 是用来显示音频 / 视频的 UI 元素。示例应用程序创建了两个 AgoraRendererView 元素,即 _localView 和 _remoteView。

复制代码
1return
2 <View style = {styles.container}>
3 <AgoraRendererView
4 ref = {component => this._localView = component}
5 style = {{width:360,height:240}}
6 />
7
8 <AgoraRendererView
9 ref = {component => this ._remoteView = component}
10 style = {{width:360,height:240}}
11 />
12
13 ...
14
15 </ View>
16);

然后在 return() 添加 UI 按钮元素让用户能够加入频道、离开频道、切换摄像头、切换音频线路。详细代码请见「阅读原文」。

加入频道

使用 _joinChannel() 方法将用户加入特定频道。

复制代码
1_joinChannel(){
2 ...
3}

在 _joinChannel() 方法中,以下方法执行其他任务:

AgoraRtcEngine.setLocalVideoView() 设置本地视频 view。

Sample App 将本地视频 view 应用于在 render() 中创建的 _localViewUI 元素。

复制代码
1AgoraRtcEngine.setLocalVideoViewthis._localViewAgoraRtcEngine.AgoraVideoRenderModeFit);

AgoraRtcEngine.setVideoProfile() 将视频配置文件设置为默认的 Agora 配置文件,且不更改 orientation 属性。

复制代码
1AgoraRtcEngine.setVideoProfile(AgoraRtcEngine.AgoraVideoProfileDEFAULT,false);

AgoraRtcEngine.startPreview() 启动 Agora SDK 预览,并让 AgoraRtcEngine.joinChannel() 加入频道。

复制代码
1AgoraRtcEngine.startPreview();
2AgoraRtcEngine.joinChannel(null,“rnchannel01”,“React Native for Agora RTC SDK”,0);

上述代码中 joinChannel 的参数设置是这样的:

  • token 为 null。加入通道后,Agora Engine 将设置 token 为新值。
  • 频道名为 rnchannel01
  • info 记录了关于频道的信息“React Native for Agora RTC SDK”
  • uid 为 0,这是通用用户 ID 值

离开频道

Sample App 应用了 _leaveChannel(),会调用 AgoraRtcEngine.stopPreview() 和 AgoraRtcEngine.leaveChannel()。需要注意的是,_leaveChannel() 不会自动停止预览, 因此需要先调用 stopPreview()。

复制代码
1_leaveChannel(){
2 AgoraRtcEngine.stopPreview();
3 AgoraRtcEngine.leaveChannel();
4}

切换相机

Sample App 中,我们通过 AgoraRtcEngine.switchCamera() 切换摄像头。

复制代码
1switchCamera(){
2 AgoraRtcEngine.switchCamera();
3}

切换 Audio Route

调用 AgoraRtcEngine.setEnableSpeakerphone() 打开或关闭扬声器。这里需要注意由于 isSpeakerPhone 用于全局检测用户是否处于扬声器模式,所以在 setEnableSpeakerphone 后必须更改。

复制代码
1_switchAudio(){
2 AgoraRtcEngine.setEnableSpeakerphone(isSpeakerPhone);
3 isSpeakerPhone =!isSpeakerPhone;
4}

添加事件监听器

通过 agoraKitEmitter.addListener() 添加 remoteDidJoineChannelNoti 事件侦听器来检测远程用户加入频道的动作。

事件监听器的名称是 RemoteDidJoinedChannel。触发时,它会执行以下操作:

  • 将远程视频视图添加到 _remoteView
  • 为用户应用远程视频视图,notify.uid
  • 保证视频内容全部显示
复制代码
1remoteDidJoineChannelNoti = agoraKitEmitter.addListener(
2 'RemoteDidJoinedChannel',
3 (notify)=> {
4 AgoraRtcEngine.setRemoteVideoView(this._remoteView,notify.uid,AgoraRtcEngine.AgoraVideoRenderModeFit);
5 }
6 );

在 React Native 视图移除后,调用 remoteDidJoineChannelNoti.remove() 来移除事件侦听器。

本文转载自公众号声网 Agora(ID:shengwang-agora)。

原文链接:

https://mp.weixin.qq.com/s/uuU0ujJm71yZZW2Vg5Zniw

评论

发布