小程序接入监控视频流/直播视频流

前言

最近公司在做社区的小程序项目，用的uniapp（二手项目），坑倒是不多，之前用过taro和mpvue，这个uniapp我就去年做过App，小程序不是特别了解，以为video标签就可以了，然后一直黑屏，推流视频是flv的，度娘了一下，发现video标签不支持flv格式，其他格式也会出现卡顿和黑帧现象

后来一顿搜索发现了live-player这个东西！

live-player

首先介绍live-player使用设置：

暂只针对国内主体如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限。（只有图片中的类目可以使用该微信组件，否则无法开通）

建议选择 工具 > 视频客服 这个类目，其他的需要上传许可证

官方使用：

<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)
  }
})

Bug & Tip

1. live-player 默认宽度300px、高度225px，可通过wxss设置宽高。
2. 开发者工具上暂不支持。
3. 相关介绍和原理可参考此文章

uniapp使用：

<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("正在加载中，请稍后")
                  break;
                case -2301:
                  tost("和远程服务断开连接");
              }
            },
            error(e) {
              console.error('live-player error:', e.detail.errMsg)
            },
        }
    }
</script>

<style>

</style>

注意事项

在使用过程中，不管你怎么调试，在微信开发工具中看到的都是黑屏，不要方，千万不要方，生成二维码，用真机看效果，在手机上你就会发现一切都是好用的！^v^,希望对您的开发提供帮助，有问题请留言交流！