更新记录

2.4.2（2024-06-20）

修复了偶现铃声从听筒出来的问题

2.4.1（2024-06-17）

支持通话状态通知

2.4.0（2024-06-05）

• 支持配置隐藏和开启“音视频通话转换”功能：initConfig的入参里面添加enableAudio2Video、enableVideo2Audio功能
• toCallPage添加回调，支持呼叫成功或者失败的回调

平台兼容性

原生插件通用使用流程：

1. 购买插件，选择该插件绑定的项目。
2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

本文档介绍基于 Vue 框架（支持 Vue 2&Vue 3）快速集成网易云信 RTC 音视频通话点对点呼叫组件。

插件概述

网易云信音视频呼叫（呼叫组件 NERtcCallKit）是网易云信推出的含 UI 组件，您只需要几行代码，就可以快速实现音视频呼叫，在 App 中添加包括呼叫、接通、拒接、以及通话中音频和视频的开关控制功能，并包含呼叫的 UI 界面。

呼叫组件基于云信信令、音视频通话 2.0 和 IM 即时通讯产品封装的融合性场景组件，简化了呼叫流程，将呼叫功能以 UI 组件化的形式提供给客户，提高接入效率、降低使用成本。

呼叫组件（NERtcCallKit）支持的功能如下表所示。

限时优惠活动

如果您在 Dcloud 平台下载了该组件，您可登录云信控制台（Dcloud专属链接）进行开通与管理。

此外通过以上 Dcloud 平台的专属链接成功注册账号并开通服务的用户，云信将提供特别的优惠价，可在开通账号后联系云信销售或技术支持。

Demo 体验

平台	二维码
Android
iOS

Demo 效果图

技术支持

网易云信提供多种服务，包括客服、技术支持、热线服务、全流程数据监控等，建议扫码添加我们的技术支持，协助接入、测试以及定制需求。		在线咨询	电话咨询
	点击在线咨询	4009-000-123

准备工作

1. 申请 AppKey

用户在使用本插件之前需要获取AppKey，AppKey 申请的具体流程请参见 创建应用并获取AppKey。

2. 获取账号

本插件使用中需要 account 和 token，具体请参见 注册云信IM账号。

3. 开通服务

使用音视频呼叫（呼叫组件）之前，需要开通部分能力，开通的具体流程请参见 开通服务。

4.开发环境

• HBuilderX
• sass（sass-loader 版本 <= 10.1.1）
• node（16.0.0 <= node 版本 <= 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0）
• npm（版本请与 node 版本匹配）

快速接入

说明

本项目为App原生语言插件，请参考原生语言插件的集成方式进行集成。

步骤一：在 vue 页面中引入原生插件

使用 uni.requireNativePlugin 的 API 在 vue 页面中引入原生插件，参数为插件的 ID。

var demo = uni.requireNativePlugin("netease-CallKit")

步骤二：初始化组件

接口

initConfig({params}, callback(ret))

params

appKey:

• 类型：String
• 描述：云信IM应用APPKEY，获取方式请参见 创建应用并获取AppKey。

account:

• 类型：String
• 描述：账号ID，获取方法请参见 注册云信IM账号。

token:

• 类型：String
• 描述：账号Token，获取方法请参见 注册云信IM账号。

apnsCername:

• 类型：String
• 描述：（可选值）云信 Apns 推送证书名

pkCername:

• 类型：String
• 描述：（可选值）云信 PushKit 推送证书名

language

• 类型：String
• 描述：（可选值）语言，zh为中文，en为英文，不填默认跟随系统

enableFloatingWindow

• 类型：布尔类型
• 描述：（可选值）是否开启悬浮窗，true开启，false不开启

enableAutoFloatingWindowWhenHome

• 类型：布尔类型
• 描述：（可选值）是否开启回到桌面自动开启悬浮窗，true开启，false不开启

enableForegroundService

• 类型：布尔类型
• 描述：（可选值）是否开启前台服务，true开启，false不开启

enableAudio2Video

• 类型：布尔类型
• 描述：（可选值）是否显示语音转视频的按钮，true开启，false不开启，默认显示

enableVideo2Audio

• 类型：布尔类型
• 描述：（可选值）是否显示视频转语音的按钮，true开启，false不开启，默认显示

callback(ret)

ret：

• 类型：JSON 对象
• 内部字段：

{
    code:200,                   // Int类型；失败初始化返回 code（登录成功返回 200）
    message:''                     // String 类型；失败初始化接口信息
}

示例代码

demo.initConfig({
    appKey: "appkey",
    account: "",
    token: "",
    apnsCername: "",
    pkCername: "",
    language: "",
    enableFloatingWindow: true,
    enableAutoFloatingWindowWhenHome: true,
    enableForegroundService: true,
}, (ret) => {
    if (ret.code != 200) {
        var msg = 'init失败\n错误码：' + ret.code + '\n错误信息：' + ret.message;
        uni.showToast({
            title: msg,
            icon: "none"
        })
    } else {
        uni.showToast({
            title: 'init成功 ' + ret.code,
            icon: "none"
        })
    }
})

