跳到主要内容

实现音视频通话

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

前置条件​

  • 注册开发者账号。注册成功后，控制台会默认自动创建您的首个应用，默认生成开发环境下的 App Key，使用国内数据中心。

  • 获取开发环境的应用 App Key。如不使用默认应用，您可以创建应用，并获取对应环境 App Key 和 App Secret。

    注意

    每个应用具有两个不同的 App Key，分别对应开发环境与生产环境，两个环境之间数据隔离。在您的应用正式上线前，可切换到使用生产环境的 App Key，以便上线前进行测试和最终发布。

  • 完成开通音视频服务。请开通音视频通话服务。

  • 完成导入 CallLib SDK。

平台兼容性​

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

Demo 项目​

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

步骤 1：配置权限​

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

JSON
"<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 文档引擎配置。

JavaScript
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。

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

CallLib.init({});

步骤 3：监听通话事件​

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

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

    JavaScript
    CallLib.onCallReceived( (res)=> {
        console.log("Engine:OnCallReceived=>"+"监听通话呼入, 目标id=>", res.data.targetId);
    });

  2. 已建立通话，通过回调 CallLib.onCallConnected 监听。如果是一对一通话，可在该方法触发后展示远端画面。

    JavaScript
    CallLib.onCallConnected((res)=>{
        console.log("Engine:OnCallConnected=>"+"通话接通时，通过回调 onCallConnected 通知当前 call 的详细信息", res)
    });

  3. 对端用户加入了通话，通过回调 CallLib.onRemoteUserJoined 监听。如果是多人通话，可在该方法触发后展示远端用户的画面。

    JavaScript
    CallLib.onRemoteUserJoined((res)=>{
        console.log("Engine:OnRemoteUserJoined=>"+"主叫端拨出电话，被叫端收到请求后，加入通话，被叫端Id为=>", res.data.userId);
    })

  4. 通话中的某一个参与者，邀请好友加入通话，通过回调 CallLib.OnRemoteUserInvited 监听。

    JavaScript
    CallLib.onRemoteUserInvited((res)=>{
        console.log("Engine:OnRemoteUserInvited=>"+"通话中的某一个参与者，邀请好友加入通话，发出邀请请求后,远端Id为=>", res.data.userId)
    })

  5. 通话结束，通过回调 CallLib.OnCallDisconnected 监听。reason 表示挂断原因。具体请参见挂断通话原因。

    JavaScript
    CallLib.onCallDisconnected((res)=>{
        console.log("Engine:OnCallDisconnected=>"+"挂断成功, 挂断原因=>", res.data.reason)
    })

  6. 通话中的远端参与者离开，通过回调 CallLib.OnRemoteUserLeft 监听。reason 表示挂断原因。具体请参见挂断通话原因。

    JavaScript
    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。详见连接状态监听。

    typescript
    yourEngine.setOnConnectionStatusChangedListener((res) => {
        //...
    });

  2. 使用上方获取的 Token，模拟 userId 为 1 的用户连接到融云服务器。调用结果会直接通过 connect 方法中传入的 RCIMIWConnectCallback 返回。

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

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

步骤 6：发起呼叫​

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

发起单人通话​

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

发起多人通话​

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

步骤 7: 展示通话视图​

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

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

    JavaScript
    let currentCallSession = CallLib.getCurrentCallSession()
    let users = currentCallSession.users

  2. 直接在 .nvue 中使用 <RongCloud-Call-RCUniCallView ref="localVideoView"></RongCloud-Call-RCUniCallView> 视频组件，该组件不需要额外引入。

    html
    <RongCloud-Call-RCUniCallView ref="localVideoView" ></RongCloud-Call-RCUniCallView>

  3. 通过 CallLib.setVideoView 设置视频预览窗口。在调用 CallLib.setVideoView 前一定要确保 UI 界面已经渲染完成，所以要延迟调用。

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

步骤 8：呼叫接听​

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

JavaScript
CallLib.accept()

步骤 9：呼叫挂断​

调用 CallLib.hangup 方法挂断通话

JavaScript
CallLib.hangup()

步骤 10：离线推送通知​

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

最后于 更新