Web直播之HTTP-FLV协议：flv.js

视频直播服务目前支持3种直播协议：RTMP、HLS、HTTP-FLV。
本文主要讲解在 Vue 项目中如何使用 flvjs 播放器播放 flv 流。

Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。

1.准备工作

cnpm install --save flv.js

2.代码实战

<template>
  <div id="app">
    <video id="videoElement"></video>
  </div>
</template>

<script>
import flvjs from 'flv.js'

export default {
  data() {
    return {
      flvPlayer: null
    }
  },
  methods: {
    /**
     * @description 新建flv实例
     */
    createFlvPlayer() {
      if (flvjs.isSupported()) {
        const videoElement = document.getElementById('videoElement')
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          url: 'flv视频拉流地址'
        })
        
        this.flvPlayer.attachMediaElement(videoElement)
        this.flvPlayer.load()
        this.flvPlayer.play()
      }
    },

    /**
     * @description 停止混流播放并移除直播流抓取
     * (注：离开并重新进入当前路由，观察Network，可知该操作的必要性)
     */
    pausemix() {
      this.flvPlayer.pause()
      this.flvPlayer.unload()
      this.flvPlayer.detachMediaElement()
      this.flvPlayer.destroy()
      this.flvPlayer = null
    }
  },
  mounted() {
    this.createFlvPlayer()
  },
  beforeDestroy() {
    this.pausemix()
  }
}
</script>

3.解决问题

Q1: 客户端采集数据，向媒体服务器推流；前端播放器从媒体服务器拉流。跨部门联调停滞时，前端如何力证播放器的可用性？

• 能用VLC播放器播放的视频流，不代表浏览器也能正常接收并播放。
  VLC 是一款自由、开源的跨平台多媒体播放器及框架,可播放大多数多媒体文件。

• Fiddler + OBS

  1. 用Fiddler代理页面的推流接口，由本地控制推流；
  2. 用OBS工具，给媒体服务器提供的推流地址推流，内容为捕获当前显示器；
  3. 页面播放器获取拉流地址，若播放器能正常看到显示器的动态，即可证明播放器是可用的。

• chrome://media-internals
  浏览器的音视频debug，可以打印当前播放视频的日志。
  

参考文档

• flv.js