Vue实现摄像头视频分屏, 使用flv.js接收rtmp/flv视频流

一、业务需求和调研

1. 现有的平台系统播放实时视频。

因为用户电脑都是Linux系统，无法直接使用海康前端SDK，讨论决定由后台推视频流，简单调研后发现最流行的是flv，而且有B站开源的flv.js适配。前期后台推给我RTMP前缀的视频流，我尝试使用video.js，西瓜视频等都失败了，后来后端改为http前缀的，对接成功。这里还要讲一下flv.js的文档, 不知道是我理解有误, 还是文档没有更新, 还是让人一身冷汗的:

第二句讲: FLV实时流在所有浏览器无法工作

但是点进去livestream.md:

这里又讲: 根据IO限制, flv.js目前在各类新版浏览器支持HTTP FLV实时流

总而言之，即便是chrome已经不支持flash，但是用B站这款flv.js还是可以实现在现代浏览器播放HTTP FLV视频流的。

2. 分屏，先点击分屏，然后选择需要播放的视频设备，在该分屏播放对应的视频流。

3. 开启新的视频的同时，以及离开本页面时要关闭之前的视频流，以减轻服务器压力。这一点跟主流需求还是很不同的，因为通常都会理解为在分屏可以同时观看多个摄像头的实时画面，所以即使我已经实现了需求，但还是感觉分屏在这里是有些鸡肋的。

二、实现效果

这里展示4屏和6屏，1屏就不用展示了，下面代码中还有9屏和16屏可选，目前我这里用不到，就先注释掉了。

三、鸣谢

感谢二位大佬的解决方案，这是我实现本业务需求的基础：

ID： 抄一下你代码

全网最详细！vue中使用flv.js 播放直播监控视频流

ID： 三体人1379号

vue实现视频播放1，4，6，9，16宫格布局

四、代码实现

1. 子组件, 也就是视频播放器，您也可以根据不同的视频流资源配置不同的播放器：

<template>
  <div :class="{ player: true, selected: isSelected }" @click="handlePlayerClick">
    <!-- {
  
  { title }}号窗口 -->
    <video
      class="cell-player-1"
      ref="videosmallone"
      preload="auto"
      muted
      controls
      autoplay
      type="rtmp/flv"
    >
      <source src="" />
    </video>
  </div>
</template>

<script>
import flvjs from 'flv.js'

export default {
  props: {
    title: {
      type: Number,
      default: 1
    },
    activePlayer: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      player: null,
      loading: false,
      videoUrl: '',
      videoToken: ''
    }
  },
  beforeUnmount() {
    if (this.player) {
      this.player.pause()
      this.player.unload()
      this.player.detachMediaElement()
      this.player.destroy()
      this.player = null
    }
  },
  computed: {
    // Use a computed property to determine if the player is active
    isSelected() {
      return this.activePlayer === this.title
    },
    playerClass() {
      return ['player', `cell-player-1`, { active: this.title === this.activePlayer }]
    }
  },
  methods: {
    handlePlayerClick() {
      // 在点击事件中调用父组件的方法，传递数据
      this.$emit('playerClick', this.title)
      // console.log('class', this.playerClass)
    },
    openVideo(data) {
      // Implement this method to update the data in the player component
      // Use the passed data to update the player's state or perform other operations
      // console.log(`Settin