如何在 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    /> 1213    ... 1415    </ View> 16）;

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

加入频道

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

1_joinChannel（）{ 2    ... 3}

在_joinChannel()方法中，以下方法执行其他任务：

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

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

1AgoraRtcEngine.setLocalVideoView（this._localView，AgoraRtcEngine.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