快速入门视频互动

本文主要介绍如何将 anyRTC uni-app 音视频 Demo 集成到你的项目中以及相关注意事项。

开发环境要求

下载最新版本 HBuilderX
下载示例 Demo 的压缩包。
一个有效的开发者账号。

快速集成

本小节介绍如何获取 AppID 以及如何快速将 SDK 集成到项目中。

获取 AppID

参考以下步骤获取一个 AppID。若已经拥有 AppID，请跳过当前步骤，直接查看快速集成。

1. 创建项目

首先我们需要在开发者控制台创建一个「项目」。
2. 获取 APP ID

获取项目的「APP ID」。

导入 SDK

请参考一分钟跑通 Demo

操作流程

本节内容主要介绍如何实现 uni-app 音视频通话，提供相关示例代码。

初始化

视频模块

//声明本地视频模块
<AR-CanvasView :ref="local" style="flex: 1;"></AR-CanvasView>

//声明远端视频模块
<AR-CanvasView :ref="remote" style="flex: 1;"></AR-CanvasView>

AR-CanvasView：是自定义组件的名称，并与 component 类型插件名称一致。

component 类型插件获取实例对象为 this.$refs.local

实例

在创建实例前，请确保你已完成环境准备，安装包获取等步骤。

创建实例需要填入准备好的 App ID, 只有 App ID 相同的应用才能互通。

//callback 接收
callbackFn() {
  RtcModule.setCallBack((res) => {
    switch (res.engineEvent) {
      case "onWarning": //警告回调
        break;
      case "onError": //错误回调
        break;
      case "onJoinChannelSuccess": //用户加入成功
        break;
      case "onLeaveChannel": //离开频道回调
        break;
      case "onUserJoined": //远端用户加入当前频道回调。
        break;
      case "onUserOffline": //远端用户离开当前频道回调。
        break;
      case "onFirstLocalAudioFrame": //已发送本地音频首帧的回调。（页面上添加音频）
        break;
      case "onFirstLocalVideoFrame": //已显示本地视频首帧的回调。（页面添加本地视频）
        // this.promptFn("error", "已显示本地视频首帧的回调");
        break;
      case "onFirstRemoteVideoDecoded": //已完成远端视频首帧解码回调。（页面添加远端视频）
        break;
    }
  })
},

// 初始化
init() {
  if (uni.getSystemInfoSync().platform === 'android') {
    //查看相机权限
    await this.requestAndroidPermission("android.permission.CAMERA", 'android');
    //查看录音权限
    await this.requestAndroidPermission("android.permission.RECORD_AUDIO", 'android');
  }
  await RtcModule.create({
    //anyRTC 为 App 开发者签发的 App ID。
    "appId": "YOUR APP ID"
  }, (res) => {
  
  });
}

在 YOUR APP ID 填入你申请的 APP ID 才能通信。

开启视频模块

该方法用于打开视频模式。可以在加入频道前或者通话中调用，在加入频道前调用，则自动开启视频模式，在通话中调用则由音频模式切换为视频模式。

RtcModule.enableVideo((res) => {

});

初始化本地视图

该方法初始化本地视图并设置本地用户视频显示信息，只影响本地用户看到的视频画面，不影响本地发布视频。调用该方法绑定本地视频流的显示视窗（AR-CanvasView），并设置本地用户视图的渲染模式和镜像模式。

this.$refs.local.setupLocalVideo({
    "renderMode": 1,
    "channelId": this.channel,
    "uid": this.uid,
    "mirrorMode": 0
}, (res) => {

});
// 本地预览
RtcModule.startPreview((res) => {});

