WEB中的流媒体：BLOB和HLS

long long ago，传统的 Web 技术不能够嵌入音频和视频，所以一些像 Flash、Silverlight 的专利技术在处理这些内容上变得很受欢迎。这些技术能够正常的工作，但是却有着一系列的问题，包括无法很好的支持 HTML/CSS 特性、安全问题，以及可行性问题。

幸运的是，当 HTML5 标准公布后，其中包含许多的新特性，包括 <video> 和 <audio> 标签，以及一些 JavaScript APIs 用于对其进行控制。

传统的播放模式

在以下 HTML 片段中，我们声明了一个 <video> 元素并设置相关的属性，然后通过 <source> 标签设置视频源和视频格式：

<video id="mse" autoplay=true playsinline controls="controls">
   <source src="https://xxxyyyzzz.com/imavideo.mp4" type="video/mp4">
</video>

上述代码在浏览器渲染之后，在页面中会显示一个 Video 视频播放器，并且浏览器和服务器之间，采用Range的方式来持续的部分的传输部分媒体内容。

流媒体的播放模式

流媒体是一种新的媒体传送方式，而非一种新的媒体。流媒体最主要的技术特征就是流式传输，它使得数据可以像流水一样传输。

使用流媒体技术之后与传统的播放模式有什么直观的区别？以常见的 HLS 流媒体协议为例，来简单对比一下它们之间的区别。

当使用 HLS 流媒体网络传输协议时，<video> 元素 src 属性使用的是 blob:// 协议，Blob（Binary Large Object）表示二进制类型的大对象。

在浏览器中，我们使用 URL.createObjectURL 方法来创建 Blob URL，该方法接收一个 Blob 对象，并为其创建一个唯一的 URL，其形式为 blob:<origin>/<uuid>，对应的示例如下：

blob:https://example.org/40a5fb5a-d56d-4a33-b4e2-0acf6a8e5f641

浏览器内部为每个通过 URL.createObjectURL 生成的 URL 存储了一个 URL → Blob 映射。

HTTP Live Streaming（HLS）是由苹果公司提出基于 HTTP 的流媒体网络传输协议，它是苹果公司 QuickTime X 和 iPhone 软件系统的一部分。它的工作原理是把整个流分成一个个小的基于 HTTP 的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。此外，当用户的信号强度发生抖动时，视频流会动态调整以提供出色的再现效果。

最初， 仅 iOS 支持 HLS。但现在 几乎所有设备都支持它。HLS 拥有以下特性：

1. HLS 将播放使用 H.264 或 HEVC / H.265 编解码器编码的视频。
2. HLS 将播放使用 AAC 或 MP3 编解码器编码的音频。
3. HLS 视频流一般被切成 10 秒的片段。
4. HLS 的传输/封装格式是 MPEG-2 TS。
5. HLS 支持 DRM（数字版权管理）。
6. HLS 支持各种广告标准，例如 VAST 和 VPAID。

HLS 主要是为了解决 RTMP 协议存在的一些问题。比如 RTMP 协议不使用标准的 HTTP 接口传输数据，所以在一些特殊的网络环境下可能被防火墙屏蔽掉。除此之外，它也很容易通过 CDN（内容分发网络）来传输媒体流。

在开始一个流媒体会话时，客户端会下载一个包含元数据的 Extended M3U（m3u8）Playlist 文件，用于寻找可用的媒体流。

而不同清晰度视频对应的媒体播放列表，会定义在各自的 m3u8 文件中。这里我们以某清晰度对应的视频为例，来查看其对应的 m3u8 文件：

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:20
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:6.000000,
/vhallyun/vhallhls/ls/s_/eb/lss_ebb9312c/lss_ebb9312c/20210327154005743344/livestream000202.ts
#EXTINF:6.000000,
/vhallyun/vhallhls/ls/s_/eb/lss_ebb9312c/lss_ebb9312c/20210327154005743344/livestream000203.ts
#EXTINF:6.000000,
/vhallyun/vhallhls/ls/s_/eb/lss_ebb9312c/lss_ebb9312c/20210327154005743344/livestream000204.ts

...

/vhallyun/vhallhls/ls/s_/eb/lss_ebb9312c/lss_ebb9312c/20210327154005743344/livestream000802.ts
#EXTINF:6.000000,
/vhallyun/vhallhls/ls/s_/eb/lss_ebb9312c/lss_ebb9312c/20210327154005743344/livestream000803.ts
#EXTINF:0.142000,
/vhallyun/vhallhls/ls/s_/eb/lss_ebb9312c/lss_ebb9312c/20210327154005743344/livestream000804.ts
#EXT-X-ENDLIST

HLS 的传输/封装格式是 MPEG-2 TS（MPEG-2 Transport Stream），是一种传输和存储包含视频、音频与通信协议各种数据的标准格式，用于数字电视广播系统，如 DVB、ATSC、IPTV 等等。

需要注意的是利用一些现成的工具，我们是可以把多个 TS 文件合并为 mp4 格式的视频文件。如果要做视频版权保护，那我们可以考虑使用对称加密算法，比如 AES-128 对切片进行对称加密。当客户端进行播放时，先根据 m3u8 文件中配置的密钥服务器地址，获取对称加密的密钥，然后再下载分片，当分片下载完成后再使用匹配的对称加密算法进行解密播放。

我们来看一个ts分段文件的视频元数据信息，如下。令人感到高兴的是，这个TS文件可以直接播放。

ffprobe version 4.4.1 Copyright (c) 2007-2021 the FFmpeg developers
  built with gcc 5.4.0 (Ubuntu 5.4.0-6ubuntu1~16.04.11) 20160609
  configuration: --prefix='~/work/ffmpeg' --disable-x86asm   --这里prefix写的不好，不要用~ make install会出问题
  libavutil      56. 70.100 / 56. 70.100
  libavcodec     58.134.100 / 58.134.100
  libavformat    58. 76.100 / 58. 76.100
  libavdevice    58. 13.100 / 58. 13.100
  libavfilter     7.110.100 /  7.110.100
  libswscale      5.  9.100 /  5.  9.100
  libswresample   3.  9.100 /  3.  9.100
Input #0, mpegts, from 'livestream000202.ts':
  Duration: 00:00:06.06, start: 1211.970000, bitrate: 1183 kb/s
  Program 1 
  Stream #0:0[0x101]: Audio: aac (LC) ([15][0][0][0] / 0x000F), 48000 Hz, stereo, fltp, 144 kb/s
  Stream #0:1[0x100]: Video: h264 (High) ([27][0][0][0] / 0x001B), yuv420p(progressive), 1280x720 [SAR 1:1 DAR 16:9], 30 fps, 30 tbr, 90k tbn, 60 tbc

参考原文链接：

semlinker