Trang này được dịch bởi Cloud Translation API.

Các luồng có thể chèn cho MediaStreamTrack

Nội dung của MediaStreamTrack được hiển thị dưới dạng một luồng có thể được thao tác hoặc dùng để tạo nội dung mới

Thomas Steiner

Thông tin khái quát

Trong ngữ cảnh của API Quay video và phát trực tuyến, giao diện MediaStreamTrack đại diện cho một kênh nội dung nghe nhìn trong luồng; thường là các kênh âm thanh hoặc video, nhưng có thể có các loại kênh khác. Các đối tượng MediaStream chứa không hoặc nhiều đối tượng MediaStreamTrack, đại diện cho nhiều bản âm thanh hoặc video. Mỗi MediaStreamTrack có thể có một hoặc nhiều kênh. Kênh đại diện cho đơn vị nhỏ nhất của luồng nội dung đa phương tiện, chẳng hạn như tín hiệu âm thanh liên kết với một loa nhất định, chẳng hạn như bên trái hoặc bên phải của bản âm thanh nổi.

Luồng có thể chèn cho `MediaStreamTrack` là gì?

Ý tưởng cốt lõi đằng sau các luồng có thể chèn cho MediaStreamTrack là hiển thị nội dung của MediaStreamTrack dưới dạng một tập hợp luồng (theo định nghĩa của API Luồng WHATWG). Bạn có thể thao tác các luồng này để giới thiệu các thành phần mới.

Việc cấp cho nhà phát triển quyền truy cập trực tiếp vào luồng video (hoặc âm thanh) cho phép họ áp dụng trực tiếp các nội dung sửa đổi cho luồng đó. Ngược lại, để thực hiện cùng một thao tác thao tác video bằng các phương thức truyền thống, nhà phát triển cần sử dụng các thành phần trung gian như phần tử <canvas>. (Để biết thông tin chi tiết về loại quy trình này, hãy xem ví dụ: video + canvas = magic.)

Hỗ trợ trình duyệt

Luồng có thể chèn cho MediaStreamTrack được hỗ trợ từ Chrome 94.

Trường hợp sử dụng

Các trường hợp sử dụng cho luồng có thể chèn cho MediaStreamTrack bao gồm nhưng không giới hạn ở:

Các tiện ích hội nghị truyền hình như "mũ vui nhộn" hoặc phông nền ảo.
Xử lý giọng nói như bộ mã hoá và giải mã giọng nói (vocoder) trong phần mềm.

Cách sử dụng luồng có thể chèn cho `MediaStreamTrack`

Phát hiện tính năng

Bạn có thể phát hiện tính năng phát hiện luồng có thể chèn để hỗ trợ MediaStreamTrack như sau.

if ('MediaStreamTrackProcessor' in window && 'MediaStreamTrackGenerator' in window) {
  // Insertable streams for `MediaStreamTrack` is supported.
}

Các khái niệm cốt lõi

Các luồng có thể chèn cho MediaStreamTrack được xây dựng dựa trên các khái niệm do WebCodecs đề xuất trước đó và chia MediaStreamTrack thành hai thành phần về mặt lý thuyết:

MediaStreamTrackProcessor sử dụng nguồn của đối tượng MediaStreamTrack và tạo ra một luồng khung nội dung nghe nhìn, cụ thể là các đối tượng VideoFrame hoặc AudioFrame. Bạn có thể coi đây là một vùng chứa kênh có thể hiển thị các khung chưa mã hoá từ kênh dưới dạng ReadableStream.
MediaStreamTrackGenerator, sử dụng luồng khung nội dung nghe nhìn và hiển thị giao diện MediaStreamTrack. Bạn có thể cung cấp cho bất kỳ bồn lưu trữ nào, giống như một kênh từ getUserMedia(). Phương thức này lấy khung nội dung nghe nhìn làm dữ liệu đầu vào.

`MediaStreamTrackProcessor`

Đối tượng MediaStreamTrackProcessor hiển thị một thuộc tính, readable. Cho phép đọc khung từ MediaStreamTrack. Nếu kênh là kênh video, thì các đoạn được đọc từ readable sẽ là đối tượng VideoFrame. Nếu bản nhạc là một bản âm thanh, thì các đoạn được đọc từ readable sẽ là các đối tượng AudioFrame.

`MediaStreamTrackGenerator`

Tương tự, đối tượng MediaStreamTrackGenerator hiển thị một thuộc tính, writable, là một WritableStream cho phép ghi khung nội dung nghe nhìn vào MediaStreamTrackGenerator, bản thân là một MediaStreamTrack. Nếu thuộc tính kind là "audio", thì luồng sẽ chấp nhận các đối tượng AudioFrame và không chấp nhận bất kỳ loại nào khác. Nếu loại là "video", luồng sẽ chấp nhận các đối tượng VideoFrame và không thành công với bất kỳ loại nào khác. Khi một khung được ghi vào writable, phương thức close() của khung sẽ tự động được gọi để các tài nguyên nội dung nghe nhìn của khung không còn truy cập được từ JavaScript.

