blob url & video streaming

[yaofly2012]

背景

源于思否上的一个提问：

在Youtube都是 video.src=blob url ,但是要怎样不断添加arrayBuffer到blob里?

stackoverflow也有类似的提问

Many video stream websites, youtube for example, seem to have a blob url as their video source. Searching, I couldn't figure out how this works. For example...
<video src="blob:https://www.youtube.com/ea375257-e9a8-4c3f-9cef-d8cf0f3ae53f"></video>

涉及到自己的知识盲区了，赶紧的google下。

TODO

视频流（Video stream）
MediaSource ?
图片流？

相关文章：
Understanding blob url video streaming
How video streaming works on the web: An introduction
HLS.js
How to Download Blob Videos? (Three Ways)
What is blob and how to use it to protect videos from downloading?

[yaofly2012]

初识Blob

Blob对象表示一个不可变、原始数据的类文件对象。

1. 不可变(immutable)；
2. 原始数据(raw data)；
3. 类文件（file-like）。
   File对象继承了Blob对象（即File对象一种特殊的Blob）。

Blob就是一个含有特殊数据（可以指定MIME Type）的对象，这些数据可以是二进制的，也可以是字符串。

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // an array consisting of a single DOMString
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob

oMyBlob.text().then(console.log); // "<a id="a"><b id="b">hey!</b></a>"

Blob URL

Blob URL就是Blob对象的URL。形如：

blob:http://127.0.0.1:8080/a003a4de-a0e6-4af2-b304-baea16b14538

BlobURL的构成：

由两部分构成：blob:唯一ID

1. Blob协议，即blob:；
2. 唯一的ID
   不同浏览器生产ID的规则不同

• Chrome/FireFox：
  如上例中的blob:http://127.0.0.1:8080/a003a4de-a0e6-4af2-b304-baea16b14538
  当前页面的origin+Hash值。
  注意这里的origin只是用于构建Blob URL，并不是说数据可以来自服务端。

• IE
  只有个hash值。如blob:FD802099-9145-4C60-9C40-B761B27E921E

// 接着上面的例子，直接在Chrome【新标签页】的 DevTool里执行的
URL.createObjectURL(oMyBlob); //  blob:chrome://new-tab-page/97b3fe68-984b-49cb-8a53-c2c62daa918a

总结：

1. Blob表示的是本地数据，BlobURL也只能指向本地数据（别被origin迷惑了）；
2. 图片文件的Blob URL可以直接赋值给Image.src属性。

参考：

1. MDN Blob
2. MDN File
3. MDN URL.createObjectURL

[yaofly2012]

视频流（Video stream）

1. HTML5 前解决方案
2. HTML5 解决方案
3. Media Source Extensions
   

MediaSource/SourceBuffer

Media (video/audio) Segments

将video/audio分成许多段（segment）。

视频网站提供功能：

1. 即时切换视频质量/语言
2. 实时视频
3. 自适应流（Adaptive streaming）

传输协议（Transport Protocols）

issues:

1. 视频下载完才能播放？
   是的，所以要对媒体文件进行分割。
2. 图片流？

参考

1. Medium: How video streaming works on the web: An introduction