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 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 以上版本。