Nội dung của MediaStreamTrack xuất hiện dưới dạng luồng có thể bị bóp méo hoặc dùng để tạo nội dung mới
Thông tin khái quát
Trong ngữ cảnh của API Luồng nội dung và Thu thập nội dung nghe nhìn, giao diện MediaStreamTrack đại diện cho một bản nhạc đa phương tiện trong một luồng. Thông thường, đây là các bản âm thanh hoặc video, nhưng có thể tồn tại các loại bản nhạc khác.
Các đối tượng MediaStream bao gồm từ 0 đối tượng MediaStreamTrack trở lên, đạ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 này đại diện cho đơn vị nhỏ nhất của một 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 trong một bản âm thanh nổi.
Luồng có thể chèn cho MediaStreamTrack là gì?
Ý tưởng chính của các luồng có thể chèn cho MediaStreamTrack là hiển thị nội dung của MediaStreamTrack dưới dạng tập hợp các luồng (như được xác định bởi API Luồng của WhatWG). Bạn có thể điều khiển những 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ọ trực tiếp áp dụng các nội dung sửa đổi cho sự kiện phát trực tiếp đó. Ngược lại, việc thực hiện cùng một thao tác video bằng các phương thức truyền thống đòi hỏi nhà phát triển phải sử dụng các bên trung gian, chẳng hạn như các phần tử <canvas>. (Để biết thông tin chi tiết về loại quy trình này, ví dụ: video + canvas = diệu kỳ.)
Hỗ trợ trình duyệt
Chrome 94 hỗ trợ các luồng có thể chèn cho MediaStreamTrack.
Trường hợp sử dụng
Các trường hợp sử dụng 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ư "những chiếc mũ ngộ nghĩnh" hoặc nền ảo.
- Xử lý giọng nói như bộ mã hoá giọng nói trong phần mềm.
Cách sử dụng bảng tin có thể chèn cho MediaStreamTrack
Phát hiện tính năng
Dưới đây là các luồng có thể chèn có thể phát hiện tính năng để hỗ trợ MediaStreamTrack.
if ('MediaStreamTrackProcessor' in window && 'MediaStreamTrackGenerator' in window) {
// Insertable streams for `MediaStreamTrack` is supported.
}
Khái niệm chính
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 được WebCodecs đề xuất trước đó và về mặt lý thuyết, hãy chia MediaStreamTrack thành 2 thành phần:
MediaStreamTrackProcessorsử dụng nguồn của đối tượngMediaStreamTrackvà tạo ra luồng khung nội dung nghe nhìn, cụ thể là các đối tượngVideoFramehoặcAudioFrame. Bạn có thể coi đây là bồn lưu trữ kênh có khả năng hiển thị các khung hình chưa được mã hoá trên kênh dưới dạngReadableStream.MediaStreamTrackGeneratorsử dụng một luồng khung nội dung nghe nhìn và hiển thị giao diệnMediaStreamTrack. Bạn có thể cung cấp giá trị này cho bất kỳ bồn lưu trữ dữ liệu nào, chẳng hạn như đường dẫn 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 cho thấy một thuộc tính là readable. Phương thức này cho phép đọc các khung hình từ MediaStreamTrack. Nếu bản nhạc là một bản video, thì các đoạn được đọc từ readable sẽ là đối tượng VideoFrame. Nếu bản âm thanh đó là một bản âm thanh, thì các đoạn được đọc từ readable sẽ là đối tượng AudioFrame.
MediaStreamTrackGenerator
Tương tự như vậy, đối tượng MediaStreamTrackGenerator cho thấy một thuộc tính writable. Đây là một WritableStream cho phép ghi khung nội dung nghe nhìn vào MediaStreamTrackGenerator và bản thân thuộc tính này cũng là một MediaStreamTrack. Nếu thuộc tính kind là "audio", luồng sẽ chấp nhận các đối tượng AudioFrame và không thành công với bất kỳ kiểu nào khác. Nếu kiểu là "video", luồng sẽ chấp nhận các đối tượng VideoFrame và sẽ không thành công với mọi kiểu 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 để khiến các tài nguyên nội dung nghe nhìn của khung đó không còn truy cập được qua JavaScript.
MediaStreamTrackGenerator là một kênh mà nguồn tuỳ chỉnh có thể được triển khai bằng cách ghi 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 chuỗi xử lý như sau:
Kênh âm thanh → Bộ xử lý → Biến đổi → Trình tạo → Bộ chứa trên nền tảng
Ví dụ bên dưới minh hoạ chuỗi này cho một ứng dụng quét mã vạch, giúp làm nổi bật mã vạch được phát hiện trong một 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 trong thực tế trên trình duyệt dành cho máy tính hoặc thiết bị di động. Giữ một mã QR trước camera, ứ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.
Những điều cần cân nhắc về bảo mật và quyền riêng tư
Tính bảo mật của API này dựa trên các cơ chế hiện có trong nền tảng web. Khi dữ liệu được hiển thị qua giao diện VideoFrame và AudioFrame, nên các quy tắc của các giao diện đó để xử lý dữ liệu bị mất 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 nhiều nguồn gốc do các hạn chế hiện có đối với việc truy cập 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 nội dung nghe nhìn từ máy ảnh, micrô hoặc màn hình phải tuân theo sự cho phép của người dùng. 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.
Ý kiến phản hồi
Nhóm Chromium muốn biết ý kiến của bạn về trải nghiệm của bạn với các luồng có thể chèn dành cho MediaStreamTrack.
Cho chúng tôi biết về thiết kế của API
Có điều gì về API không hoạt động như bạn mong đợi không? Hay có thiếu phương thức hoặc thuộc tính nào mà bạn cần triển khai không? Bạn có câu hỏi hay nhận xét gì về mô hình bảo mật không? Gửi 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ào vấn đề hiện có.
Báo cáo sự cố với quá trình triển khai
Bạn có phát hiện thấy lỗi khi triển khai Chromium không? Hay cách triển khai có khác với quy cách không?
Gửi lỗi tại new.crbug.com. Hãy nhớ cung cấp nhiều thông tin chi tiết nhất có thể, hướng dẫn đơn giản để tái tạo và nhập Blink>MediaStream vào hộp Thành phần.
Sự cố rất hữu ích trong việc chia sẻ các bản sao nhanh và dễ dàng.
Hỗ trợ API
Bạn có định dùng bảng tin có thể chèn cho MediaStreamTrack không? Dịch vụ hỗ trợ 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 biết tầm quan trọng của việc hỗ trợ
các tính năng đó.
Hãy gửi một dòng tweet đến @ChromiumDev kèm theo hashtag
#InsertableStreams
và cho chúng tôi biết vị trí cũng như cách bạn đang sử dụng bài đăng này.
Các đường liên kết hữu ích
Xác nhận
Các luồng có thể chèn cho thông số kỹ thuật MediaStreamTrack được viết bởi
Harald Alvestrand và Guido Urdaneta.
Bài viết này đã được Harald Alvestrand, Joe Medley, Ben Wagner, Huib Kleinhout và François Beaufort đánh giá. Hình ảnh chính của Chris Montgomery trên Unsplash.