このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
Insertable Streams for MediaStreamTrack API
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Insertable Streams for MediaStreamTrack API は、MediaStreamTrack に新しいコンポーネントを追加する方法を提供します。
概念と使用法
映像や音声を処理する際、追加の要素を挿入したり、ストリームにその他の処理を行ったりしたくなることがあります。たとえば、アプリケーションは 2 本のトラック、たとえば天気の地図とその地図を解説しているプレゼンターの映像を合成したいことがあります。もしくは、トラックの処理により、背景のぼかし、背景ノイズの除去、他の要素の追加 (たとえば、人々に面白い帽子をかぶせるなど) をしたいかもしれません。この API は、ストリームに直接アクセスして操作できるようにすることで、これらを行う方法を提供します。
インターフェイス
MediaStreamTrackGeneratorMediaStreamTrackのソースとして働くWritableStreamを生成します。MediaStreamTrackProcessorMediaStreamTrackオブジェクトのソースを処理し、メディアフレームのストリームを生成します。
例
以下の例は記事Insertable streams for MediaStreamTrack に載っているもので、ビデオストリーム内のバーコードをハイライトするバーコードスキャナーアプリケーションのデモを行います。これは、MediaStreamTrackProcessor.readable 経由でアクセスしているストリームを変換します。
const stream = await getUserMedia({ video: true });const videoTrack = stream.getVideoTracks()[0];const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });const trackGenerator = new MediaStreamTrackGenerator({ kind: "video" });const transformer = new TransformStream({ async transform(videoFrame, controller) { const barcodes = await detectBarcodes(videoFrame); const newFrame = highlightBarcodes(videoFrame, barcodes); videoFrame.close(); controller.enqueue(newFrame); },});trackProcessor.readable .pipeThrough(transformer) .pipeTo(trackGenerator.writable);