日期: 2017 年 7 月 6 日

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/