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

4,370 阅读1分钟

视频直播服务目前支持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: 控制台报错 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

原因:Chrome只允许用户对网页进行主动触发后才可自动播放音频和视频,防止开发者滥用自动播放功能而影响用户体验。
方案:为video标签设置muted属性,使它静音,则视频可自动播放,但没有声音;待用户在网页上有任意触发后,再将 muted 属性置为 false,或者,让用户手动播放音频。

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

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

  • Fiddler + OBS

    1. 用Fiddler代理页面的推流接口,由本地控制推流;
    2. 用OBS工具,给媒体服务器提供的推流地址推流,内容为捕获当前显示器;
    3. 页面播放器获取拉流地址,若播放器能正常看到显示器的动态,即可证明播放器是可用的。
  • chrome://media-internals
    浏览器的音视频debug,可以打印当前播放视频的日志。


参考文档