备注:公司需要做一个微信小程序,本人属于微信小程序小白,从未做过微信小程序,于是开始了我的学习之路
现在开始我的第一个功能模块:音频直播,经过和后台同事们的沟通与交流,决定使用腾讯云直播,来实现该功能。(后台接通腾讯云直播,给我推流拉流的地址)
尤其注意:使用该功能之前,要保证你的微信小程序拥有该权限,根据官网给出的解释,我理解的是:暂只针对国内部分类型的小程序开放,需要先通过类目审核,再在小程序管理后台,「开发」-「接口设置」中自助开通该组件权限。
Step1:在 live.xml中 ,添加直播控件live-player、live-pusher
<live-player wx:if="{{!isAnchor && playerUrl}}" id="playerView"
class="playerView" src="{{playerUrl}}" mode="live"
bindstatechange="playerStateChange" binderror="playerError" />
<live-pusher wx:if="{{isAnchor && pushUrl}}" id="pusherView"
url="{{pushUrl}}" mode="live" class="playerView"
bindstatechange="pusherStateChange" enable-camera="{{false}}" />
因为我的是音频直播,所以设置enable-camera="{{false}}" ,各位童鞋可以自行按照官网给出的参数去设置你想要的功能
live-player
基础库 1.7.0 开始支持,低版本需做兼容处理。
实时音视频播放。相关api:wx.createLivePlayerContext
live-pusher
基础库 1.7.0 开始支持,低版本需做兼容处理。
实时音视频录制。需要用户授权 scope.camera
、scope.record
。
Step2:在 live.js中 ,添加对推流、拉流的控制方法,用于点击事件调用
onReady(res) {
this.ctLivePlayer = wx.createLivePlayerContext('playerView');
this.ctLivePusher = wx.createLivePusherContext('pusherView')
},
/**==============Player事件开始=============**/
playerStateChange(e) {
console.log('live-player code:', e.detail.code)
},
playerError(e) {
console.error('live-player error:', e.detail.errMsg)
},
bindPlayerPlay() {
this.ctLivePlayer.play({
success: res => {
console.log('play success')
},
fail: res => {
console.log('play fail', res)
}
})
},
bindPlayerPause() {
console.log('进入暂停')
this.ctLivePlayer.pause({
success: res => {
console.log('pause success')
},
fail: res => {
console.log('pause fail')
}
})
},
bindPlayerStop() {
console.log('进入停止')
this.ctLivePlayer.stop({
success: res => {
console.log('stop success')
},
fail: res => {
console.log('stop fail')
}
})
},
bindPlayerResume() {
console.log('进入恢复')
this.ctLivePlayer.resume({
success: res => {
console.log('resume success')
},
fail: res => {
console.log('resume fail')
}
})
},
bindPlayerMute() {
console.log('进入静音')
this.ctLivePlayer.mute({
success: res => {
console.log('mute success')
},
fail: res => {
console.log('mute fail')
}
})
},
/**==============Player事件结束=============**/
/**==============Pusher事件开始=============**/
pusherStateChange(e) {
console.log('live-pusher code:', e.detail.code)
},
bindPusherStart() {
this.ctLivePusher.start({
success: res => {
console.log('start success')
},
fail: res => {
console.log('start fail')
}
})
},
bindPusherPause() {
this.ctLivePusher.pause({
success: res => {
console.log('pause success')
},
fail: res => {
console.log('pause fail')
}
})
},
bindPusherStop() {
this.ctLivePusher.stop({
success: res => {
console.log('stop success')
},
fail: res => {
console.log('stop fail')
}
})
},
bindPusherResume() {
this.ctLivePusher.resume({
success: res => {
console.log('resume success')
},
fail: res => {
console.log('resume fail')
}
})
},
bindPusherSwitchCamera() {
this.ctLivePusher.switchCamera({
success: res => {
console.log('switchCamera success')
},
fail: res => {
console.log('switchCamera fail')
}
})
},
/**==============Pusher事件结束=============**/
Step3:通过上面的两个步骤,只要你的推流、拉流的地址是正确的,你就能正常直播。如果出现了什么问题,也能通过错误码,对照官网给出的错误码对应的错误信息解释得到答案。
注意:只能在真机上调试,模拟器是无法进行直播操作的
也许,可能会出现以下错误情况:
1、小程序没有开通该权限,无法使用该功能;
2、推流、拉流地址错误;
文章摘自:
https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html
https://developers.weixin.qq.com/miniprogram/dev/component/live-pusher.html
网友评论