更新记录
2.0.0(2021-11-29)
- 新增内测接口开通功能;
- 新增视频发布功能(内测);
1.1.0(2021-11-22)
- 修复包名无法修改bug;
1.0.0(2021-11-12)
- 短视频录制和短视频编辑功能;
- 直播推流;
- 直播拉流;
平台兼容性
Android | Android CPU类型 | iOS |
---|---|---|
适用版本区间:4.4 - 11.0 | armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 | 适用版本区间:9 - 14 |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在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原生插件配置”->”云端插件“列表中删除该插件重新选择
腾讯云音视频SmartKit
腾讯云短视频Kit
短视频 (User Generated Short Video,UGSV)基于腾讯云强大的上传、存储、转码、分发的云点播能力,提供集成了采集、剪辑、拼接、特效、分享、播放等功能的客户端 SDK,并整合腾讯的 IM、视频内容识别等技术,帮助用户聚焦业务本身,快速轻松实现基于移动端的短视频应用。
腾讯云直播推流器
该模块可以实现腾讯云直播推流服务,支持直播推流、暂停、继续、停止等基本控制,可以设置基础美颜,也可以支持背景音乐播放。
腾讯云直播播放器
该模块可以实现腾讯云直播拉流播放,支持画面调整、播放控制、消息接收、屏幕截图等。
技术支持
建议扫码添加我们技术支持,协助接入和开发。
联系我们 | 微信号 | 更多功能 |
---|---|---|
ruanyunkeji006 |
基础美颜 背景音乐 聊天、弹幕、点赞、打赏、送礼等 |
快速开始
步骤 1: 集成插件
- 加载插件
插件名称: RY-TencentAVSmartKit-UGC
该插件为module插件,可以直接在vue中使用如下方式加载。
var UGCKit = uni.requireNativePlugin("RY-TencentAVSmartKit-UGC");
- 腾讯云配置
建议先联系我们,技术支持(微信号: ruanyunkeji006)
- 申请测试版 License
a. 登录【云点播控制台】,左侧菜单中选择【License 管理】 >【SDK License】,单击【创建测试 License 】。
b. 根据实际需求填写 App Name、Package Name 和 Bundle ID,勾选功能模块【短视频】,单击【确定】。
c. 测试版 License 成功创建后,页面会显示生成的 License 信息。在 SDK 初始化配置时需要传入 Key 和 License URL 两个参数,请妥善保存以下信息。
步骤 2: 开始使用插件
使用RY-TencentUGCKit,需要调用 [init]() 初始化插件,才可以调用其他的功能。
UGCKit.init({
licence: self.licence
}, ret => {
console.log(ret);
});
步骤 3: 使用 UGCKit 进行视频录制
调用 [record]() 可以开启视频录制。
UGCKit.record({}, ret => {
console.log(ret);
});
步骤 4: 使用 UGCKit 进行视频导入
调用 [picker]() 可以从相册中选择视频,进行编辑。
UGCKit.picker({
mediaType: 0,
maxItemCount: 5
}, ret => {
console.log(ret);
});
快速开始
步骤 1: 加载插件
插件名称: RY-TencentAVSmartKit-V2Live
新建nvue文件,注意该模块必须在nvue中使用。
<RY-TencentAVSmartKit-V2Live ref="livePusher" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentAVSmartKit-V2Live>
备注:
通过修改width和height的参数值,可以修改视图容器的大小。
- 腾讯云配置
注册或登录腾讯云账号,并进行实名认证。
- 点击 直播服务,开通直播功能,已开通,则忽略;
- 点击 Licence管理,进入Licence页面;
- 点击 "创建测试Licence"按钮,弹出测试Licence配置界面;
- 在"基本信息"中,输入"App Name" => 应用名称,"Package Name" => Android包名(需要和自定义基座的Android包名一致),"Bundle Id" => iOS包名(与自定义基座iOS的Bundle Id一致);
- 在"选择功能模块中",选中"直播推流(RTMP推流+RTC推流)"。
- 创建成功后,您会获取 Licence,您会获得两个字符串:一个字符串是 licenseURL,另一个字符串是解密 key。
注意:
请使用测试Licence开发测试,如果您需要购买正式Licence(信息填写错误无法修改,也可能无法退款),建议先联系我们技术支持微信(微信号: ruanyunkeji006)。
- 生成推流地址
a. 自动推流,联系我们技术支持微信(微信号: ruanyunkeji006)。
b. 点击 推流地址,填入相关信息,生成推流地址。
步骤 2: 初始化推流组件
- 首先 [initPusher]() 初始化推流并给SDK授权。该步骤可以指定一些高级配置参数,但一般情况下我们不建议您操作该对象,因为我们已经在其内部配置好了所有需要校调的参数。
this.$refs.livePusher.initPusher({
licence: {
url: 'http://license.vod2.myqcloud.com/license/v1/e50xxxe680/TXLiveSDK.licence',
key: '3d436208xxxxd7f92871'
},
docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
console.log(ret);
});
步骤 3: 设置推流监听器
设置 [setLivePusherListener]() 推流监听,会返回推流中各个 [事件回调]()。
this.$refs.livePusher.setLivePusherListener({}, ret => {
console.log(ret);
});
步骤 4: 开启摄像头预览
调用 [startCamera]() 接口开启当前手机摄像头的预览。
this.$refs.livePusher.startCamera({
rect: {
x: 0,
y: 0,
w: self.playerWidth,
h: self.playerHeight
}
}, ret => {
console.log(ret);
});
步骤 5: 启动和结束推流
如果已经通过 [startCamera]() 接口启动了摄像头预览,就可以调用 V2LivePusher 中的 [startPush]() 接口开始推流。推流地址可以使用 TRTC 地址 ,或者使用 RTMP 地址 ,前者使用 UDP 协议,推流质量更高,并支持连麦互动。
// 启动推流, URL可以使用 trtc:// 或者 rtmp:// 两种协议,前者支持连麦功能
// 支持连麦
var url = "trtc://cloud.tencent.com/push/streamid?sdkappid=1400188888&userId=A&usersig=xxxxx";
// 不支持连麦,直接推流到直播 CDN
var url = "rtmp://test.com/live/streamid?txSecret=xxxxx&txTime=xxxxxxxx";
this.$refs.livePusher.startPush({
url: url
}, ret => {
console.log(ret);
})
推流结束后,可以调用 V2LivePusher 中的 [stopPush]() 接口结束推流。
this.$refs.livePusher.stopPush({}, ret => {
console.log(ret);
});
注意:
如果已经启动了摄像头预览,请在结束推流时将其关闭。
-
如何获取可用的推流 URL?
-
返回 -5 的原因?
如果 startPush 接口返回 -5,则代表您的 License 校验失败了,请检查 第2步“给 SDK 配置 License 授权” 中的工作是否有问题。
步骤 6: 纯音频推流
如果您的直播场景是纯音频直播,不需要视频画面,那么您可以不执行 第4步 中的操作,或者在调用 startPush 之前不调用 startCamera 接口即可。
this.$refs.livePusher.init({
...
}, ret => {
console.log(ret);
});
this.$refs.livePusher.startPush({
url: url
}, ret => {
console.log(ret);
});
this.$refs.livePusher.startMicrophone({}, ret => {
console.log(ret);
});
说明:
如果您启动纯音频推流,但是 RTMP、FLV 、HLS 格式的播放地址拉不到流,那是因为线路配置问题,请 提工单 联系我们帮忙修改配置。
步骤 7: 设定画面清晰度
调用 V2LivePusher 中的 [setVideoQuality]() 接口,可以设定观众端的画面清晰度。之所以说是观众端的画面清晰度,是因为主播看到的视频画面是未经编码压缩过的高清原画,不受设置的影响。而 [setVideoQuality]() 设定的视频编码器的编码质量,观众端可以感受到画质的差异。详情请参见 设定画面质量。
步骤 8: 美颜美白和红润特效
- 美颜风格
SDK 内置三种不同的磨皮算法,每种磨皮算法即对应一种美颜风格,您可以选择最适合您产品定位的方案。
美颜风格 | 效果说明 |
---|---|
0 | 光滑风格,算法更加注重皮肤的光滑程度,适合秀场直播类场景下使用 |
1 | 自然风格,算法更加注重保留皮肤细节,适合对真实性要求更高的主播 |
2 | 由上海优图实验室提供的美颜算法,磨皮效果介于光滑和自然之间,比光滑保留更多皮肤细节,比自然磨皮程度更高 |
美颜风格可以通过 V2LivePusher 的 [setBeautyStyle]() 接口设置:
美颜风格 | 设置方式 | 接口说明 |
---|---|---|
美颜风格 | [setBeautyLevel]() | 取值范围0 - 9; 0表示关闭, 1 - 9值越大, 效果越明显 |
美白级别 | [setWhitenessLevel]() | 取值范围0 - 9; 0表示关闭, 1 - 9值越大, 效果越明显 |
红润级别 | [setRuddyLevel]() | 取值范围0 - 9; 0表示关闭, 1 - 9值越大, 效果越明显 |
步骤 9: 色彩滤镜效果
-
调用 V2LivePusher 中的 [setFilter]() 接口可以设置色彩滤镜效果。所谓色彩滤镜,是指一种将整个画面色调进行区域性调整的技术,例如将画面中的淡黄色区域淡化实现肤色亮白的效果,或者将整个画面的色彩调暖让视频的效果更加清新和温和。
-
调用 V2LivePusher 中的 [setFilterStrength]() 接口可以设定滤镜的浓度,设置的浓度越高,滤镜效果也就越明显。
从手机 QQ 和 Now 直播的经验来看,单纯通过 [setBeautyStyle]() 调整磨皮效果是不够的,只有将美颜效果和 [setFilter]() 配合使用才能达到更加多变的美颜效果。所以,我们的设计师团队提供了17种默认的色彩滤镜供您使用。
this.$refs.livePusher.setFilter({
img: '/path/to/filterImg.png'
}, ret => {
console.log(ret);
});
this.$refs.livePusher.setFilterStrength({
strength: 0.6
}, ret => {
console.log(ret);
});
步骤 10: 设备管理
RY-V2TencentLivePusher 提供了一组 API 用户控制设备的行为,您可通过设备管理接口进一步进行设备管理,详细用法请参见 [设备管理接口]()。
步骤 11: 观众端的镜像效果
通过调用 V2LivePusher 的 [setRenderMirror]() 可以改变摄像头的镜像方式,继而影响观众端观看到的镜像效果。之所以说是观众端的镜像效果,是因为当主播在使用前置摄像头直播时,默认情况下自己看到的画面会被 SDK 反转。
步骤 12: 横屏推流
大多数情况下,主播习惯以“竖屏持握”手机进行直播拍摄,观众端看到的也是竖屏分辨率的画面(例如 540 × 960 这样的分辨率);有时主播也会“横屏持握”手机,这时观众端期望能看到是横屏分辨率的画面(例如 960 × 540 这样的分辨率),如下图所示:
V2LivePusher 默认推出的是竖屏分辨率的视频画面,如果希望推出横屏分辨率的画面,可以修改 [setVideoQuality]() 接口的参数来设定观众端的画面横竖屏模式。
this.$refs.livePusher.setVideoQuality({
resolutionMode: 1
...
}, ret => {
console.log(ret);
});
步骤 13: 音效设置
调用 V2LivePusher 中的音效接口可以实现背景混音、耳返、混响等音效功能。背景混音是指主播在直播时可以选取一首歌曲伴唱,歌曲会在主播的手机端播放出来,同时也会被混合到音视频流中被观众端听到,所以被称为“混音”。
- 调用 [enableVoiceEarMonitor]() 选项可以开启耳返功能,“耳返”指的是当主播带上耳机来唱歌时,耳机中要能实时反馈主播的声音。
- 调用 [setVoiceReverbType]() 接口可以设置混响效果,例如 KTV、会堂、磁性、金属等,这些效果也会作用到观众端。
- 调用 [setVoiceChangerType]() 接口可以设置变调效果,例如“萝莉音”,“大叔音”等,用来增加直播和观众互动的趣味性,这些效果也会作用到观众端。
说明:
详细用法请参见 [音效管理]()。
步骤 14: 设置 Logo 水印
设置 V2LivePusher 中的 [setWatermark]() 可以让 SDK 在推出的视频流中增加一个水印,水印位置位是由传入参数 (x, y, scale) 所决定。
- SDK 所要求的水印图片格式为 PNG 而不是 JPG,因为 PNG 这种图片格式有透明度信息,因而能够更好地处理锯齿等问题(将 JPG 图片修改后缀名是不起作用的)。
- (x, y, scale) 参数设置的是水印图片相对于推流分辨率的归一化坐标。假设推流分辨率为:540 × 960,该字段设置为:(0.1,0.1,0.1),那么水印的实际像素坐标为:(540 × 0.1,960 × 0.1,水印宽度 × 0.1,水印高度会被自动计算)。
this.$refs.livePusher.setWaterMark({
img: '/path/to/watermark.png',
x: 0.03,
y: 0.015,
scale: 1
}, ret => {
console.log(ret);
});
步骤 15: 主播端弱网提醒
手机连接 Wi-Fi 网络不一定就非常好,如果 Wi-Fi 信号差或者出口带宽很有限,可能网速不如4G,如果主播在推流时遇到网络很差的情况,需要有一个友好的提示,提示主播应当切换网络。
通过 setLivePusherListener 里的 onWarning 可以捕获 [onNetworkBusyWarn]() 事件,它代表当前主播的网络已经非常糟糕,出现此事件即代表观众端会出现卡顿。此时就可以像上图一样在 UI 上弹出一个“弱网提示”。
this.$refs.setLivePusherListener({}, ret => {
if ('onWarning' == ret.eventType) {
// todo
if (ret.code == ) {
console.log('您当前的网络环境不佳,请尽快更换网络保证正常直播')
}
}
})
快速开始
步骤 1: 加载插件
插件名称: RY-TencentAVSmartKit-V2Live
新建nvue文件,注意该模块必须在nvue中使用。
<RY-TencentAVSmartKit-V2Live ref="livePlayer" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentAVSmartKit-V2Live>
备注: 通过修改width和height的参数值,可以修改视图容器的大小。
- 腾讯云配置
步骤2: 初始化推流组件
首先调用 [initPlayer]() 初始化,该步骤可以指定一些高级配置参数,但一般情况下我们不建议您操作该对象,因为我们已经在其内部配置好了所有需要校调的参数。
this.$refs.livePlayer.initPlayer({
licence: {
url: 'http://license.vod2.myqcloud.com/license/v1/e50xxxe680/TXLiveSDK.licence',
key: '3d436208xxxxd7f92871'
},
docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
console.log(ret);
});
步骤3: 设置拉流监听器
然后 [setLivePlayerListener]() 设置推流监听,会返回推流中各个 [事件回调]()。
this.$refs.livePlayer.setLivePlayerListener({}, ret => {
console.log(ret);
});
步骤 4: 启动播放
调用 [startPlay]() 接口开启当前手机摄像头的预览。
this.$refs.livePusher.startPlay({
rect: {
x: 0,
y: 0,
w: self.playerWidth,
h: self.playerHeight
},
url: "http://2157.liveplay.myqcloud.com/live/2157_xxxx.flv"
}, ret => {
console.log(ret);
});
步骤 5: 画面调整
- [setRenderFillMode]():铺满 or 适应
可选值 | 含义 |
---|---|
0 | 将图像等比例铺满整个屏幕,多余部分裁剪掉,此模式下画面不会留黑边,但可能因为部分区域被裁剪而显示不全 |
1 | 将图像等比例缩放,适配最长边,缩放后的宽和高都不会超过显示区域,居中显示,画面可能会留有黑边 |
- [setRenderRotation]():视频画面顺时针旋转角度
可选值 | 含义 |
---|---|
0 | 不旋转 |
1 | 顺时针旋转90度 |
2 | 顺时针旋转180度 |
3 | 顺时针旋转270度 |
步骤 6: 暂停播放
对于直播播放而言,并没有真正意义上的暂停,所谓的直播暂停,只是画面冻结和关闭声音,而云端的视频源还在不断地更新着,所以当您调用 resume 的时候,会从最新的时间点开始播放,这是和点播对比的最大不同点(点播播放器的暂停和继续与播放本地视频文件时的表现相同)。
// 暂停
this.$refs.livePlayer.pausePlayerAudio({}, ret => {
console.log(ret);
});
this.$refs.livePlayer.pausePlayerVideo({}, ret => {
console.log(ret);
});
// 恢复
this.$refs.livePlayer.resumePlayerAudio({}, ret => {
console.log(ret);
});
this.$refs.livePlayer.resumePlayerVideo({}, ret => {
console.log(ret);
});
步骤 7: 结束播放
this.$refs.livePlayer.stopPlay({}, ret => {
console.log(ret);
});
步骤 8: 屏幕截图
通过调用 [snapshot]() 您可以截取当前直播画面为一帧屏幕通过 setLivePlayerListener 的 [onSnapshotComplete]() 回调截屏图片,此功能只会截取当前直播流的视频画面,如果您需要截取当前的整个 UI 界面,请调用 iOS 的系统 API 来实现。
this.$refs.livePlayer.setLivePlayerLitener({}, ret => {
if (ret.hasOwnProperty('eventType')) {
if ('onSnapshotComplete' == ret.eventType) {
if (ret.hasOwnproperty('image')) {
// 处理截图
}
}
}
});
this.$refs.livePlayer.snapshot({}, ret => {
console.log(ret);
});
延时调节
腾讯云 SDK 的直播播放功能,并非基于 ffmpeg 做二次开发, 而是采用了自研的播放引擎,所以相比于开源播放器,在直播的延迟控制方面有更好的表现,我们提供了三种延迟调节模式,分别适用于:秀场,游戏以及混合场景。
- 三种模式的特性对比
控制模式 | 卡顿率 | 平均延迟 | 试用场景 | 原理描述 |
---|---|---|---|---|
极速模式 | 较流畅偏高 | 2s- 3s | 美女秀场(冲顶大会) | 在延迟控制上有优势,适用于对延迟大小比较敏感的场景 |
流畅模式 | 卡顿率最低 | >= 5s | 游戏直播(企鹅电竞) | 对于超大码率的游戏直播(例如绝地求生)非常适合,卡顿率最低 |
自动模式 | 网络自适应 | 2s-8s | 混合场景 | 观众端的网络越好,延迟就越低;观众端网络越差,延迟就越高 |
- 三种模式的对接代码
// 自动模式
this.$refs.livePlayer.setCacheParams({
minTime: 1,
maxTime: 5
}, ret => {
console.log(ret);
});
// 极速模式
this.$refs.livePlayer.setCacheParams({
minTime: 1,
maxTime: 1
}, ret => {
console.log(ret);
});
// 流畅模式
this.$refs.livePlayer.setCacheParams({
minTime: 5,
maxTime: 5
}, ret => {
console.log(ret);
});
// 设置完成之后再启动播放
更多功能
- 基础美颜
- 背景音乐
- 聊天、弹幕、点赞、送礼、打赏等
扫码添加, 获取技术支持:
微信号: ruanyunkeji006