一般的印象中，Web的多媒體能力也許就是播放音/視頻，其實，遠不止於此。我們來看看Web應用可以使用哪些多媒體能力，實現什麼樣的多媒體功能。

1 本地媒體設備音/視頻採集

js可以通過調用一組特定的APIs採集攝像頭影像信息、麥克風音頻信息。

相關的標準

Media Capture and Streams - 定義了一組 JavaScript APIs，通過這些APIs，頁面可以請求本地的視頻/音頻。

Media Capture Depth Stream Extensions - 上一個標準的擴展，允許Web應用請求depth-only stream 或者 depth+color stream 。

depth信息包含了攝像頭看到的物體到攝像頭的距離信息，有了這樣的信息，頁端或Web應用可以把手勢做為一種輸入機制，可以對現實環境做3D建模，從而實現一些高級功能。

一些具體的應用，比如：沉浸式遊戲體驗，3D視頻會議，增強現實等。

2 遠程播放控制

簡單的講，就是在Web頁面上實現一個類似遙控器的東東，通過這個遙控器來控制媒體在遠程設備上的播放。

遠程設備：例如連接的TVs，放映機，揚聲器等。這些設備通過有線技術（HDMI，DVI等）和無線技術（Miracast, Chromecast, DLNA, AirPlay, or similar）連接到設備，使得Web可見。

Remote Playback API - 定義了一組可以在Web頁面對遠程媒體播放進行控制的APIs。

具體的應用，比如：頁端視頻投屏到DLNA電視上播放。

3 媒體播放控制

通過給<video>設置不同的屬性，可以對播放行為進行控制，比如自動部分，靜音，循環播放，預載入等。

為了降低電源消耗，設置了autoplay和muted的<video>只有在它變得可見的時候才會開始播放，不可見的時候會暫停播放。

自動播放的行為可能隨著內核版本的變化而變化

4 定製媒體通知

Media Session API – 通過這個API，我們顯示一條關於Web正在播放的媒體通知信息。

類似這樣：

這在後臺播放音樂的場景很有用。實例

5 Media Source Extensions

允許JavaScript控制媒體資源的載入，然後交由HTML 5播放器進行播放。這樣前端可以定製一些業務，比如自適應碼率，插入廣告，實現直播等等。

相關標準： Media Source Extensions

各主流視頻網站都已支持MSE，包括youtube, 優酷，愛奇異。

6 音頻處理與合成

比如複雜的混音，各種聲效處理，平移等。目標是使Web具備現代遊戲音頻引擎具備的能力，和能夠執行桌面音頻應用具有的一些合成，處理，過濾任務。其它功能包括：

在需要的時候暫停音頻設備；

Web Audio API - 提供了一個簡單而強大的機制來實現和處理Web應用內的音頻內容。

這裡有很多利用Web Audio的實例

具體的應用，比如我們可以實現一個電子琴。

7 播放版權受限的媒體

版權的控制會越來越嚴，好萊塢相關的視頻大多需要支持DRM，要播放這樣的媒體就需要EME支持。

Encrypted Media Extensions (EME) - 提供了用於控制受數字版權管理方案限制的內容播放的介面。在Web瀏覽器和DRM代理軟體之間提供通信通道。EME作為一個應用編程介面（API），可以直接播放網頁瀏覽器中受保護的內容。

8 編碼音/視頻流

可以通過瀏覽器對音/視頻進行編碼

比如我們可以寫一個頁面，用戶可以自拍一段視頻，然後保存為mp4，並提供下載。

這個功能一般是實驗性功能，瀏覽器通常默認是不支持的。

9 播放相關功能

HTMLMediaElement.play() returns a promise - 許多移動瀏覽器不允許JavaScript執行自動播放（處於帶寬和隱私的考慮）。有的頁面可能無法知道這一點，以為自動播放成功了，從而沒有提供播放按鈕，導致無法播放視頻。play方法返回promise，提供了一種優化的方式，使頁面知道是否播放成功。實例

MediaError.message - 播放出錯的情況下，內核會通過error事件通知頁面具體的出錯信息，以幫助前端進行調試。實例

10 投屏播放

定義了一組APIs, Web應用可以訪問投屏設備，把Web內容呈現在投屏設備上。

Presentation API - 目標是使得Web可以訪問投屏設備。

投屏設備包括：投影機、顯示器、通過網路連接的電視等。還有其它通過有線（HDMI, AVI等類似技術）和無線（Miracast, Chromecast, DLNA, AirPlay等類似技術）連接的設備。

實例

11 從圖像/視頻設備上獲取圖像

有方便、易用的介面可以直接從攝像頭這樣的設備上獲取圖像。

實例

12 支持主流的音/視頻格式

像vp9, h264, h265這些。具體是哪些格式，後面有文章專門闡述。

13 Capture a MediaStream From Canvas, Video or Audio Element

通過captureStream() 方法，我們可以從<canvas>, <audio> or <video> 元素capture a MediaStream。這是什麼概念呢？換句話說，這使來自任何這些元素的視頻或音頻流都可以被錄製，通過WebRTC進行實時流式傳輸，或者與特效或其他MediaStream結合在<canvas>中。要實現適時視頻對話這樣的場景，就很簡單了。

具體的應用，比如：

  • 錄製<canvas>中的遊戲視頻
  • 從攝像頭採集視頻，並添加額外的內容和特效
  • 通過過<canvas>實現多個視頻的畫中畫效果

實例

14 AudioWorklet

AudioWorklet對象允許開發者提供腳本（例如JavaScript或WebAssembly代碼）來在渲染線程上處理音頻（不阻塞主JavaScritp執行環境），支持自定義音頻節點。

通過這樣的介面，web 開發者可以提供自己的音頻處理代碼，擴展platform本身的能力，具有更大的自主性。通過WebAssembly代碼也有利於改進音頻處理的效率。

AudioWorklet

15 獲取詳細的媒體支持能力信息

輸入音/視頻格式，解析度，幀率，碼率等信息，輸出支持程度：supported, smooth, powerEfficient 。

這可以幫助前端在選擇媒體流時做出最優的決策。

實例

16 WebRTC

瀏覽器中的適時通信支持。用於像適時語音通信，直播互動這樣的場景。

通過WebRTC，我們可以共享數據，實現peer-to-peer電話會議，而不需要安裝什麼插件和第三方軟體。

WebRTC API

17 WebVTT 字幕支持

支持顯示WebVTT 字幕，可以顯示或關閉字幕，提供多語言字幕支持。

WebVTT


推薦閱讀：
相關文章