前言
小程序的实时音视频播放需要先去微信开发者平台开通权限,「开发」-「接口设置」中自助开通该组件权限。
类目属性如下:
组件属性如下:
mode子属性:
orientation子属性:
object-fit子属性:
sound-mode子属性:
picture-in-picture-mode子属性:
referrer-policy子属性:
referrer-policy子属性:
一、实时音视频播放
1.js代码
Page({ onReady(res) { this.ctx = wx.createLivePlayerContext('player') }, statechange(e) { console.log('live-player code:', e.detail.code) }, error(e) { console.error('live-player error:', e.detail.errMsg) }, bindPlay() { this.ctx.play({ success: res => { console.log('play success') }, fail: res => { console.log('play fail') } }) }, bindPause() { this.ctx.pause({ success: res => { console.log('pause success') }, fail: res => { console.log('pause fail') } }) }, bindStop() { this.ctx.stop({ success: res => { console.log('stop success') }, fail: res => { console.log('stop fail') } }) }, bindResume() { this.ctx.resume({ success: res => { console.log('resume success') }, fail: res => { console.log('resume fail') } }) }, bindMute() { this.ctx.mute({ success: res => { console.log('mute success') }, fail: res => { console.log('mute fail') } }) } })
2.wxml代码
<view class="page-body"> <view class="page-section tc"> <live-player id="player" src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" /> <view class="btn-area"> <button bindtap="bindPlay" class="page-body-button" type="primary">播放</button> <button bindtap="bindPause" class="page-body-button" type="primary">暂停</button> <button bindtap="bindStop" class="page-body-button" type="primary">停止</button> <button bindtap="bindResume" class="page-body-button" type="primary">恢复</button> <button bindtap="bindMute" class="page-body-button" type="primary">静音</button> </view> </view> </view>
3.效果
注意https://domain/pull_stream为推拉流地址。