MediaStreamTrackProcessor

Hàm khởi tạo

MediaStreamTrackProcessor()

Tạo một đối tượng MediaStreamTrackProcessor mới.

window.MediaStreamTrackProcessor() Experimental Non-standard

Tạo một đối tượng MediaStreamTrackProcessor mới trên main thread có thể xử lý cả video và âm thanh.

Thuộc tính phiên bản

MediaStreamTrackProcessor.readable

Trả về một ReadableStream.

Ví dụ

Ví dụ sau lấy từ bài viết Unbundling MediaStreamTrackProcessor and VideoTrackGenerator. Nó truyền MediaStreamTrack camera sang worker để xử lý. Worker tạo một pipeline áp dụng bộ lọc tông sepia cho các khung video và phản chiếu chúng. Pipeline kết thúc trong một VideoTrackGenerator có MediaStreamTrack được truyền lại và phát. Phương tiện hiện chảy theo thời gian thực qua quá trình biến đổi bên ngoài main thread.

const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const [track] = stream.getVideoTracks();
const worker = new Worker("worker.js");
worker.postMessage({ track }, [track]);
const { data } = await new Promise((r) => {
  worker.onmessage = r;
});
video.srcObject = new MediaStream([data.track]);

worker.js:

onmessage = async ({ data: { track } }) => {
  const vtg = new VideoTrackGenerator();
  self.postMessage({ track: vtg.track }, [vtg.track]);
  const { readable } = new MediaStreamTrackProcessor({ track });
  await readable
    .pipeThrough(new TransformStream({ transform }))
    .pipeTo(vtg.writable);
};

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• VideoTrackGenerator
• Insertable streams for MediaStreamTrack trên developer.chrome.com

  Note: Bài viết này được viết trước khi API bị giới hạn chỉ cho worker và video. Hãy cẩn thận với việc sử dụng phiên bản không chuẩn của MediaStreamTrackProcessor trong bài viết vì nó chặn trên main thread.