当前位置:网站首页>微信小程序-腾讯云即时通信 IM 小程序直播(一)
微信小程序-腾讯云即时通信 IM 小程序直播(一)
2022-08-11 05:22:00 【别找bug,我就是bug】
一、这里我们先讲讲使用腾讯云直播 流程
请先将1.2.3的都去简单的过一遍 就是组件的参数了解一下
1.准备推流跟拉流地址 (登录腾讯云在控制台 在直播工具箱 找到创建推流跟拉流)推流跟拉流的地址是不一样的 这里需要注意 详细步骤 https://cloud.tencent.com/document/product/454/7915
2.需要去到绑定小程序的公众平台添加相关直播的类目 比如你是做那类直播的 详细步骤https://cloud.tencent.com/document/product/454/12518
3.以上都做好之后 我们就可以使用
3.1.<live-pusher> (推流组件 也就是直播)
3.2.<live-player>(拉流组件 也就是观看直播)
3.3.<mlvb-live-room>
详细步骤请看这里 https://cloud.tencent.com/document/product/454/12518
4.讲一下这两个组件的几个重要属性
4.1<live-pusher> 推流组件
url:'推流地址' //这个是展示的推流地址 是我们第一步创建的推流地址 放在这里就好
mode:'SD' //这里有四个选择 SD,HD,FHD,RTC 。 SD、HD 和 FHD 主要用于直播类场景, RTC 则主要用于双向视频通话或多人视频通话场景
autopush:false 是否自动启动推流 //这个就是如果为 true 主播点击开播 那就是直接开播了 false 的话 我们就可以先预览一下直播效果 如果合适我们在直接开播
enable-camera:true //是否开启摄像头 默认开启
debug:true //是否开启调试 我们在开发中 开启这个方便我们观察 直播是否正常 上线需关闭
4.2<live-player> 拉流组件
url:'拉流地址' //这个是展示的拉流地址 是我们第一步创建的拉流地址 放在这里就好
mode:'live' //live 模式主要用于直播类场景 RTC 则主要用于双向视频通话或多人视频通话场景
autoplay:false //进入直播间是否自动播放 一般都是自动播放的
background-mute:false //当微信切到后台时,是否关闭播放声音
debug:true //是否开启调试 我们在开发中 开启这个方便我们观察 观看直播是否正常 上线需关闭
二、现在我们来看看 代码如果实现
提示:做一个功能的时候 我们最好先自己写一个dome测试一下 通了在放在咱自己的项目里面去 这样才不会眼花缭乱
1.这个是一个简单的创建直播的页面 其实还有其他的 这根据你们业务需求来 当我们点击直播的时候 这中间过程是需要请求后端接口 将房间名称以及其他业务需求传过去 然后后端会返回房间id 推流地址给你 这里我就不做了 因为我知道推流地址了 就直接拿来用了
index.wxml文件
<view class="box">
<input class="input" value='{
{roomData.roomName}}'
type="text" placeholder="需要创建的房间名称" maxlength='30' />
<button class="mini-btn" type="primary"
size="mini" bindtap='setupLive'>开播</button>
</view>
index.js文件
Page({
data: {
roomData: {
roomNumberID: 110,//房间号
roomName: '',//房间名称
userNameID: 2,//用户id
userName: '小明',//用户名称,
}
},
//开播
setupLive() {
// 跳转到直播页面
wx.navigateTo({
url: `/pages/room-live/index?roomData=` + this.data.roomData,
});
},
})
2.直播页面 直播展示 看你们怎么设计 如果直播是全屏的画 我们那些按钮采用cover-view 这个组件悬浮上去 比如:暂停直播、美颜等级调整、关闭直播等等这些操作
room.wxml
<view class="box">
<live-pusher id="livePlayerID" src="{
{roomData.roomUrl}}" mode="SD"
autopush='{
{pusher.autopush}}' enable-camera='true' auto-focus='true'
orientation="orientation" beauty='5' whitenes='5' device-position='front'
waiting-image='https://profile.csdnimg.cn/B/F/D/2_qingqingyang6'
background-mute class="live-playe"></live-pusher>
<view>
<text>这里做一些其他操作</text>
</view>
<cover-view style="position: fixed; top: 0; left: 0;">
悬浮在页面上 比如:暂停直播、美颜等级调整、关闭直播等等这些操作
</cover-view>
</view>
room.js
Page({
data: {
roomData: {
roomNumberID: 110,//房间号
roomName: '美好的一天直播间',//房间名称
userNameID: 2,//用户id
userName: '小明',//用户名称,
roomUrl: 'rtmp://.....', //推流地址
},
livePlayer: null,
},
onLoad(e) {
<!-- 这里是初始化id -->
this.data.livePlayer = wx.createLivePusherContext('livePusherID');
this.data.livePlayer.start({})
},
})
以上是简单的直播流程
3.观看直播间页面 其实跟直播的差不多 相对比较简单
see-rome.wxml
<view>
<live-player src="rtmp://....." mode="live"
autoplay='false' muted="false" orientation="orientation"
background-mute object-fit="contain"
debug id="livePlayerID" class="live-playe"></live-player>
</view>
see-rome.js
Page({
onLoad(e) {
<!-- 这里是初始化id -->
let player = wx.createLivePlayerContext('livePlayerID');
player.play();
},
})
一个简单的dome就完成了 其实有很多需要注意的 比如直播的时候实在pc端直播还是用什么第三方的 如果用第三方的 那我们前端就只需要做拉流 就不需要做推流了 拉流就比较简单
下期就讲一下 我们观看直播间的时候 给主播点赞 在直播间发送消息 直播间商品展示 送礼物等 腾讯云的即时通信IM
边栏推荐
猜你喜欢
随机推荐
GBase 8a MPP Cluster产品高级特性
GBase 8s中IO读写方法
分布式日志存储架构代码实践
快照读下mvcc实现避免幻读
NodeRed系列—创建mqtt broker(mqtt服务器),并使用mqttx进行消息发送验证
LAMP架构介绍及配置
MGRE实验
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
Mobx--store状态管理工具
BGP联邦实验
07-JS事件:事件类型、事件对象、事件传播、事件委托
08-JS对象、原型及原型链
sand和mana两大元宇宙游戏,哪个更有潜力?
查看电脑配置信息
03-npm安装包详解,解决npm下载慢的问题,引入nrm等
Koa的使用,搭建本地服务器(必会技能)
Object.defineProperty新增/修改属性数据代理
内存泄露与内存溢出
Nodered系列—使用mqtt写入国产数据库tDengine
海外媒体发稿,要考虑到不同的民族文化特点