captureStream() for <audio> and <video>

概要

HTMLMediaElement.captureStream() は audio/video 要素の再生内容をリアルタイムで MediaStream として取得し、録画やWebRTCに使用します。

対応ブラウザ

基本構文

const video = document.querySelector('video');
const stream = video.captureStream();
const recorder = new MediaRecorder(stream);
recorder.ondataavailable = (e) => {
  console.log('録画データ:', e.data.size);
};
recorder.start();

実務での使いどころ

• captureStream() for <audio> and <video> の活用

  メディア要素からのストリームキャプチャ。audio/videoからMediaStreamを取得。

注意点

アクセシビリティ

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

参考リンク

• MDN Web Docs — captureStream() for <audio> and <video>