一、这里我们先讲讲使用腾讯云直播 流程
请先将1.2.3的都去简单的过一遍 就是组件的参数了解一下
1.准备推流跟拉流地址(登录腾讯云在控制台 在直播工具箱 找到创建推流跟拉流)推流跟拉流的地址是不一样的 这里需要注意 详细步骤 /document/product/454/7915
2.需要去到绑定小程序的公众平台添加相关直播的类目 比如你是做那类直播的 详细步骤/document/product/454/12518
3.以上都做好之后 我们就可以使用
3.1.<live-pusher> (推流组件 也就是直播)
3.2.<live-player>(拉流组件 也就是观看直播)
3.3.<mlvb-live-room>
详细步骤请看这里 /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,//用户iduserName: '小明',//用户名称,}},//开播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='/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,//用户iduserName: '小明',//用户名称,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