Chia sẻ thẻ hiệu quả hơn nhờ tính năng Capture Xử lý

François Beaufort
François Beaufort
GitHub
Elad Alon

Hỗ trợ trình duyệt

  • Chrome: 102.
  • Edge: 102.
  • Firefox: không được hỗ trợ.
  • Safari: không được hỗ trợ.

Nền tảng web hiện đi kèm với Capture Handle, một cơ chế giúp cộng tác giữa các ứng dụng web chụp và ứng dụng web được chụp. Tên ứng dụng được chụp cho phép ứng dụng web chụp xác định ứng dụng web được chụp một cách chính xác và thoải mái. (Nếu ứng dụng web được chụp đã chọn sử dụng.)

Sau đây là một số ví dụ minh hoạ các lợi ích.

Ví dụ 1: Nếu một ứng dụng web hội nghị truyền hình đang ghi lại một ứng dụng web trình bày, thì ứng dụng web hội nghị truyền hình có thể hiển thị các chế độ điều khiển cho người dùng để di chuyển giữa các trang trình bày. Vì các chế độ điều khiển được nhúng trực tiếp vào ứng dụng web hội nghị truyền hình, nên người dùng không phải liên tục chuyển đổi giữa thẻ hội nghị truyền hình và thẻ trình bày. Nhờ đó, người dùng có thể tập trung hơn vào việc trình bày nội dung.

Ví dụ 2: Hiệu ứng "hội trường gương" xảy ra khi một bề mặt được chụp được kết xuất trở lại vị trí đang được chụp. Đáng chú ý là nếu người dùng chọn chụp lại thẻ đang diễn ra cuộc gọi hội nghị truyền hình và ứng dụng web hội nghị truyền hình hiển thị bản xem trước cục bộ, thì hiệu ứng đáng sợ này sẽ xuất hiện. Bằng cách sử dụng Capture Handle, bạn có thể phát hiện và giảm thiểu hành vi tự chụp; ví dụ: bằng cách ứng dụng web ngăn chặn bản xem trước cục bộ.

Hình minh hoạ hiệu ứng hành lang gương

Giới thiệu về tên người dùng của tính năng Chụp

Tay cầm chụp bao gồm hai phần bổ sung:

  • Các ứng dụng web được ghi lại có thể chọn hiển thị một số thông tin nhất định cho một số nguồn gốc bằng navigator.mediaDevices.setCaptureHandleConfig().
  • Sau đó, ứng dụng chụp ảnh web có thể đọc thông tin đó bằng getCaptureHandle() trên các đối tượng MediaStreamTrack.

Mặt được chụp

Các ứng dụng web có thể hiển thị thông tin cho các ứng dụng web có thể chụp. Để thực hiện việc này, hàm này sẽ gọi navigator.mediaDevices.setCaptureHandleConfig() bằng một đối tượng không bắt buộc bao gồm các thành phần sau:

  • handle: Có thể là bất kỳ chuỗi nào có tối đa 1024 ký tự.
  • exposeOrigin: Nếu là true, nguồn gốc của ứng dụng web đã chụp có thể bị lộ khi ứng dụng web chụp.
  • permittedOrigins: Các giá trị hợp lệ là (i) một mảng trống, (ii) một mảng có một mục duy nhất "*" hoặc (iii) một mảng các nguồn gốc. Nếu permittedOrigins bao gồm một mục duy nhất "*", thì tất cả ứng dụng web chụp ảnh đều có thể quan sát CaptureHandle. Nếu không, bạn chỉ có thể quan sát được khi chụp các ứng dụng web có nguồn gốc trong permittedOrigins.

Ví dụ sau đây cho biết cách hiển thị UUID được tạo ngẫu nhiên dưới dạng một tên người dùng và nguồn gốc cho mọi ứng dụng web chụp ảnh.

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

Xin lưu ý rằng ứng dụng web được chụp không biết liệu ứng dụng đó có đang được chụp hay không. Trừ phi ứng dụng web chụp ảnh sử dụng thông tin CaptureHandle để thiết lập giao tiếp với ứng dụng web được chụp (ví dụ: sử dụng tính năng nhắn tin qua worker hoặc cơ sở hạ tầng đám mây dùng chung).

Bên chụp

