從畫布、影片或音訊元素擷取 MediaStream

Sam Dutton

captureStream() 方法可從 <canvas>、<audio> 或 <video> 元素擷取 MediaStream。

這樣一來，就能錄製來自這些元素的影片或音訊串流、透過 WebRTC 直播，或是與效果或其他 MediaStream 合併成 <canvas>。換句話說，captureStream() 可讓 MediaStream 在畫布、音訊或影片元素之間，或在 RTCPeerConnection 或 MediaRecorder 之間來回傳遞媒體。

在下列示範 (可從 WebRTC 範例取得) 中，從左側畫布元素擷取的 MediaStream 會透過 WebRTC 對等互連，串流至右側的影片元素：

(下方提供更多畫布和影片範例的連結)。

captureStream() 程式碼很簡單。

針對 <canvas>：

var canvas = document.querySelector('canvas');
var video = document.querySelector('video');

// Optional frames per second argument.
var stream = canvas.captureStream(25);
// Set the source of the <video> element to be the stream from the <canvas>.
video.srcObject = stream;

針對 <video>：

var leftVideo = document.getElementById('leftVideo');
var rightVideo = document.getElementById('rightVideo');

leftVideo.onplay = function() {
    // Set the source of one <video> element to be a stream from another.
    var stream = leftVideo.captureStream();
    rightVideo.srcObject = stream;
};

但為什麼？

captureStream() 方法可讓您從畫布和媒體元素錄製或直播：

  • 從 <canvas> 錄製及直播遊戲過程
  • 從攝影機擷取影片，然後加入其他內容或特效
  • 透過 <canvas> 從多部影片建立子母畫面效果
  • 在 <canvas> 中合併影片和圖片 (來自檔案、相機或兩者)
  • 直播檔案中的影片
  • 將錄製的語音或影片訊息設為視訊或語音信箱留言

基本上，captureStream() 可讓 JavaScript 建構內容並「注入」至 MediaStream。

附屬細則

  • 嘗試將 captureStream() 與透過加密媒體擴充功能實作內容保護機制的媒體元素搭配使用時，系統會擲回例外狀況。

  • 從 <canvas> 擷取畫面時，系統會在呼叫 captureStream() 時設定最高影格速率。舉例來說，canvas.captureStream(10) 表示畫布輸出介於 0 到 10 FPS。如果 <canvas> 上沒有繪製任何內容，系統就不會擷取任何內容，即使 <canvas> 以 30 FPS 繪製內容，系統也只會以 10 FPS 擷取內容。有錯誤，請參閱相關討論，並在 captureStream規格中提出。

  • captureStream() 影片的尺寸與呼叫該影片的 <canvas> 相符。

示範

Canvas

影片

支援

  • Canvas captureStream()：Firefox 43 以上版本；Chrome 50 以上版本，並啟用 chrome://flags/#enable-experimental-web-platform-features，或 Chrome 52 以上版本 (預設啟用)。
  • 影片和音訊 captureStream()：Firefox 47；Chrome 52 以上版本，並啟用 chrome://flags/#enable-experimental-web-platform-features，或 Chrome 53 以上版本 (預設啟用)。

瞭解詳情