1. Add a live broadcast component

Official development documentation

Mpvue, for example

//app.json
"plugins": {
  "live-player-plugin": {
    "version": "1.0.11".    "provider": "wx2b03c6e691cd7370"
 } } Copy the code

You can view the current version number and the latest version number in wechat Developer Tools – Details – Basic Information – Plug-in information

2. Jump to the live broadcast room

NavigateTo, for example

letRoomId = [live roomId]// Enter the specific room number
let customParams = encodeURIComponent(JSON.stringify({
  path: 'pages/index/index'.  pid: 1 
})) // Developers carry custom parameters on the webcast page path
let livePath = 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin' wx.navigateTo({Wx2b03c6e691cd7370 is the appID of the livestream component, which cannot be modified  url: `${livePath}? room_id=${roomId}&custom_params=${customParams}` }) Copy the code

3. Obtain the list of live broadcast rooms and the status of live broadcast

Live call quota 500 times/day, suggest developers do their own cache, to the back-end processing!

let livePlayer = requirePlugin('live-player-plugin')
// Return to live status immediately after the first acquisition, and poll for live status at an interval of 1 minute or slower
const roomId = xxx / / the room id
livePlayer.getLiveStatus({ 
    room_id: roomId
}).then(res= > {  // 101: live, 102: not started, 103: ended, 104: banned, 105: suspended, 106: abnormal, 107: expired  const liveStatus = res.liveStatus  console.log('get live status', liveStatus) }).catch(err= > {  console.log('get live status', err) }) Copy the code

4. Live subscription

Subscribe for unaired shows

// Add subscribe component to page JSON file
usingComponents: {
    subscribe: 'plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe'
}
Copy the code
// Write the live room ID<subscribe room-id="[Live room ID]"></subscribe>
Copy the code

5. Mpvue – config – loader hole

The mpvue-config-loader plugin simplifies the config configuration of the page, but when the usingComponents traversal adds a/to all attribute values, it does not get the SUBSCRIBE component, so we will make some changes to the mpvue-config-loader plugin.

/ / node_modules/mpvue - config - loader/index, js 46-48
// Comment out 3 lines, or drop 47 lines
if (parentKey === 'usingComponents' && !path.isAbsolute(node.value)) {
  return ` /${node.value}`
}
Copy the code

6. Obtain share card link parameters

Using mpvue as an example, add the following code to the./ SRC/app.vue file

onShow(options) {
  // The shared card entry scenario calls the getShareParams interface to get the following parameters
  if (options.scene == 1007 || options.scene == 1008 || options.scene == 1044) {
      livePlayer.getShareParams().then(res= > {
          console.log('get room id', res.room_id) / / room number
 console.log('get openid', res.openid) / / users openid  console.log('get share openid', res.share_openid) // Share openID  console.log('get custom params', res.custom_params) // Customize parameters  }).catch(err= > {  console.log('get share params', err)  })  } } Copy the code

You can collect information about users and sharer who enter the live broadcast room

7. Access to the broadcast room by other means

Broadcast room small program code

// type=9
"plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin? Room_id =[Live room ID]&type=9"

// Add custom parameter custom_params
"... &custom_params=encodeURIComponent(JSON.stringify(custom_params))"
Copy the code

Public number small card

// type=10 cards
"plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin? Room_id =[Live room ID]&type=10"

// Add custom parameter custom_params
"... &custom_params=encodeURIComponent(JSON.stringify(custom_params))"
Copy the code