MediaStreamTrackGenerator là một kênh mà bạn có thể triển khai nguồn tuỳ chỉnh bằng cách ghi các khung nội dung nghe nhìn vào trường writable.

Tổng hợp kiến thức đã học

Ý tưởng cốt lõi là tạo một chuỗi xử lý như sau:

Nền tảng theo dõi → Bộ xử lý → Biến đổi → Trình tạo → Nền tảng Sink

Ví dụ dưới đây minh hoạ chuỗi này cho một ứng dụng quét mã vạch làm nổi bật mã vạch đã phát hiện trong luồng video trực tiếp.

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);

const videoBefore = document.getElementById('video-before');
const videoAfter = document.getElementById('video-after');
videoBefore.srcObject = stream;
const streamAfter = new MediaStream([trackGenerator]);
videoAfter.srcObject = streamAfter;

Bản minh hoạ

Bạn có thể xem bản minh hoạ trình quét mã QR ở phần trên hoạt động trên trình duyệt dành cho máy tính hoặc thiết bị di động. Giữ mã QR trước máy ảnh và ứng dụng sẽ phát hiện và làm nổi bật mã đó. Bạn có thể xem mã nguồn của ứng dụng trên Glitch.

Trình quét mã QR đang chạy trong thẻ trình duyệt trên máy tính để bàn hiển thị một mã QR đã phát hiện và được làm nổi bật trên điện thoại mà người dùng cầm trước máy ảnh của máy tính xách tay.

Những điều cần cân nhắc về quyền riêng tư và bảo mật

Mức độ bảo mật của API này dựa vào các cơ chế hiện có trong nền tảng web. Khi dữ liệu được hiển thị thông qua giao diện VideoFrame và AudioFrame, các quy tắc của các giao diện đó để xử lý dữ liệu có nguồn gốc sẽ được áp dụng. Ví dụ: không thể truy cập dữ liệu từ các tài nguyên trên nhiều nguồn gốc do các hạn chế hiện có đối với việc truy cập vào các tài nguyên đó (ví dụ: không thể truy cập vào các pixel của phần tử hình ảnh hoặc video trên nhiều nguồn gốc). Ngoài ra, quyền truy cập vào dữ liệu phương tiện từ máy ảnh, micrô hoặc màn hình phải được người dùng cho phép. Dữ liệu đa phương tiện mà API này hiển thị đã có sẵn thông qua các API khác.

Phản hồi

Nhóm Chromium muốn biết trải nghiệm của bạn với các luồng có thể chèn cho MediaStreamTrack.

Giới thiệu cho chúng tôi về thiết kế API

API có hoạt động như mong đợi không? Hay có phương thức hoặc thuộc tính nào bị thiếu mà bạn cần để triển khai ý tưởng của mình không? Bạn có câu hỏi hay nhận xét nào về mô hình bảo mật này không? Báo cáo vấn đề về thông số kỹ thuật trên kho lưu trữ GitHub tương ứng hoặc thêm ý kiến của bạn về vấn đề hiện có.

Báo cáo vấn đề về việc triển khai

Bạn có tìm thấy lỗi khi triển khai Chromium không? Hay cách triển khai có khác với thông số kỹ thuật không? Gửi lỗi tại new.crbug.com. Hãy nhớ cung cấp càng nhiều thông tin chi tiết càng tốt, hướng dẫn đơn giản để tái hiện lỗi và nhập Blink>MediaStream vào hộp Components (Thành phần). Glitch rất hữu ích để chia sẻ các bản tái hiện nhanh chóng và dễ dàng.

Hiện thông tin hỗ trợ về API này

Bạn có định dùng sự kiện phát trực tiếp có thể chèn cho MediaStreamTrack không? Sự ủng hộ công khai của bạn giúp nhóm Chromium ưu tiên các tính năng và cho các nhà cung cấp trình duyệt khác thấy tầm quan trọng của việc hỗ trợ các tính năng đó.

Gửi một bài đăng đến @ChromiumDev kèm theo hashtag #InsertableStreams và cho chúng tôi biết bạn đang sử dụng hashtag này ở đâu và bằng cách nào.

Các đường liên kết hữu ích

Lời cảm ơn

Luồng có thể chèn cho thông số kỹ thuật MediaStreamTrack do Harald Alvestrand và Guido Urdaneta viết. Bài viết này đã được Harald Alvestrand, Joe Medley, Ben Wagner, Huib Kleinhout và François Beaufort xem xét. Hình ảnh chính của Chris Montgomery trên Unsplash.