类型	参数	描述
String	uid	用户 ID。
String	channelId	能标识频道的频道名，长度在 64 字节以内的字符。以下为支持的字符集范围（共 89 个字符）： 26 个小写英文字母 a-z； 26 个大写英语字母 A-Z； 10 个数字 0-9；空格； "!"、"#"、"$"、"%"、"&"、"("、")"、"+"、"-"、":"、";"、"<"、"="、"."、">"、"?"、"@"、"["、"]"、"^"、" {"、"}"、"
int	renderMode	视频渲染模式： `1`: 优先保证视窗被填满。视频尺寸等比缩放，直至整个视窗被视频填满。如果视频长宽与显示窗口不同，多出的视频将被截掉。 `2`: 优先保证视频内容全部显示。视频尺寸等比缩放，直至视频窗口的一边与视窗边框对齐。如果视频长宽与显示窗口不同，视窗上未被填满的区域将被涂黑。 `3`: 该模式已废弃，不推荐使用。 `4`: 视频尺寸进行缩放和拉伸以充满显示视窗。
int	mirrorMode	视图镜像模式： `0`：（默认）由 SDK 决定镜像模式。 `1`：开启镜像模式。 `2`：关闭镜像模式。

初始化远端视图

该方法绑定远端用户和显示视图（AR-CanvasView），并设置远端用户视图在本地显示时的渲染模式和镜像模式，只影响本地用户看到的视频画面。

this.$ref.remote.setupRemoteVideo({
    "renderMode": 1,
    "channelId": this.channelId,
    "uid": this.uid,
    "mirrorMode": 0
}, (res) => {})
                                        
// 远端预览
RtcModule.startPreview((res) => {});

类型	参数	描述
String	uid	用户 ID。
String	channelId	能标识频道的频道名，长度在 64 字节以内的字符。以下为支持的字符集范围（共 89 个字符）： 26 个小写英文字母 a-z； 26 个大写英语字母 A-Z； 10 个数字 0-9；空格； "!"、"#"、"$"、"%"、"&"、"("、")"、"+"、"-"、":"、";"、"<"、"="、"."、">"、"?"、"@"、"["、"]"、"^"、" {"、"}"、"
int	renderMode	视频渲染模式： `1`: 优先保证视窗被填满。视频尺寸等比缩放，直至整个视窗被视频填满。如果视频长宽与显示窗口不同，多出的视频将被截掉。 `2`: 优先保证视频内容全部显示。视频尺寸等比缩放，直至视频窗口的一边与视窗边框对齐。如果视频长宽与显示窗口不同，视窗上未被填满的区域将被涂黑。 `3`: 该模式已废弃，不推荐使用。 `4`: 视频尺寸进行缩放和拉伸以充满显示视窗。
int	mirrorMode	视图镜像模式： `0`：（默认）由 SDK 决定镜像模式。 `1`：开启镜像模式。 `2`：关闭镜像模式。

加入频道

完成初始化后，你就可以调用 joinChannel 方法加入频道。你需要在该方法中传入如下参数：

token：传入能标识用户角色和权限的 Token。可设为如下一个值：
- 临时 Token。临时 Token 服务有效期为 15小时、24 小时、3天、15天不等。你可以在控制台里生成一个临时 Token。
- 在你的服务器端生成的 Token。在安全要求高的场景下，我们推荐你使用此种方式生成的 Token，详见生成 Token。
- 若项目已启用权限密钥，请使用 Token,请勿将 token 设为 ""。
channelName：传入能标识频道的频道 ID。App ID 相同、频道 ID 相同的用户会进入同一个频道。
uid: 本地用户的 ID。数据类型为整型，且频道内每个用户的 uid 必须是唯一的。若将 uid 设为 0，则 SDK 会自动分配一个 uid，并在 onJoinChannelSuccess 回调中报告。

用户成功加入频道后，会默认订阅频道内其他所有用户的音频流，因此产生用量并影响计费。如果想取消订阅，可以通过调用相应的 mute 方法实现。

更多的参数设置注意事项请参考 joinChannel 接口中的参数描述。

//加入频道 跳转到视频
join() {
  //加入房间
  await RtcModule.joinChannel({
    "token": "",
    "channelId": this.channel,
    "uid": this.uid
  }, (res) => {})
},

离开频道

根据场景需要，如结束通话、关闭 App 或 App 切换至后台时，调用 leaveChannel 离开当前通话频道。

// 挂断 离开
phoneFn() {
  //离开频道
  RtcModule.leaveChannel((res) => {})
},

开发注意事项

创建实例之前，需要先进行 setCallBack 初始化回调，然后才进行创建实例 create 方法。