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 は、ストリームに直接アクセスして操作できるようにすることで、これらを行う方法を提供します。
インターフェイス
MediaStreamTrackGenerator-
MediaStreamTrackのソースとして働くWritableStreamを生成します。 MediaStreamTrackProcessor-
MediaStreamTrackオブジェクトのソースを処理し、メディアフレームのストリームを生成します。
例
以下の例は記事 Insertable streams for MediaStreamTrack に載っているもので、ビデオストリーム内のバーコードをハイライトするバーコードスキャナーアプリケーションのデモを行います。これは、MediaStreamTrackProcessor.readable 経由でアクセスしているストリームを変換します。
js
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);