可用性

• iOS系统：可提供的 11 及更高版本
• Android系统：可提供的 21 及更高版本

步骤三：登录

接口

login({params}, callback(ret))

params

appKey:

• 类型：String
• 描述：云信应用的 AppKey

account:

• 类型：String
• 描述：账号ID，获取方法请参见 注册云信IM账号。

token:

• 类型：String
• 描述：账号token，获取方法请参见 注册云信IM账号。

callback(ret)

ret：

• 类型：JSON 对象
• 内部字段：

{
    code:200,                   // Int类型；失败登录返回 code（登录成功返回 200）
    message:'',                     // String 类型；失败登录接口信息
    loginInfo:{                 // 登录信息
        account:"",       // String 类型；账号ID
        token:""          // String 类型；账号token
    }
}

示例代码

demo.login({
    account: '',
    token: ''
}, function(ret) {
    if (ret.code != 200) {
        var msg = '登录失败\n错误码：' + ret.code + '\n错误信息：' + ret.message;
        uni.showToast({
          title: msg,
          icon: 'none',
        })      
    } else {
        uni.showToast({
          title: '登录成功',
          icon: 'none',
        })
    }
})

可用性

• iOS系统：可提供的 11 及更高版本
• Android系统：可提供的 21 及更高版本

步骤四：拨打通话

接口

toCallPage({params}, callback(ret))

params

calledAccount:

• 类型：String
• 描述：被叫账号，即 account 账号

type:

• 类型：Int
• 描述：呼叫类型(1: 音频呼叫, 2: 视频呼叫)

calledShowName:

• 类型：String
• 描述：被叫展示名称，即呼叫的时候展示的名称

callback(ret)

ret：

• 类型：JSON 对象
• 内部字段：

{
    code:200,                   // Int类型；错误码（呼叫成功返回 200）
    message:''                  // String 类型；错误信息（呼叫接口信息）
}

示例代码

demo.toCallPage({
    calledAccount:'',
    type:2
}, function(ret) {
    if (ret.code != 200) {
        var msg = '呼叫失败\n错误码：' + ret.code + '\n错误信息：' + ret.message;
        uni.showToast({
          title: msg,
          icon: 'none',
        })      
    } else {
        uni.showToast({
          title: '呼叫成功',
          icon: 'none',
        })
    }
})

可用性

• iOS系统：可提供的 11 及更高版本
• Android系统：可提供的 21 及更高版本

步骤五：更多特性

一、登出

demo.logout({}, (ret) => {
    if (ret.code != 200) {
        uni.showToast({
          title: '登出失败 ' + ret.code,
          icon: 'none',
        })
    } else {
        uni.showToast({
          title: '登出成功 ',
          icon: 'none',
        })
    }
})

二、通话状态监听

如果您的业务需要 监听通话的状态，例如：异常、通话开始、结束等，可以监听以下事件：

//接收到邀请
// e.callType 呼叫类型，1: 语音呼叫；2: 视频呼叫
// e.callerAccount 呼叫账号
callKitEvent.addEventListener('onReceiveInvited', function(e) {
      console.log('onReceiveInvited' + JSON.stringify(e));
});

//通话建立
// e.callType 呼叫类型，1: 语音呼叫；2: 视频呼叫
// e.callId 通话Id
// e.callerAccount 呼叫账号
// e.calledAccount 被呼账号
// e.currentAccount 当前账号
callKitEvent.addEventListener('onCallConnected', function(e) {
  console.log('onCallConnected' + JSON.stringify(e));
});

//通话类型变更
// e.callType 呼叫类型，1: 语音呼叫；2: 视频呼叫
callKitEvent.addEventListener('onCallTypeChange', function(e) {
  console.log('onCallTypeChange' + JSON.stringify(e));
});

//通话结束
//  e.code 错误码 
// (code:12 手动取消；code:2 超时取消；code:14 对方拒接通话；code:15 接听并自己结束通话；code:16 接听并对方结束通话)
//  e.message 错误信息
callKitEvent.addEventListener('onCallEnd', function(e) {
  console.log('onCallEnd' + JSON.stringify(e));
});

// 远端用户是否开启视频流采集
//  e.account 账号
//  e.mute 是否静音
callKitEvent.addEventListener('onVideoMuted', function(e) {
  console.log('onVideoMuted' + JSON.stringify(e));
});

// 远端用户是否开启音频流采集
//  e.account 账号
//  e.mute 是否静音
callKitEvent.addEventListener('onAudioMuted', function(e) {
  console.log('onAudioMuted' + JSON.stringify(e));
});

常见问题

运行iOS的时候，需要在项目根目录的manifest.json中的“App权限配置”中配置麦克风和摄像头权限

同时集成呼叫组件和推送插件后无法正常呼叫

需要在控制台开通IM的多端登录