標籤: MSE

MSE 小筆記

MSE 是指 Media Source Extensions.

傳統的 HTML 網頁就支援 audio, video 的 tag, 然後將它送給 player 播放. Web-based 的 Jave script Applications 透過 MSE, 就能將片段的 media 送給 player, 因此可以實現 adaptive streaming, 例如 MPEG-DASH.

video-blob-768x468

既然要支援隨時變化的片源, MSE 的特色之一就是支援 multiple SourceBuffer objects. 當然, 普通 SourceBuffer 一定也支援. 以下是它的定義:

SourceBuffer

Represents a chunk of media to be passed into an HTMLMediaElement via a MediaSource object.

可以想像, 支援 multiple SourceBuffer 要有一個清單. 所以 MSE 也支援 SourceBufferList 這個 interface.

SourceBufferList

A simple container list for multiple SourceBufferobjects.

MediaSource 是一個 object [2], Sourcebuffer 是它的實體. 圖示如下 [3]:

HTML_MediaSource_SourceBuffer

由這張圖也可以看到 MediaPlayer 會負責處理播放. 由於可播放的格式相當多, 每個 browser 能支援的 audio/video formats 都有所差異. 像是 Chrome 當然要挺自家的 WebM, VP9…等等. 以 Webkit 為例, 透過 MediaPlayerPrivateInterface 就可以把 mediaSourcePrivate/SourbufferPrivate 的內容送給真正的 player.

若使用 gstreamer 來當 player, 它有特別的 WebkitMediaSrc 這個 element, 資料由這邊進去 gstreamer 的 pipeline  就可以做後續的解碼 [3].

mse3-768x530 [REF]

  1. https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API
  2. https://developer.mozilla.org/en-US/docs/Web/API/MediaSource
  3. http://eocanha.org/blog/2016/02/18/improving-media-source-extensions-on-gstreamer-based-webkit-ports/

EME 小整理

這裡的 EME 是指 Encrypted Media Extensions, 顧名思義, 它解決加密的媒體 – 主要是視訊的播放的問題, 而且它是一個 extension, 用來擴充 web browser (瀏覽器) 的功能.  這樣一來就可以在 browser 上播有版權、加密過的電影, 而且無須綁定加解密的演算法.

話說, 我們不是用 Adobe Flash plugin 看了好多年的片子了嗎? 為何最近大家都紛紛棄 Flash 而去呢? 一般的看法 [2] 是微軟長久以來把持著桌機的平台和 IE 瀏覽器, 但並未好好支援網頁視訊這個產業, 所以早期的 Youtube 網站才會需要 Adobe Flash Player (其實是 plugin) 來彌補這個技術缺口. 當我們逐漸使用更多的 mobile device, 就應該使用更好的瀏覽器, 自然也就不需要 Adobe 了. 當然, Adobe 得罪 Steve Jobs 那件事應該也是關鍵的一擊.

根據 W3C 的規範, 播放網頁視訊 (HTML5 video) 需要瀏覽器支援 Media Source Extensions (MSE) [3] 技術. 應用程式 (app) 透過 Java script 把影片的 bit stream 送給平台上的解碼器 (decoder, 或者更廣泛的 media codec) 解碼. 再用播放器把解碼後的影片播出來. 

如果片源有 DRM (Digital rights management ) 加密, 就該 EME 上場了. 在 [4] 裡面有相當完整的描述. 正常來說, Media key 不會跟著片源一起送下來, 而是放在網路上的某個伺服器  (license key server). App 可以經由 CDM  (Content Decryption Module) 介面取回 key 來解密片源. 若是 key 會持續變動, 生命週期  (life time) 只在某一段期間  (session) 內, app 就要反覆透過 CDM 去跟 server 要不同的 key ID, 用於新的 session.

CDM 有時候不只涵蓋解密, 也可以順便解碼. 因此 [4] 說到, CDM 可以定義在 browser, OS, HW decoder, firmware decoder, 或是一個獨立的 module. 此外, 這篇文章還提到 common Encryption, clear key, 和 DASH. 有興趣的人可以讀一下 [4] 這篇.

 

[REF]

  1. https://en.wikipedia.org/wiki/Encrypted_Media_Extensions
  2. https://www.cnet.com/news/firefox-tiptoes-toward-a-world-without-adobe-flash/
  3. https://en.wikipedia.org/wiki/Media_Source_Extensions
  4. http://www.html5rocks.com/en/tutorials/eme/basics/
  5. Media/EME – MozillaWiki – Wiki – Mozilla