The prefix

1. The live broadcast function of the mini program can only be used if the service category in the wechat public platform is added with a live broadcast permission. 2. When applying for an account, the account must be an enterprise account. Personal mini program does not have this permission. 3. When adding a class, be sure to follow the documentation. Otherwise, I won't be able to access itCopy the code

Specific steps: wechat public platform -> Login -> Settings -> Basic Settings -> Service category (details on the right)-> Add Category -> After approval -> Development Management -> Interface Settings -> Real-time Audio and video streaming open

!!!!!!!!! Note that live-player is not available on the wechat developer tool, and only works on the real machine

Live – player official documentation: developers.weixin.qq.com/miniprogram…

You can then write the code in the project (the most basic version)

<live-player class="myLivePlayer" src="{{livePlayerUrl}}" mode="live" object-fit="contain" autoplay muted="true"> </live-player> Live-player only supports FLV, RTMP format autoplay: automatic playback object-fit :contain image Long side will fill the screen, short side will be filled with black. Mode: live broadcast. RTC live calls, a low-latency mode; a live switch must be used otherwise the video will be mutedCopy the code

At this point, as long as your livePlayerUrl is correct, the video will already play automatically

Add screenshots

onReady() { this.ctx = wx.createLivePlayerContext('player') }, // screenShoot(e) {console.log(" start shooting ") wx.showtoast ({icon: "loading", title: "shooting"}); // livePlayerContext.snapshot('raw'); Let that = this // Get the current Settings of the user. Wx.getsetting ({success(res) {if (res.authSetting[' scope.writephotosalbum ']) {that.saveimg ();  } else if (res.authSetting['scope.writePhotosAlbum'] === undefined) { wx.authorize({ scope: 'scope.writephotosalbum ', success() {// Save the image that.saveimg (); AuthConfirm ()}} else {// authConfirm()}}})}, SaveImg () {// Call live-player API to take a screenshot // this.ctx.snapshot('compressed') .then(data => { if (data) { wx.saveImageToPhotosAlbum({ filePath: Data. tempImagePath, success(res) {console.log(" saved successfully ", res) wx.showToast({title: 'screenshot saved to mobile album ', icon: 'none', }) } }) } }) .catch(err => { console.log("err", err); })}, // authConfirm() {let that = this wx.showModal({content: 'You don't have permission to save images, do you want to set it to open? ', confirmText: "confirmText ", cancelText:" confirmText ", success: function (res) {if (res.confirm) {wx.openSetting({success: (res) => {if (res.authSetting[' scope.writepHotosalbum ']) {// Save the image.saveimg (); } else {wx. ShowToast ({title: 'you have no authorization, cannot save to photo album, icon:' none '})}}})} else {wx. ShowToast ({title: 'You are not authorized to save to album ', icon:' None '})}}}); },Copy the code

Full screen and turn off the full screen API

Catchtap =”onVideoTap” in live-player

Note: There will be a bit of lag in the screen during the full-screen switch. After investigation, it is found that the page has DOM nodes other than the live-player. The solution is to hide other DOM nodes of the page first when the full-screen operation is performed or the full-screen operation is turned off. After the operation is complete, you can restore itCopy the code
OnVideoTap (e) {console.log(" Click on the video "); const { fullScreen, } = this.data; this.setData({ fullScreen: true, }) if (! fullScreen) { this.bindFullScreen() } else { this.unfullScreen() } }, UnfullScreen () {this.ctx.exitFullscreen ({success: () => {this.setData({fullScreen: false,})}}); Console. log(" turn off full screen "); {}, / / open full-screen bindFullScreen () this. CTX. RequestFullScreen ({direction: 90, the success: () = > {enclosing setData ({fullScreen: true, }) } }); Console. log(" turn on full screen "); },Copy the code

Play and stop play APIS

OnHide () {// Remember to stop the video when the page is hidden. // Stop the video bindStop() {this.ctx.stop({success: res => { this.setData({ livePlayerUrl: null }) console.log('stop success') }, fail: Res => {console.log('stop fail')}})}, // Play video bindPlay() {this.ctx.play({success: res => { console.log('play success') }, fail: res => { console.log('play fail') } }) },Copy the code

Live-player slides to switch to live streams

<live-player capture-bind:touchstart='onTouchStart' capture-catch:touchend='onTouchEnd' src="{{livePlayerUrl}}" Mode ="live" object-fit="contain" > </live-player> livePlayerUrl: current video playback source liveUrlList: video playback source array OnTouchStart: function (e) {this.setData({movingX: e.changedTouches[0].clientX, movingY: e.changedTouches[0].clientY }) console.log('start', e.changedTouches[0]); }, // onTouchEnd: function (e) {console.log('End', e.touches [0]); let { clientX, clientY } = e.changedTouches[0]; let { movingX, movingY, liveUrlList, livePlayerIndex } = this.data; Let key = "// if the current x-point is larger than the x-point at the start of the slide. If (clientX > movingX && Clientx-MovingX > 50 && livePlayerIndex! == 0 ) { key = 'left'; } else if (movingX > clientX && movingX - clientX > 50 && liveUrlList.length && livePlayerIndex ! Liveurllist.length-1) {// If the slide starts with a larger X point than the current X point. And more than 50 (set) sliding distance. / / live and live the current source is not a final source for right sliding key = 'right'} else {return} the console. The log (' obj. CurrentTarget. Dataset. Key, obj.currentTarget.dataset.key ); This. SwitchLive (key)}, // Switch the live source event switchLive(key) {let {livePlayerUrl, liveUrlList, livePlayerIndex} = this.data; This.setdata ({livePlayerUrl: null,}) wx.showtoast ({icon: "loading", title: "toggle video ", duration: 2000, mask: true}); if (key === 'left') { console.log('left'); this.setData({ livePlayerUrl: liveUrlList[livePlayerIndex - 1], livePlayerIndex: livePlayerIndex - 1 }) } else { console.log('right'); this.setData({ livePlayerUrl: liveUrlList[livePlayerIndex + 1], livePlayerIndex: livePlayerIndex + 1 }) } },Copy the code