preface

Recently, the company is doing small program projects in the community, using Uniapp (used project), but there are not many problems. I have used Taro and MPvue before. I did this UNIapp App last year, but I don’t know much about the small program, so I thought the video label would be ok. The video label does not support THE FLV format. Other formats may also suffer from lag and black frames

Then a search turned up live-player!

live-player

First, I will introduce the Settings for using live-player:

For the time being, it is only open to the following small programs of domestic subjects. It needs to pass category audit first, and then self-open the permission of this component in “Development” – “interface setting” in the small program management background. (Only the categories in the picture can use the wechat component, otherwise it cannot be opened)

You are advised to go to Tools > Video Service. For others, you will need to upload a license

Official use:

<live-player src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" />

Page({
  statechange(e) {
    console.log('live-player code:', e.detail.code)
  },
  error(e) {
    console.error('live-player error:', e.detail.errMsg)
  }
})
Copy the code

Bug & Tip

  1. The default width of live-Player is 300px and the height is 225px. You can set the width and height by WXSS.
  2. Currently not supported in developer tools.
  3. Related introduction and principle can refer to this article

Uniapp use:

<template> <view> <live-player src="http://********/gb28181/34020000001320000099.flv" autoplay @statechange="statechange" @error="error" background-mute sound-mode="speaker" mode="RTC" catchtouchmove style="width: 300px; height: 225px" /> </view> </template> <script> export default { data() { return { } }, methods: { statechange(e) { console.log('live-player code:', e.detail.code) switch (e.detail.code) { case 2004:break; Case 2103: console.log(" loading, please wait ") break; Case-2301: TOst (" Disconnected from remote service "); } }, error(e) { console.error('live-player error:', e.detail.errMsg) }, } } </script> <style> </style>Copy the code

Matters needing attention

In the process of use, no matter how you debug, in the micro channel development tools are seen in the black screen, do not square, do not square, generate two-dimensional code, with the real machine to see the effect, on the phone you will find that everything is easy to use! ^v^, hope to provide help to your development, have a question please leave a message exchange!