更新记录

5.1.2(2024-02-28)

  1. 修复浮窗会议功能bug(内测);
  2. 修复Android音量设置无效bug;

5.1.1(2024-02-02)

  1. 新增会议浮窗功能(内测);

5.1.0(2024-01-22)

  1. 升级基础库;
查看更多

平台兼容性

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

原生插件通用使用流程:

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


腾讯云音视频Smart

该模块可以实现腾讯云直播推流服务和视频通话功能,可以实现直播推流、视频通话、语音通话等功能

技术支持

如果希望获取更多高级功能或者技术支持,可以联系我们的客服微信:

ruanyunkeji006

直播推流

1. 使用模块

注册或登录腾讯云账号,并开通云直播服务

加载模块

新建nvue文件,注意该模块必须在nvue中使用。

模块名称为: RY-TencentLivePusher,使用标签

<div class="player">
        <RY-TencentLivePusher ref="livePusher" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentLivePusher>
    </div>

参数配置

data() {
    return {
        playerWidth: 0,
        playerHeight: 0,
        licence: {
            url: 'http://license.vod2.myqcloud.com/license/v1/xxxxxSDK.licence',
            key: 'xxxxxx87xxxxxx1'
        },
        rtmpUrl: 'rtmp://xxxx.livepush.myqcloud.com/live/xxx?txSecret=xxxx&txTime=xxx'
    }
}

备注: 可以在js的data()中声明播放器的宽度和高度,这样在代码中可以控制这两个参数的改变,可以参考

2. 给 SDK 配置 License 授权

获取 License,您会获得两个字符串:一个字符串是 licenseURL,另一个字符串是解密 key,如上面步骤中data的licence的数据。

在您的 App 调用相关功能之前,需要设置有效的Licence,不然无法调用相关组件功能,你可以先联系我们技术客服微信:

ruanyunkeji001或ruanyunkeji002

获取Licence支持以及相关Licence详细配置步骤。

3. 初始化推流组件并监听

首先创建一个TXLivePushConfig对象。该对象可以指定一些高级配置参数,但一般情况下我们不建议您操作该对象,因为我们已经在其内部配置好了所有需要校调的参数。之后再创建一个TXLivePush对象,该对象负责完成推流的主要工作。

init({params}, ret) 初始化

params:

