更新记录
5.1.2(2024-02-28)
- 修复浮窗会议功能bug(内测);
- 修复Android音量设置无效bug;
5.1.1(2024-02-02)
- 新增会议浮窗功能(内测);
5.1.0(2024-01-22)
- 升级基础库;
平台兼容性
Android | Android CPU类型 | iOS |
---|---|---|
适用版本区间:4.4 - 14.0 | armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 | 适用版本区间:9 - 17 |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
- 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
- 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
- 开发完毕后正式云打包
付费原生插件目前不支持离线打包。
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 默认推出的是竖屏分辨率的视频画面,如果希望推出横屏分辨率的画面,需要:
- 设置 tencentLivePusher 中的homeOrientation可以改变观众端看到的视频画面宽高比方向。
- 调用 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 头文件)回调通知出来。
!!注意:
- 只有启动推流后才能开始录制,非推流状态下启动录制无效。
- 出于安装包体积的考虑,仅专业版和企业版两个版本的 LiteAVSDK 支持该功能,直播精简版仅3定义了接口但并未实现。
- 录制过程中请勿动态切换分辨率和软硬编,会有很大概率导致生成的视频异常。
- 使用 TXLivePusher 录制视频会一定程度地降低推流性能,云直播服务也提供了云端录制功能,具体使用方法请参考 直播录制。
18.主播端弱网提示
手机连接 Wi-Fi 网络不一定就非常好,如果 Wi-Fi 信号差或者出口带宽很有限,可能网速不如4G,如果主播在推流时遇到网络很差的情况,需要有一个友好的提示,提示主播应当切换网络。
通过setPusherEventListener 里的onWarnNetBusy事件,它代表当前主播的网络已经非常糟糕,出现此事件即代表观众端会出现卡顿。此时就可以像上图一样在 UI 上弹出一个“弱网提示”。
19. 发送SEI消息
调用sendMessageEx接口可以发送 SEI 消息。所谓 SEI,是视频编码数据中规定的一种附加增强信息,平时一般不被使用,但我们可以在其中加入一些自定义消息,这些消息会被直播 CDN 转发到观众端。使用场景有:
- 答题直播:推流端将题目下发到观众端,可以做到“音-画-题”完美同步。
- 秀场直播:推流端将歌词下发到观众端,可以在播放端实时绘制出歌词特效,因而不受视频编码的降质影响。
- 在线教育:推流端将激光笔和涂鸦操作下发到观众端,可以在播放端实时地划圈划线。
由于自定义消息是直接被塞入视频数据中的,所以不能太大(几个字节比较合适),一般常用于塞入自定义的时间戳等信息。
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才能解析这些消息:
- 初始化设置中的enableMessage选项为true。
- 当RY-TencentLivePlayer所播放的视频流中有 SEI 消息时,会通过setPlayerEventListener中的 onGetMessage通知给您。
视频语音通话
步骤一: 腾讯云配置
这个步骤比较繁琐,可以联系我们上文中的客服进行指引
-
点击应用管理许可证,
- 如果还没有,可以点击"创建应用"
- 或选择对应的应用, 并复制”SDKAppId“,这个ID保存为配置的文件的sdkAppId;
-
点击辅助工具,选择UserSig生成&校验,选择对应的应用的ID,生成userId和userSig
步骤二: 开始使用模块
- 新建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
}
}
- 模块初始化
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通话
- 发起方: 调用call({params}, ret)发起视频或语音通话的请求。
- 接收方: 当接收方处于已登录状态时,监听器会收到setCallingListener#onInvited的事件回调,回调中的callType为发起方的填写的通话类型,您可以通过此参数启动相应的界面。
- 接收方: 如果希望接听通话,接收方可以调用accept({}, ret)函数,如果此时是视频通话,可以同时调用openCamera()函数打开自己的本地摄像头。接收方也可以使用reject()拒绝此次通话。
- 当双方音视频通道建立完成,通话双方还会收到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代表宽度和高度。
步骤六: 实现多人通话
- 发起方:多人视频/语音通话需要调用 groupCall() 函数,并传入用户列表(userIdList)、群组 IM ID(groupId)、通话类型(type),其中 userIdList 为必填参数,groupId 为选填参数,type 为通话类型可以填写0或者1。
- 接收端:通过监听器监听setCallingListener#onInvited事件回调能够接收到此呼叫请求,其中参数列表就是发起方填入的参数列表,callType 参数为通话类型,您可以通过此参数启动相应的界面。
- 接收端:收到回调后可以调用 accept() 方法接听此次通话,也可以选择用 reject() 方法拒绝通话。
- 如果超过一定时间(默认30s)没有回复,接收方监听器会收到setCallingListener#onCallingTimeOut的事件回调,发起方监听器会收到setCallingListener#onNoResp回调。通话发起方在多个接收均未应答时 hangup() ,每个接收方监听器均会收到setCallingListener#onCallingCancel回调。
- 如果需要离开当前多人通话可以调用 hangup() 方法。
- 如果通话中有用户中途加入或离开,那么其他用户监听器均会接收到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
- 拉流播放
- 连麦互动直播
- 视频互动直播
- 语聊房