跳到主要内容

实现音视频通话

CallLib 是在 RTCLib 基础上,额外封装了一套音视频呼叫功能 SDK,包含了单人、多人音视频呼叫的各种场景和功能。

前置条件

平台兼容性

平台说明
Android系统版本 4.4 及以上
iOS系统版本 9.0 及以上

Demo 项目

融云提供了 uni-app 通话 Demo 项目。详见运行 Demo 项目

步骤 1:配置权限

在项目 manifest.json 源码视图中 Android 打包配置 permission 节点下新增 CallLib 所需的设备权限。如果已经有以下的权限,则可以不用再添加。

"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",

步骤 2:使用 App Key 初始化

音视频用户之间的信令传输依赖于融云的即时通信(IM)服务,所以要先初始化 IM SDK(RongCloud-IMWrapper-V2)。IM SDK 的初始化方法接受一个 App Key 参数,和一个可选的 IM 引擎配置(RCIMIWEngineOptions)。IM 引擎相关配置详见 IMLib 文档引擎配置

import RCIMIWEngine from "@/uni_modules/RongCloud-IMWrapper-V2/js_sdk/RCIMEngine"

let appKey = 'xxx';
let options = {};
let yourEngine = null;
RCIMIWEngine.create(appKey,options).then((res) => {
//本地代码保存引擎
yourEngine = res
});

IM SDK 初始化完成之后,初始化 CallLib SDK。

import * as CallLib from "@/uni_modules/RongCloud-CallWrapper/lib/index"

CallLib.init({});

步骤 3:监听通话事件

CallLib 提供以下呼叫相关的事件。

  1. 监听通话呼入,通过回调 CallLib.onCallReceived 监听。

    CallLib.onCallReceived( (res)=> {
    console.log("Engine:OnCallReceived=>"+"监听通话呼入, 目标id=>", res.data.targetId);
    });
  2. 已建立通话,通过回调 CallLib.onCallConnected 监听。如果是一对一通话,可在该方法触发后展示远端画面。

    CallLib.onCallConnected((res)=>{
    console.log("Engine:OnCallConnected=>"+"通话接通时,通过回调 onCallConnected 通知当前 call 的详细信息", res)
    });
  3. 对端用户加入了通话,通过回调 CallLib.onRemoteUserJoined 监听。如果是多人通话,可在该方法触发后展示远端用户的画面。

    CallLib.onRemoteUserJoined((res)=>{
    console.log("Engine:OnRemoteUserJoined=>"+"主叫端拨出电话,被叫端收到请求后,加入通话,被叫端Id为=>", res.data.userId);
    })
  4. 通话中的某一个参与者,邀请好友加入通话,通过回调 CallLib.OnRemoteUserInvited 监听。

    CallLib.onRemoteUserInvited((res)=>{
    console.log("Engine:OnRemoteUserInvited=>"+"通话中的某一个参与者,邀请好友加入通话,发出邀请请求后,远端Id为=>", res.data.userId)
    })
  5. 通话结束,通过回调 CallLib.OnCallDisconnected 监听。reason 表示挂断原因。具体请参见挂断通话原因

    CallLib.onCallDisconnected((res)=>{
    console.log("Engine:OnCallDisconnected=>"+"挂断成功, 挂断原因=>", res.data.reason)
    })
  6. 通话中的远端参与者离开,通过回调 CallLib.OnRemoteUserLeft 监听。reason 表示挂断原因。具体请参见挂断通话原因

    CallLib.onRemoteUserLeft((res)=>{
    console.log("Engine:OnRemoteUserLeft=>"+"远端用户挂断,远端Id为=>", res.data.reason)
    })

步骤 4:获取用户 Token

用户 Token 是与用户 ID 对应的身份验证令牌,是应用程序的用户在融云的唯一身份标识。应用客户端在使用融云即时通讯功能前必须与融云建立 IM 连接,连接时必须传入 Token。

在实际业务运行过程中,应用客户端需要通过应用的服务端调用 IM Server API 申请取得 Token。详见 Server API 文档 注册用户

在本教程中,为了快速体验和测试 SDK,您可以控制台「北极星」开发者工具箱 IM Server API 调试 页面调用接口获取 Token 用于测试。

步骤 5:建立 IM 连接

  1. 使用 setOnConnectionStatusChangedListener 监听 IM 连接状态的变化,连接状态发生变化时返回 RCIMIWConnectionStatus。详见连接状态监听

    yourEngine.setOnConnectionStatusChangedListener((res) => {
    //...
    });
  2. 使用上方获取的 Token,模拟 userId 为 1 的用户连接到融云服务器。调用结果会直接通过 connect 方法中传入的 RCIMIWConnectCallback 返回。

    let callback = {
    onDatabaseOpened:(res) => {
    //...
    },
    onConnected:(res) => {
    //...
    }};
    let code = await yourEngine.connect(token, timeout, callback);

SDK 已实现自动重连机制,请参见 IMLib 文档 连接

步骤 6:发起呼叫

主动呼叫分为发起单人通话和发起多人通话,可根据实际需求调用。多人通话的场景必须在一个群组内。

发起单人通话

CallLib.startSingleCall(targetId, type, extra);
参数类型必填说明
targetIdString对方的userId
typeNumber呼叫类型(0:音频 1:音视频)
extraString附加信息默认传''

发起多人通话

CallLib.startGroupCall(groupId,userIds,observerUserIds,type,extra);
参数类型必填说明
groupIdString群组 Id
userIdsArray被呼叫的群内成员 Id
observerUserIdsArray观察者ID默认为空数组
typeNumber呼叫类型(0:音频 1:音视频)
extraString附加信息默认传''

步骤 7: 展示通话视图

您需要使用 SDK 提供的视频组件展示本地预览视图和远端用户的视频视图。

  1. 发起单人或多人通话后,可使用 CallLib.getCurrentCallSession 获取当前通话中的成员信息。

    let currentCallSession = CallLib.getCurrentCallSession()
    let users = currentCallSession.users
  2. 直接在 .nvue 中使用 <RongCloud-Call-RCUniCallView ref="localVideoView"></RongCloud-Call-RCUniCallView> 视频组件,该组件不需要额外引入。

    <RongCloud-Call-RCUniCallView ref="localVideoView" ></RongCloud-Call-RCUniCallView>
  3. 通过 CallLib.setVideoView 设置视频预览窗口。在调用 CallLib.setVideoView 前一定要确保 UI 界面已经渲染完成,所以要延迟调用。

    setTimeout(()=>{
    CallLib.setVideoView(userId, this.$refs.localVideoView.ref, type,isZOrderOnTop);
    },200);
    参数类型必填说明
    userIdString用户id
    refString对视频容器的引用
    typeNumber视频显示模式 0 铺满 1 自适应
    isZOrderOnTopBoolean是否置顶 (仅Android 需要设置)

步骤 8:呼叫接听

调用 CallLib.accept 方法接听通话。

CallLib.accept()

步骤 9:呼叫挂断

调用 CallLib.hangup 方法挂断通话

CallLib.hangup()

步骤 10:离线推送通知

如果需要在 App 已经被系统回收的情况下也收到呼叫推送通知,则必须集成远程推送。请参见 IM 客户端文档 推送概述