参数 含义
licence 许可证
var self = this;
this.$refs.livePusher.init({
    licence: self.licence,
    docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

setPusherEventListener({params}, ret) 设置监听器

this.$refs.livePusher.setPusherEventListener({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

4. 开启摄像头预览

调用 tencentLivePusher 中的startPreview接口可以开启当前手机的摄像头预览。您需要为startPreview 接口提供一个用于显示视频画面的坐标和区域。

startPreview({params}, ret)

params:

参数 含义
rect 预览显示的坐标和区域
var self = this;
this.$refs.livePusher.startPreview({
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth,
        h: self.playerHeight
    }
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

5. 启动和结束推流

如果已经通过startPreview接口启动了摄像头预览,就可以调用 TXLivePush 中的startPush接口开始推流。

startPreview({params}, ret) 开始预览

params:

参数 含义
rtmpUrl 推流地址
var self = this;
this.$refs.livePusher.start({
    rtmpUrl: self.rtmpUrl
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
})

推流结束后,可以调用 tencentLivePusher 中的stopPush接口结束推流。请注意,如果已经启动了摄像头预览,请在结束推流时将其关闭,否则会导致 SDK 的表现异常。

stop({}, ret) 停止推流

this.$refs.livePusher.stop({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});
  • 如何获取可用的推流 URL? 开通直播服务后,推流地址的生成步骤,可以联系我们。

  • 返回 -5 的原因? 如果 startPush 接口返回 -5,则代表您的 License 校验失败了,请检查 第2步“给 SDK 配置 License 授权” 中的工作是否有问题。

6. 纯音频推流

如果您的直播场景是纯音频直播,不需要视频画面,那么您可以不执行 第4步 中的操作,取而代之的是开启 tencentLivePusher 中的enablePureAudioPush配置。

this.$refs.livePusher.init({
    ...
    // 是否纯音频推流
    enablePureAudioPush: true,
    ...
}, ret => {
});

如果您启动纯音频推流,但是 rtmp、flv 、hls 格式的播放地址拉不到流,那是因为线路配置问题,请联系我们技术客服,联系我们帮忙修改配置。

7. 设定画面清晰度

调用 tencentLivePusher 中的setVideoQuality接口,可以设定观众端的画面清晰度。之所以说是观众端的画面清晰度,是因为主播看到的视频画面是未经编码压缩过的高清原画,不受设置的影响。而setVideoQuality通过设定视频编码器的编码质量,使观众端感受到画质的差异。详情请参考 设定画面质量。

清晰度

setVideoQuality({params}, ret) 设置视频编码质量

params:

参数 含义
mode 视频分辨率
var self = this;
this.$refs.livePusher.setVideoQuality({
    mode: self.videoQuality
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

8. 美颜美白和红润特效

调用 tencentLivePusher 中的setBeautyStyle接口可以设置美颜效果,SDK 中提供了两种磨皮算法(beautyStyle):

美颜风格 效果说明
0 光滑风格,算法更加注重皮肤的光滑程度,适合秀场直播类场景下使用
1 自然风格,算法更加注重保留皮肤细节,适合对真实性要求更高的主播

美颜

setBeautyStyle({params}, ret) 设置美颜类型

params:

参数 含义
mode 美颜风格
var self = this;
this.$refs.livePusher.setBeautyStyle({
    mode: self.beautyStyle
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

9. 色彩滤镜效果

调用 tencentLivePusher 中的setFilter接口可以设置色彩滤镜效果。所谓色彩滤镜,是指一种将整个画面色调进行区域性调整的技术,例如将画面中的淡黄色区域淡化实现肤色亮白的效果,或者将整个画面的色彩调暖让视频的效果更加清新和温和。

调用 tencentLivePusher 中的setSpecialRatio接口可以设定滤镜的浓度,设置的浓度越高,滤镜效果也就越明显。

从手机 QQ 和 Now 直播的经验来看,单纯通过setBeautyStyle调整磨皮效果是不够的,只有将美颜效果和setFilter配合使用才能达到更加多变的美颜效果。所以,我们的设计师团队提供了17种默认的色彩滤镜,并将其默认打包在 Demo 中供您使用。

色彩滤镜

setFilter({params}, ret) 设置指定素材滤镜特效

params:

参数 含义
img 滤镜素材
var self = this;
this.$refs.livePusher.setFilter({
    img: self.filterImg
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

setFilterStrength({params}, ret) 设置滤镜浓度

params:

参数 含义
strength 滤镜浓度
var self = this;
this.$refs.livePusher.setFilterStrength({
    strength: self.filterStrength
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

10. 控制摄像头

TXLivePush 提供了一组 API 用户控制摄像头的行为:

|函数|功能说明|备注说明| |switchCamera|切换前后摄像头|无| |turnOnFlashLight|打开或关闭闪光灯|仅在当前是后置摄像头时有效| |setZoom|调整摄像头的焦距|焦距大小,取值范围:1-5,默认值建议设置为1即可| |setFocusPosition|设置手动对焦位置|需要将init()中的touchFocus选项设置为true后才能使用|

switchCamera({params}, ret) 切换前后摄像头

this.$refs.livePusher.switchCamera({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

turnOnFlashLight({params}, ret) 打开后置摄像头旁边的闪光灯

参数 含义
isOn 是否打开
var self = this;
this.$refs.livePusher.turnOnFlashLight({
    isOn: self.isOn
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

setZoom({params}, ret) 调整摄像头的焦距

params:

参数 含义
value 摄像头焦距
var self = this;
this.$refs.livePusher.setZoom({
    value: self.zoom
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

setFocusPosition({params}, ret) 设置手动对焦位置

params:

参数 含义
x 焦点x坐标
y 焦点y坐标
this.$refs.livePusher.setFocusPosition({
    x: 50,
    y: 50
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

11. 观众端的镜像效果

调用 tencentLivePusher 中的setMirror接口可以设置观众端的镜像效果。之所以说是观众端的镜像效果,是因为当主播在使用前置摄像头直播时,自己看到的画面会被 SDK 默认反转,这时主播的体验跟自己照镜子时的体验是保持一致的。setMirror所影响的是观众端观看到的画面情况,如下图所示:

镜像效果

setMirror({params}, ret) 设置镜像

params:

参数 含义
isMirror 是否镜像
var self = this;
this.$refs.livePusher.setMirror({
    isMirror: self.isMirror
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

12. 横屏推流

大多数情况下,主播习惯以“竖屏持握”手机进行直播拍摄,观众端看到的也是竖屏分辨率的画面(例如 540 × 960 这样的分辨率);有时主播也会“横屏持握”手机,这时观众端期望能看到是横屏分辨率的画面(例如 960 × 540 这样的分辨率),如下图所示:

横屏推流

tencentLivePusher 默认推出的是竖屏分辨率的视频画面,如果希望推出横屏分辨率的画面,需要:

  1. 设置 tencentLivePusher 中的homeOrientation可以改变观众端看到的视频画面宽高比方向。
  2. 调用 TXLivePush 中的setRenderRotation可以接口改变主播端的视频画面的渲染方向。

setRenderRotation({params}, ret) 设置本地摄像头预览画面的旋转方向

params:

参数 含义
rotation 旋转方向
var self = this;
this.$refs.livePusher.setRenderRotation({
    rotation: self.renderRotation
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

13. 隐私模式(垫片推流)

有时候主播的一些动作不希望被观众看到,但直播过程中又不能下播,那就可以考虑进入隐私模式。在隐私模式下,SDK 可以暂停采集主播手机的摄像头画面以及麦克风声音,并使用一张默认图片作为替代图像进行推流,也就是所谓的“垫片”。

该功能也常用于 App 被切到后台时:在 iOS 系统中,当 App 切到后台以后,操作系统不再允许该 App 继续采集摄像头画面。 此时就可以通过调用pausePush进入垫片状态。因为对于大多数直播 CDN 而言,如果超过一定时间(腾讯云目前为70s)不推视频数据,服务器就会断开当前的推流链接,所以在 App 切到后台后进入垫片模式是很有必要的。

垫片推流

  • step1: 开启 XCode 中的 Background 模式
  • step2: 设置 TXLivePushConfig 中的相关参数 在开始推流前,使用 LivePushConfig 的pauseImg、pauseFps和pauseTime接口可以设置垫片推流的详细参数:
  • step3: 监听 App 的前后台切换事件

如果 App 在切到后台后就被 iOS 系统彻底休眠掉,SDK 将无法继续推流,观众端就会看到主播画面进入黑屏或者冻屏状态。您可以使用下面的代码让 App 在切到后台后还可再跑几分钟。

!!注意: 请注意调用顺序:startPush => ( pausePush => resumePush ) => stopPush,错误的调用顺序会导致 SDK 表现异常,因此使用成员变量对执行顺序进行保护是很有必要的。

14. 背景混音

调用 TXLivePush 中的 BGM 相关接口可以实现背景混音功能。背景混音是指主播在直播时可以选取一首歌曲伴唱,歌曲会在主播的手机端播放出来,同时也会被混合到音视频流中被观众端听到,所以被称为“混音”。

背景音乐

接口 说明
playBGM 播放背景音乐
stopBGM 停止播放背景音乐
pauseBGM 暂停播放背景音乐
resumeBGM 继续播放背景音乐
setMicVolume 设置混音时麦克风的音量大小
setBGMVolume 设置混音时背景音乐的音量大小
setBgmPitch 调整背景音乐的音调高低

playBGM({params}, ret) 播放背景音乐

params:

|参数|含义| |path|背景音乐地址|

var self = this;
this.$refs.livePusher.playBGM({
    path: self.bgmPath
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

stopBGM({}, ret) 停止背景音乐

this.$refs.livePusher.stopBGM({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

pauseBGM({}, ret) 暂停背景音乐

this.$refs.livePusher.pauseBGM({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

resumeBGM({}, ret) 恢复背景音乐播放

this.$refs.livePusher.resumeBGM({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

setMicVolume({params} ,ret)

params:

|参数|含义| |volume|音量大小|

var self = this;
this.$refs.livePusher.setMicVolume({
    volume: self.micVolume
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

setBGMVolume({params}, ret) 设置背景音乐音量

var self = this;
this.$refs.livePusher.setBGMVolume({
    volume: self.bgmVolume
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

setBGMPitch({params}, ret) 调整背景音乐的音调高低

var self = this;
this.$refs.livePusher.setBGMPitch({
    volume: self.bgmPitch
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

15. 耳返和混响

调用 TXLivePushConfig 中的enableAudioPreview选项可以开启耳返功能,“耳返”指的是当主播带上耳机来唱歌时,耳机中要能实时反馈主播的声音。 调用 tencentLivePusher 中的setReverbType接口可以设置混响效果,例如 KTV、会堂、磁性、金属等,这些效果也会作用到观众端。 调用 tencentLivePusher 中的setVoiceChangerType接口可以设置变调效果,例如“萝莉音”,“大叔音”等,用来增加直播和观众互动的趣味性,这些效果也会作用到观众端。

耳返和混响

setReverbType({params}, ret) 设置反转

params:

参数 含义
type 混响效果类型
var self = this;
this.$refs.livePusher.setReverbType({
    type: self.reverbType
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

setVoiceChangerType({params}, ret) 设置变声类型

params:

参数 含义
type 变声类型
var self = this;
this.$refs.livePusher.setVoiceChangerType({
    type: self.voiceChanger
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

16. 设置 Logo 水印

设置 tencentLivePusher 中的watermark可以让 SDK 在推出的视频流中增加一个水印,水印位置位是由坐标选项决定。

  • SDK 所要求的水印图片格式为 png 而不是 jpg,因为 png 这种图片格式有透明度信息,因而能够更好地处理锯齿等问题(将 jpg 图片在 Windows 下修改后缀名是不起作用的)。
  • watermark设置的是水印图片相对于推流分辨率的归一化坐标。假设推流分辨率为:540 × 960,该字段设置为:(0.1,0.1,0.1,0.0),那么水印的实际像素坐标为:(540 × 0.1,960 × 0.1,水印宽度 × 0.1,水印高度会被自动计算)。
var self = this;
this.$refs.livePusher.init({
    ...
    watermark: {
        img: self.img,
        x: 0, 
        y: 0, 
        w: 0.1
        h: 0.1
    }
    ...
}, ret => {
});

17. 本地录制

调用 TXLivePush 中的startRecord接口可以启动本地录制,录制格式为 MP4,通过参数 videoPath 可以指定 MP4文件的存放路径。 调用 TXLivePush 中的stopRecord接口可以结束录制。如果您已经通过 recordDelegate 接口注册了监听器给 TXLivePusher,那么一旦录制结束,录制出来的文件会通过 TXLiveRecordListener (详见 TXLiveRecordTypeDef.h 头文件)回调通知出来。

!!注意:

  1. 只有启动推流后才能开始录制,非推流状态下启动录制无效。
  2. 出于安装包体积的考虑,仅专业版和企业版两个版本的 LiteAVSDK 支持该功能,直播精简版仅3定义了接口但并未实现。
  3. 录制过程中请勿动态切换分辨率和软硬编,会有很大概率导致生成的视频异常。
  4. 使用 TXLivePusher 录制视频会一定程度地降低推流性能,云直播服务也提供了云端录制功能,具体使用方法请参考 直播录制。

18.主播端弱网提示

手机连接 Wi-Fi 网络不一定就非常好,如果 Wi-Fi 信号差或者出口带宽很有限,可能网速不如4G,如果主播在推流时遇到网络很差的情况,需要有一个友好的提示,提示主播应当切换网络。

弱网提示

通过setPusherEventListener 里的onWarnNetBusy事件,它代表当前主播的网络已经非常糟糕,出现此事件即代表观众端会出现卡顿。此时就可以像上图一样在 UI 上弹出一个“弱网提示”。

19. 发送SEI消息

调用sendMessageEx接口可以发送 SEI 消息。所谓 SEI,是视频编码数据中规定的一种附加增强信息,平时一般不被使用,但我们可以在其中加入一些自定义消息,这些消息会被直播 CDN 转发到观众端。使用场景有:

  1. 答题直播:推流端将题目下发到观众端,可以做到“音-画-题”完美同步。
  2. 秀场直播:推流端将歌词下发到观众端,可以在播放端实时绘制出歌词特效,因而不受视频编码的降质影响。
  3. 在线教育:推流端将激光笔和涂鸦操作下发到观众端,可以在播放端实时地划圈划线。

由于自定义消息是直接被塞入视频数据中的,所以不能太大(几个字节比较合适),一般常用于塞入自定义的时间戳等信息。

sendMessageEx({params}, ret) 发送 SEI 消息

params:

参数 含义
msg 要发送的消息
var self = this;
this.$refs.livePusher.sendMessageEx({
    msg: self.msg
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

常规开源播放器或者网页播放器是不能解析 SEI 消息的,必须使用我们的RY-TencentLivePlayer才能解析这些消息:

  1. 初始化设置中的enableMessage选项为true。
  2. 当RY-TencentLivePlayer所播放的视频流中有 SEI 消息时,会通过setPlayerEventListener中的 onGetMessage通知给您。

视频语音通话

步骤一: 腾讯云配置

这个步骤比较繁琐,可以联系我们上文中的客服进行指引

注册或登录腾讯云账号,实名认证后,点击实时音视频

  1. 点击应用管理许可证

    • 如果还没有,可以点击"创建应用"
    • 或选择对应的应用, 并复制”SDKAppId“,这个ID保存为配置的文件的sdkAppId;
  2. 点击辅助工具,选择UserSig生成&校验,选择对应的应用的ID,生成userId和userSig

步骤二: 开始使用模块

  1. 新建nvue文件,注意该模块必须在nvue中使用 模块名称为: RY-TencentTrtcCalling,使用标签
    <div class="trtc">
        <RY-TencentTrtcCalling ref="calling" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentTrtcCalling>
    </div>

备注: 可以在js的data()中声明播放器的宽度和高度,这样在代码中可以控制这两个参数的改变,可以参考

data() {
    return {
        playerWidth: 0,
        playerHeight: 0,
        sdkAppId: 1400387416,
        userId: 'test001',
        userSig: 'eJw1zMxxxxx3CNxxxxxx',
        type: 0,
        userIdList: ['test002'],
        groupId: '',
        remoteUserId: 'test002',
        isFront: true, 
        isMute: true,
        isHandsFree: true
    }
}
  1. 模块初始化

init({params}, ret)

var self = this;
const {windowWidth, windowHeight} = uni.getSystemInfoSync();
self.playerWidth = windowWidth / 2;
self.playerHeight = windowHeight / 2;
this.$refs.calling.init({
    docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

可以通过直接控制组件的宽度和高度来控制显示界面的大小,如果上面的playerWidth和playerHeight。

步骤三: 设置监听

setCallingListener({} ret) 设置监听器, 监听事件回调

ret:

参数 含义
onInvited 被邀请通话回调
onUserVideoAvailable 用户是否开启视频上行回调
onUserAudioAvailable 用户是否开启音频上行回调
onCallingTimeOut onCallingTimeOut
onNoResp 对方无回应回调
onCallingCancel 当前通话被取消回调
onUserEnter 用户进入通话回调
onUserLeave 用户离开通话回调
this.$refs.calling.setCallingListener({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤四: 登录

login({params}, ret) 登录

params:

参数 含义
sdkAppId 当前用户的Id
userSig 腾讯云设计的一种安全保护签名
var self = this;
    this.$refs.calling.login({
        sdkAppId: self.sdkApp Id,
        userId: self.userId, 
        userSig: self.userSig
    }, ret => {
        uni.showToast({
            title: JSON.stringify(ret),
            icon: "none"
        });
});

步骤五: 实现1V1通话

  1. 发起方: 调用call({params}, ret)发起视频或语音通话的请求。
  2. 接收方: 当接收方处于已登录状态时,监听器会收到setCallingListener#onInvited的事件回调,回调中的callType为发起方的填写的通话类型,您可以通过此参数启动相应的界面。
  3. 接收方: 如果希望接听通话,接收方可以调用accept({}, ret)函数,如果此时是视频通话,可以同时调用openCamera()函数打开自己的本地摄像头。接收方也可以使用reject()拒绝此次通话。
  4. 当双方音视频通道建立完成,通话双方还会收到setCallingListener#onUserVideoAvailable或setCallingListener#onUserAudioAvailable的事件回调。此时双方用户可以调用startRemoteView()展示远端的视频画面。视频通话远端的声音默认是自动播放的。

call 单人通话邀请

params:

参数 含义
userId 呼叫用户Id
type 通话类型:1视频/2语音
var self = this;
this.$refs.calling.call({
    userId: self.remoteUserId, 
    type: self.type
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

accept({}, ret) 接受当前通话

this.$refs.calling.accept({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

openCamera({params}, ret) 开启摄像头

params:

参数 含义
isFront true:开启前置摄像头,false:开启后置摄像头
rect 指定显示区域的坐标和大小
var self = this;
const {windowWidth, windowHeight} = uni.getSystemInfoSync();
this.$refs.calling.openCamera({
    isFront: self.isFront,
    rect: {
        x: 0, 
        y: 0, 
        w: windowWidth / 2, 
        h: windowHeight / 2
    }
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

可以通过rect指定视频显示的区域,x、y代表左上角坐标,w和h代表宽度和高度。

startRemoteView({params}, ret) 渲染远端视频

params:

参数 含义
userId 远端用户Id
rect 指定显示区域的坐标和大小
var self = this;
const {windowWidth, windowHeight} = uni.getSystemInfoSync();
this.$refs.calling.startRemoteView({
    userId: self.remoteUserId,
    rect: {
        x: 0, 
        y: 0, 
        w: windowWidth / 4, 
        h: windowHeight / 4
    }
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

可以通过rect指定视频显示的区域,x、y代表左上角坐标,w和h代表宽度和高度。

步骤六: 实现多人通话

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

groupCall({params}, ret) 群组邀请通话

params:

参数 含义
userIdList 邀请Id列表
type 通话类型:1视频/2语音
groupId 群Id
var self = this;
this.$refs.calling.groupCall({
    userIdList: self.userIdList,
    type: self.type,
    groupId: self.groupId
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

hangup({}, ret) 挂断当前通话

this.$refs.calling.hangup({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

更多功能

联系我们获取更能多增值功能 技术客服微信: ruanyunkeji006

  • 拉流播放
  • 连麦互动直播
  • 视频互动直播
  • 语聊房

隐私、权限声明

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

Android: "android.permission.RECEIVE_BOOT_COMPLETED", "android.permission.INTERNET", "android.permission.ACCESS_NETWORK_STATE", "android.permission.ACCESS_WIFI_STATE", "android.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/454/19074

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

暂无用户评论。

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