更新记录

3.0.0(2021-04-07)

  1. 推流保持屏幕常亮;
  2. (内测)增加调整推流界面大小功能;
  3. 升级推流底层SDK至版本8.5;

1.0.0(2020-08-19)

  1. 支持腾讯云直播推流;
  2. 摄像头切换;
  3. 支持基础美颜;
  4. 支持背景音乐控制
查看更多

平台兼容性

Android iOS
适用版本区间:4.4 - 11.0 适用版本区间:9 - 14

原生插件通用使用流程:

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


腾讯云直播推流器

该模块可以实现腾讯云直播推流服务,支持直播推流、暂停、继续、停止等基本控制,可以设置基础美颜,也可以支持背景音乐播放。

技术支持

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

快速开始

第一步: 腾讯云配置,这个步骤比较繁琐,可以联系我们上文中的客服进行指引

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

  1. 获取许可证

    • 如果还没有,可以点击"新增Licence"
    • 点击对应的licence条目, 展开许可证,复制"Key", 这个值为后文中的"key"; 复制LicenseUrl,这个值为后文中的"url";
  2. 使用地址生成器进行推流测试,复制地址生成器的地址,这个值为后文中的rtmpUrl

第二步: 开始使用模块

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

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

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'
    }
}
  1. 初始化模块

init({params})

初始化模块

var self = this;
this.$refs.livePusher.init({
    licence: self.licence,
    docPath: plus.io.convertLocalFileSystemURL('_doc')
});

第三步: 开始预览并推流

var self = this;
const {windowWidth, windowHeight} = uni.getSystemInfoSync();
self.playerWidth = windowWidth / 2;
self.playerHeight = windowHeight / 2;
this.$refs.livePusher.startPreview();

备注: 这里演示将宽度和高度设置为界面的宽高的一半,您可以根据需要自定义

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

备注: 这里的rtmlUrl为前文的推流地址

第四步: 暂停、恢复拉流播放

this.$refs.livePusher.pause();
this.$refs.livePusher.resume();

第五步: 停止拉流并停止摄像头预览

this.$refs.livePusher.stop();
this.$refs.livePusher.stopPreview();

第六步: 直播事件管理

可以通过

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

监听各种直播事件

也可以通过移除监听,来停止事件监听

this.$refs.livePusher.removePusherEventListener();

第七步: 切换摄像头

this.$refs.livePusher.switchCamera();

可以切换前后摄像头

第八步: 背景音乐,支持播放、暂停、恢复停止等操作

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

备注: 背景音乐,IOS支持https,Androi只能支持http协议

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

更多功能

联系我们获取更能多增值功能

  • 渲染模式
  • 渲染角度
  • 声音控制

隐私、权限声明

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

Android: "android.permission.INTERNET", "android.permission.ACCESS_NETWORK_STATE", "android.permission.ACCESS_WIFI_STATE", "android.permission.SYSTEM_ALERT_WINDOW", "android.permission.WRITE_EXTERNAL_STORAGE", "android.permission.READ_EXTERNAL_STORAGE" iOS: 无

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

插件使用腾讯云移动直播SDK会采集数据,详情可参考: https://cloud.tencent.com/document/product/454

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

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