captureStream() for <canvas>
canvas.captureStream() は Canvas の描画内容をリアルタイムで MediaStream として取得します。録画やWebRTC送信に使用します。
概要
canvas.captureStream() は Canvas の描画内容をリアルタイムで MediaStream として取得します。録画やWebRTC送信に使用します。
対応ブラウザ
デスクトップ
Chrome 51+
Edge 79+
Safari 11+
Firefox 43+
モバイル
Chrome Android 51+
Safari iOS 11+
Firefox Android 43+
基本構文
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>実務での使いどころ
-
captureStream() for <canvas> の活用
Canvas要素からメディアストリームをキャプチャするAPI。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。