Ứng dụng web quay video lưu giữ một MediaStreamTrack video và có thể đọc thông tin về handle quay video bằng cách gọi getCaptureHandle() trên MediaStreamTrack đó. Lệnh gọi này trả về null nếu không có handle chụp hoặc nếu ứng dụng web chụp không được phép đọc handle đó. Nếu có một handle chụp và ứng dụng web chụp được thêm vào permittedOrigins, thì lệnh gọi này sẽ trả về một đối tượng có các thành phần sau:

  • handle: Giá trị chuỗi do ứng dụng web đã chụp đặt bằng navigator.mediaDevices.setCaptureHandleConfig().
  • origin: Nguồn gốc của ứng dụng web đã chụp nếu exposeOrigin được đặt thành true. Nếu không, thuộc tính này sẽ không được xác định.

Ví dụ sau đây cho biết cách đọc thông tin về tay điều khiển quay video từ một kênh video.

// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();

// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
  // Use captureHandle.origin and captureHandle.handle...
}

Theo dõi các thay đổi về CaptureHandle bằng cách theo dõi các sự kiện "capturehandlechange" trên đối tượng MediaStreamTrack. Các thay đổi sẽ diễn ra khi:

videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

Bảo mật và quyền riêng tư

Về mặt lý thuyết, hiện nay bạn có thể cộng tác giữa ứng dụng web được chụp và ứng dụng web được chụp bằng cách nhúng "pixel ma thuật" vào ứng dụng web được chụp hoặc nhúng mã QR vào luồng video. Capture Handle cung cấp một cơ chế đơn giản, đáng tin cậy và an toàn hơn. Mã này cũng cho phép ứng dụng web được ghi lại chọn đối tượng – chọn nguồn gốc hoặc toàn bộ web.

Xin lưu ý rằng navigator.mediaDevices.setCaptureHandleConfig() chỉ dành cho các khung chính cấp cao nhất trong ngữ cảnh duyệt web an toàn (chỉ HTTPS).

Mẫu

Bạn có thể chơi với Capture Handle bằng cách chạy mẫu trên Glitch. Hãy nhớ xem mã nguồn.

Bản thu thử

Bạn có thể xem một số bản minh hoạ tại:

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

Để kiểm tra xem getCaptureHandle() có được hỗ trợ hay không, hãy sử dụng:

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

Để kiểm tra xem navigator.mediaDevices.setCaptureHandleConfig() có được hỗ trợ hay không, hãy sử dụng:

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

Bước tiếp theo

Sau đây là thông tin xem trước về những tính năng sắp ra mắt trong tương lai gần để cải thiện tính năng chia sẻ màn hình trên web:

  • Tính năng Chụp vùng cho phép cắt một kênh video bắt nguồn từ tính năng chụp màn hình của thẻ hiện tại.
  • Tiêu điểm có điều kiện cho phép ứng dụng web chụp ảnh hướng dẫn trình duyệt chuyển tiêu điểm sang nền tảng hiển thị đã chụp hoặc tránh thay đổi tiêu điểm như vậy.

Phản hồi

Nhóm Chrome và cộng đồng tiêu chuẩn web muốn biết trải nghiệm của bạn với tính năng Capture Handle.

Giới thiệu về thiết kế

Có điều gì về Trình xử lý chụp không hoạt động như bạn 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 hoặc nhận xét về mô hình bảo mật?

  • Gửi vấn đề về thông số kỹ thuật trên kho lưu trữ GitHub hoặc thêm ý kiến của bạn vào một vấn đề hiện có.

Bạn gặp vấn đề khi triển khai?

Bạn có phát hiện lỗi khi triển khai Chrome 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 https://new.crbug.com. Hãy nhớ cung cấp càng nhiều thông tin chi tiết càng tốt và hướng dẫn đơn giản để tái tạo lỗi. Glitch rất hữu ích để chia sẻ các bản tái hiện nhanh chóng và dễ dàng.

Thể hiện sự ủng hộ

Bạn có định sử dụng tính năng Tay cầm chụp không? Sự ủng hộ công khai của bạn giúp nhóm Chrome ư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 đó.

Hãy gửi một tweet đến @ChromiumDev và cho chúng tôi biết bạn đang sử dụng công cụ này ở đâu và như thế nào.

Lời cảm ơn

Cảm ơn Joe Medley đã xem xét bài viết này.