Widely available すべての主要ブラウザで対応済み。安心して使用可能。

captureStream() for <canvas>

Media Capture and Streams API の `CanvasCaptureMediaStreamTrack` インターフェイスは、`HTMLCanvasElement.captureStream()` の呼び出しに続いて `<canvas>` から生成される `MediaStream` に含まれるビデオトラックを表します。

EventTarget MediaStreamTrack CanvasCaptureMediaStreamTrack

Canvas・グラフィクス

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
CanvasCaptureMediaStreamTrack
51
79
11
51
11
canvas

CanvasCaptureMediaStreamTrack インターフェースの canvas 読み取り専用プロパティは、フレームがキャプチャされる HTMLCanvasElement を返す。
51
79
11
51
11
requestFrame

requestFrame() は CanvasCaptureMediaStreamTrack インターフェイスのメソッドで、フレームをキャンバスから取り込んでストリームに送信することをリクエストします。
51
79
11
51
11
captureStream

captureStream() は HTMLCanvasElement インターフェイスのメソッドで、MediaStream を返します。これは CanvasCaptureMediaStreamTrack を含んでおり、このキャンバスの内容をリアルタイムに動画キャプチャします。
51
79
43
11
51
11
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
<canvas id="c" width="320" height="240"></canvas>
<script>
const canvas = document.getElementById('c');
const stream = canvas.captureStream(30);
const recorder = new MediaRecorder(stream);
recorder.start();
</script>

ライブデモ

Canvas to video stream

Capture a live canvas animation and preview it in a video element.

プレビュー全画面表示

Dual stream viewers

Point two video elements at the same captured stream to mirror one canvas source.

プレビュー全画面表示

Stream status board

Combine the captured stream with a status panel that explains the pipeline.

プレビュー全画面表示

実務での使いどころ

  • captureStream() for <canvas> の活用

    Media Capture and Streams API の `CanvasCaptureMediaStreamTrack` インターフェイスは、`HTMLCanvasElement.captureStream()` の呼び出しに続いて `<canvas>` から生成される `MediaStream` に含まれるビデオトラックを表します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク