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

Sam Dutton

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

這樣一來，您就能錄製任何這些元素的影片或音訊串流、透過 WebRTC 進行直播，或在 <canvas> 中結合效果或其他 MediaStream。換句話說，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 th<e sou>rce 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 th<e sou>rce of one video element to be a stream from another.
    var stream = leftVideo.captureStream();
    rightVideo.srcObject = stream;
};

但為什麼呢？

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

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

基本上，captureStream() 可讓 JavaScript 建構並將「東西」插入 MediaStream。

附屬細則

  • 如果嘗試在透過 Encrypted Media Extensions 實作內容保護機制的媒體元素中使用 captureStream()，系統會擲回例外狀況。

  • 從 <canvas> 擷取時，系統會在呼叫 captureStream() 時設定影格速率上限。舉例來說，canvas.captureStream(10) 表示畫布輸出速率介於 0 和 10 fps 之間。當 <canvas> 上沒有任何繪製內容時，系統不會擷取任何內容，即使 <canvas> 以 30 fps 繪製，系統也會擷取 10 fps。captureStream 規格中已提交有更多討論內容的錯誤。

  • captureStream() 影片的尺寸與呼叫時的 <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 以上版本。

瞭解詳情