要在網頁上播放影像串流有許多種方式.
常見的像是HLS, MPEG-DASH, RTMP with flash, vlc web plugin, motion JPEG…等等
以上都有其缺點
RTMP with flash => flash已陣亡
vlc web plugin => 不實用,用來測試還可以
motion JPEG => 簡單方便,但只是假的串流並不流暢
HLS,MPEG-DASH => 目前最理想的方式,兩者傳輸影像前需要先封裝(multiplex),因此對直播影像會有數秒不等的延遲.

HTML5 video tag 結合 MSE 可以直接播放 fragmented mp4格式影像
(fragmented mp4目前只可封裝H.264)

未來HLS也將支援fMP4傳送 https://en.wikipedia.org/wiki/HTTP_Live_Streaming
“On WWDC2016 Apple announced the inclusion of byte-range addressing for fragmented MP4 files, or fMP4,
allowing content to be played in HLS without the need to multiplex it into MPEG-2 Transport Stream.
The industry considered this as a step towards compatibility between HLS and MPEG-DASH”

目前為解決直播影像數秒的延遲現象,於是參考hls.js player 架構.
不傳送m3u8,直接傳送H.264然後在client端multiplex成fMP4,然後經由HTML5播放
這樣可以使延遲現象降低,不過也是有缺點像是無法利用CDN….端看需求與應用來取決

Source code:
wfs.js

That demonstrates transmuxing NALu h.264 streams into fmp4 from websocket.
That works directly on top of a standard HTML5 element and MSE.Setting HTML5 video tag combines with MSE like creating mediaSource, mediaSource.addSourceBuffer, sourceBuffer.appendBuffer.
That will play video while buffer right feeds fmp4.