更新记录

6.3.4(2023-09-13)

  1. 修复Android的callingModule监听器无效bug(内测);

6.3.3(2023-09-11)

  1. 修复部分iOS机型销毁时会闪退的bug;
  2. 修复iOS获取登录状态不一致bug(内测);

6.3.1(2023-09-07)

  1. 修复callingModule的bug(内测);
查看更多

平台兼容性

Android Android CPU类型 iOS
适用版本区间:4.4 - 12.0 armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 适用版本区间:9 - 16

原生插件通用使用流程:

  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原生插件配置”->”云端插件“列表中删除该插件重新选择


腾讯云视频语音通话

该模块实现腾讯云视频语音通话, 支持视频通话和语音通话, 提供类似微信的视频通话和语音通话功能,适用多人、双人视频语音模式、网络会议、在线医疗、视频客服、金融双录等场景。

接口模式(纯API)

扫描下方二维码,安装示例代码,快速体验插件功能:

Android iOS 联系我们
Android示例代码 iOS示例代码 技术支持

扫码添加技术支持(微信号: ruanyunkeji006),开通测试账号。

UI模式

扫描下方二维码,安装示例代码,快速体验插件功能:

Android iOS 联系我们
Android示例代码 iOS示例代码 技术支持

扫码添加技术支持(微信号: ruanyunkeji006),开通测试账号。

定制UI

扫码添加我们技术支持(微信号: ruanyunkeji006),联系定制UI

技术支持

建议扫码添加我们技术支持,协助接入和测试。

联系我们 微信号 更多功能
联系我们
ruanyunkeji006

全局监听
用户信息托管
视频层叠覆盖问题

API 接口文档

使用教程

快速开始

步骤1: 集成插件

  • 加载插件

插件名称: RY-TencentTrtcCalling

在使用前,你需要先加载插件。

<RY-TencentTrtcCalling class="trtc" ref="calling" v-bind:style = "{ width: playerWidth, height: playerHeight }" @onClick="onClick"></RY-TencentTrtcCalling>

说明:

可以通过修改width和height参数值的大小,来修改视频容器的大小。

  • 腾讯云配置

注册或登录腾讯云账号,实名认证后,点击实时音视频,点击"创建应用"创建实时音视频应用。

步骤2: 开始使用插件

使用RY-TencentTrtcCalling,需要调用 init 初始化模块,才可以调用其他的接口功能。

this.$refs.calling.init({}, ret => {
    console.log(ret);
});

步骤3: 设置监听

调用 setCallingListener 可以设置监听,视频通话会返回相关的事件回调。

this.$refs.calling.setCallingListener({}, ret => {
    console.log(ret);
});

步骤4: 登录

调用 login 完成组件的登录,其中几个关键参数的填写请参考下表

参数名 作用
sdkAppId 您可以在 实时音视频控制台 中查看 sdkAppId
user 当前用户的Id,字符串类型,只允许包含英文字母(a-z 和 A-Z)、数字(0-9)、连词符-和下划线 _
userSig 如何计算 UserSig
this.$refs.calling.login({
    sdkAppId: sdkAppId,
    userId: userId,
    userSig: userSig
}, ret => {
    console.log(ret);
});

步骤5: 实现1V1通话

  1. 发起方: 视频通话需调用 openCamera 函数打开自己的本地摄像头,同时调用 call 发起视频或语音通话的请求。
  2. 接收方: 当接收方处于已登录状态时,监听器会收到 setCallingListener#onInvited 的事件回调,回调中的callType为发起方的填写的通话类型,您可以通过此参数启动相应的界面。
  3. 接收方: 如果希望接听通话,接收方可以调用 accept 函数,如果此时是视频通话,可以同时调用 openCamera 函数打开自己的本地摄像头。接收方也可以使用 reject 拒绝此次通话。
  4. 当双方音视频通道建立完成,通话双方还会收到 setCallingListener#onUserVideoAvailable 或 setCallingListener#onUserAudioAvailable 的事件回调。此时双方用户可以调用startRemoteView 展示远端的视频画面。视频通话远端的声音默认是自动播放的。
