captureStream() for <audio> and <video>
captureStream() は HTMLMediaElement インターフェイスのプロパティで、このメディア要素でレンダリングされているコンテンツのリアルタイムキャプチャをストリーミングしている MediaStream オブジェクトを返します。
これは、例えば WebRTC の RTCPeerConnection のソースとして使用できます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 62 | 79 | 149 | | 62 | | |
注釈 8件
対応条件
- ベンダープレフィックス付きで対応: moz (149)
- ベンダープレフィックス付きで対応: moz (15)
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (149)
実装メモ
- Firefox 51 以降、キャプチャ開始後に `MediaStream` からソースを変更した場合、ソースを `MediaStream` に戻すまでキャプチャしたストリームデータを更新できない。
- Firefox 51 から、`MediaStream` ソースを持つメディア要素で `mozCaptureMediaStream()` を呼び出した場合、返されるオブジェクトには、その要素が `MediaStream` を再生している間のトラックのみが含まれます。
- Firefox 51 以降、ソースメディアを持たないメディア要素で `mozCaptureMediaStream()` が呼び出された場合、その互換性モードは最初に追加されたソースを基準とします。
- Firefox 51 より前のバージョンでは、`mozCaptureMediaStream()` は `MediaStream` をソースとするメディア要素 (`RTCPeerConnection` で受信したストリームを提示する `<video>` 要素など) では使用できませんでした。
基本構文
JAVASCRIPT
const video = document.querySelector('video');
const stream = video.captureStream();
const recorder = new MediaRecorder(stream);
recorder.ondataavailable = (e) => {
console.log('Recording data:', e.data.size);
};
recorder.start();ライブデモ
Testing note
Verify browser support and user expectations around recording or rebroadcasting media.
プレビュー全画面表示
実務での使いどころ
-
captureStream() for <audio> and <video> の活用
captureStream() は HTMLMediaElement インターフェイスのプロパティで、このメディア要素でレンダリングされているコンテンツのリアルタイムキャプチャをストリーミングしている MediaStream オブジェクトを返します。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。