search

yaofly2012 / note

Personal blog
https://github.com/yaofly2012/note/issues
43 stars 5 forks source link

blob url & video streaming #243

Open yaofly2012 opened 2 years ago

yaofly2012 commented 2 years ago

背景

源于思否上的一个提问：

在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 commented 2 years ago

初识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，并不是说数据可以来自服务端。
// 接着上面的例子，直接在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 commented 2 years ago

视频流（Video stream）

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

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