// 1.监听回调
this.$refs.calling.setCallingListener({}, ret => {
    // 接听/拒绝
    // 此时 B 如果也登录了IM系统,会收到 onInvited 回调
    // 可以调用 TRTCCalling的accept方法接受 / TRTCCalling的reject 方法拒绝
    if (ret && ret.hasOwnProperty('eventType')) {
        if ('onInvited' == ret.eventType) {
            this.$refs.calling.accept({}, ret => {
                console.log(ret);
            });
        }
        // 2.观看对方的画面
        // 由于 A 打开了摄像头,B 接受通话后会收到 onUserVideoAvailable 回调
        if ('onUserVideoAvailable' == ret.eventType) {
            if (ret.available) {
                this.$refs.calling.startRemteView({
                    userId: ret.userId,
                    rect: {
                        x: 0, 
                        y: 0, 
                        w: self.playerWidth, 
                        h: self.playerHeight
                    }
                }, ret => {
                    console.log(ret);
                });
                // 就可以看到对方画面了
            } else {
                // 停止渲染画面
                this.$refs.calling.stopRemoteView({
                    userId: ret.userId
                }, ret => {
                    console.log(ret);
                });
            }
        }
    }
});

// 3.调用组件的其他功能函数发起通话或挂断等
// 注意:必须在登录后才可以正常调用
// 发起视频通话
this.$refs.calling.call({
    userId: 'test002',
    type: 1
}, ret => {
    console.log(ret);
});
// 挂断
this.$refs.calling.hangup({}, ret => {
    console.log(ret);
});
// 拒绝
this.$refs.calling.reject({}, ret => {
    console.log(ret);
});

步骤6: 实现多人通话

  1. 发起方:多人视频/语音通话需要调用 groupCall 函数,并传入用户Id列表(userIdList)、群组 IM Id(groupId)、通话类型(type),其中 userIdList 为必填参数,groupId 为选填参数,type 为通话类型可以填写1或者2。
  2. 接收端:通过监听器监听 setCallingListener#onInvited 事件回调能够接收到此呼叫请求,其中参数列表就是发起方填入的参数列表,callType 参数为通话类型,您可以通过此参数启动相应的界面。
  3. 接收端:收到回调后可以调用 accept 方法接听此次通话,也可以选择用 reject 方法拒绝通话。
  4. 如果超过一定时间(默认30s)没有回复,接收方监听器会收到 setCallingListener#onCallingTimeOut 的事件回调,发起方监听器会收到 setCallingListener#onNoResp 回调。通话发起方在多个接收均未应答时 hangup ,每个接收方监听器均会收到 setCallingListener#onCallingCancel 回调。
  5. 如果需要离开当前多人通话可以调用 hangup 方法。
  6. 如果通话中有用户中途加入或离开,那么其他用户监听器均会接收到setCallingListener#onUserEnter或setCallingListener#onUserLeave 回调。

说明:

接口 groupCall 中的 groupId 参数是 IM 中的群组Id,如果填写该参数,那么通话请求消息的信令消息是通过群Id发送出去的,这种消息广播方式比较简单可靠。如果不填写,那么 RY-TencentTrtcCalling 组件会采用单发消息逐一通知。

this.$refs.calling.groupCall({
    userIdList: [
        'test002'
    ],
    type: 1,
    groupId: 'group001'
}, ret => {
    console.log(ret);
});

this.$refs.calling.openCamera({
    isFront: true,
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth, 
        h: self.playerHeight
    }
}, ret => {
    console.log(ret);
});

更多功能

  • 用户信息托管,包含头像、昵称等
  • 全局监听
  • 视频层叠覆盖问题解决

扫码添加, 获取技术支持:

技术支持



微信号: ruanyunkeji006

隐私、权限声明

1. 本插件需要申请的系统权限列表:

Android: "android.permission.INTERNET", "android.permission.ACCESS_NETWORK_STATE", "android.permission.ACCESS_WIFI_STATE", "aandroid.permission.WRITE_EXTERNAL_STORAGE", "android.permission.READ_EXTERNAL_STORAGE", "android.permission.RECORD_AUDIO", "android.permission.MODIFY_AUDIO_SETTINGS", "android.permission.BLUETOOTH", "android.permission.CAMERA", "android.permission.READ_PHONE_STATE", "android.hardware.camera", "android.hardware.camera.autofocus" iOS: 无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件使用腾讯云音视频通话SDK会采集数据,详情可参考:https://cloud.tencent.com/document/product/647/42044

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问