前端实现播放实时监控视频笔记(hls http-flv)

前言

最近被安排做一个数据可视化的项目，其中包括视频直播（实时监控）功能，于是只懂用 <video> 播放视频文件的我开始学习关于直播、实时播放等知识，在此做下笔记，并转发一些参考性文章。

前置知识

直播协议

在选择工具之前首先要先了解直播的相关原理，这里推荐：

• 直播协议RTMP、HLS、HTTP FLV - Gopherzhang
  • 介绍推流、拉流和常用协议
• 《理解RTMP、HttpFlv和HLS的正确姿势》 - 北塔资讯
  • 介绍了常用的三个协议的来龙去脉
• 流媒体直播播放三大件PK：RTMP/HLS/HTTP-FLV - 大牛直播SDK
  • 作为对协议概念的补充

直播源

对于视频直播，前端使用的也是一个作为直播源的 url 地址，这个地址用于获取直播源的文件，地址是不变的，而文件内容是随着直播而变化的。

客户端每隔一段时间就会重新获取直播源。

以 HLS 的 直播源文件(.m3u8) 为例，可以参考 什么是m3u8？直播源跟m3u8有什么关系？ - 见微知著

技术选择

从我的角度去选择：

协议	结论
RTMP	项目需求是作为拉流端，不考虑 Flash 支持，不采用
HLS	跨平台兼容性好，支持快进播放，延迟高，可用于播放录制完的视频
HTTP-FLV	通过 flv.js 可实现 HTML5 兼容，延迟低，可用于播放实时监控视频

工具选择

• HTTP-FLV
  • flv.js
    • bilibili （前）员工开发的用于在 HTML5 上播放 FLV 格式视频
    • 起初是用于将站内 flash 播放器平滑过渡到 HTML5 播放器的开源库
    • 对于直播支持 HTTP-FLV
    • B 站官方推荐使用 mpegts.js，并生成 flv.js 项目将减少维护。
    • 一些吐槽：如何看待B站 (bilibili) 开源 HTML5 播放器内核 flv.js? - 知乎
• HLS：
  • hls.js
    • HLS 为苹果原生支持的协议，其它浏览器大部分不兼容，hls.js 是实现在其它平台兼容 HLS。
  • video.js
    • 基于 hls.js 封装了 UI 和 功能的播放器插件，支持 HTML5 和 Flash（需要浏览器支持 Flash）
    • 缺点：包臃肿，修改 UI 不方便

hls.js 使用

hls.js - npm

npm install hls.js

<video id="video" src="" /

import Hls from