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

captureStream() 方法可讓您從 <canvas><audio><video> 元素擷取 MediaStream

這樣就能錄製來自這些元素的影片或音訊串流,透過 WebRTC 直播,或在 <canvas> 中搭配特效或其他 MediaStream 使用。換句話說,captureStream() 可讓 MediaStream 在畫布、音訊或影片元素之間來回傳遞媒體,或是傳送至 RTCPeerConnectionMediaRecorder

在以下示範中 (從 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 以上版本。

瞭解詳情