flv 的 WebSocket 和 HTTP 协议与基础实现

flv 同时支持 WebSocket 和 HTTP 两种传输方式,幸运的是,flv.js 也同时支持这两种协议。
 
选择用 http 还是 ws,其实功能和性能上差别不大,关键看后端同学给我们什么协议吧。我这边的选择是 http,前后端处理起来都比较方便。
 
接下来我们介绍 flv.js 的具体接入流程,官网在这里
 
假设现在有一个直播流地址:http://test.stream.com/fetch-media.flv,第一步我们按照官网的快速开始建一个 demo:
flv代码
import flvjs from 'flv.js'
if (flvjs.isSupported()) {
  var videoEl = document.getElementById('videoEl')
  var flvPlayer = flvjs.createPlayer({
    type: 'flv',
    url: 'http://test.stream.com/fetch-media.flv'
  })
  flvPlayer.attachMediaElement(videoEl)
  flvPlayer.load()
  flvPlayer.play()
}
首先安装 flv.js,代码的第一行是检测浏览器是否支持 flv.js,其实大部分浏览器是支持的。接下来就是获取 video 标签的 DOM 元素。flv 会把处理后的 flv 流输出给 video 元素,然后在 video 上实现视频流播放。
 
接下来是关键之处,就是创建 flvjs.Player 对象,我们称之为播放器实例。播放器实例通过 flvjs.createPlayer 函数创建,参数是一个配置对象,常用如下:
 
type:媒体类型,flv 或 mp4,默认 flv
isLive:可选,是否是直播流,默认 true
hasAudio:是否有音频
hasVideo:是否有视频
url:指定流地址,可以是 https(s) or ws(s)
上面的是否有音频,视频的配置,还是要看流地址是否有音视频。比如监控流只有视频流没有音频,那即便你配置 hasAudio: true 也是不可能有声音的。
 
播放器实例创建之后,接下来就是三步走:
 
挂载元素:flvPlayer.attachMediaElement(videoEl)
加载流:flvPlayer.load()
播放流:flvPlayer.play()
基础实现流程就这么多,下面再说一下处理过程中的细节和要点。

【本文关键词】:flv的协议