fiv.js实现 flv格式监控视频流拉码(前端)

最近项目有个新需求，需要实时直播工厂监控，与后端沟通交流也查询资料确定了fiv方案，优点在于相较于flash插件系列方案更独立（何况flash都被众大浏览器抛弃了），相较于hls延迟更低。

首先第一步

npm i flv.js

第二步 在自己的页面引入fiv.js

import flvjs from 'flv.js'

接下来就是在页面写代码 上完整代码
template部分：

    <el-dialog :title="title" :visible.sync="videoDialog" width="60%" @close="videoDialogClose">
      <div class="flex-f">
        <video width="70%" height="70%" id="myVideo" preload="auto" muted type="rtmp/flv"></video>
      </div>
    </el-dialog>

script部分：

import flvjs from 'flv.js'
export default {
    // 打开dialog弹出框
    videoDialogFn(item) {
      this.videoDialog = true
      this.title = item.title
    // 传入后端提供的fiv地址
      this.createdPlay(item.src)
    },
    createdPlay(src) {
      this.$nextTick(() => {
        if (flvjs.isSupported()) {
          var videoDom = document.getElementById('myVideo')
          // 创建一个播放器实例
          this.player = flvjs.createPlayer({
            type: 'flv', // 媒体类型，默认是 flv,
            isLive: true, // 是否是直播流
            hasAudio: true, // 是否有音频
            hanVideo: true, // 是否有视频
            url: src, // 流地址
          }
            , {
              enableWorker: false, //不启用分离线程
              enableStashBuffer: false, //关闭IO隐藏缓冲区
              autoCleanupSourceBuffer: true, //自动清除缓存
              lazyLoad: false,
            }
          )
          this.player.attachMediaElement(videoDom)
          this.player.load()
          this.player.play()
            // flv自带检测错误api
          this.player.on(flvjs.Events.ERROR, (errType, errDetail) => {
            if (errType = 'NETWORK_ERROR') return this.$message.error('网络错误')
            if (errType = 'MEDIA_ERROR') return this.$message.error('媒体错误')
            if (errType = 'OTHER_ERROR') return this.$message.error('其他')
          })
        }
      });
    },
       // 关闭弹出框的时候销毁
    videoDialogClose() {
      if (!this.player) return
      this.player.pause()
      this.player.unload()
      this.player.detachMediaElement()
      this.player.destroy()
      this.player = null
    }
}

遇到解决的问题也蛮多的，比如cors跨域问题，视频空白问题，视频卡顿问题，欢迎交流