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 đã có sẵn tính năng Ghi lại tên người dùng, một cơ chế giúp cộng tác giữa các ứng dụng web đã thu thập và 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.)

Một vài ví dụ minh hoạ những lợi ích này.

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. Khi gánh nặng này được gỡ bỏ, người dùng giờ đây có thể thoải mái tập trung hoàn toàn 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 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ính năng Tên người dùng của bản ghi

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 web ghi lại có thể đọc thông tin đó bằng getCaptureHandle() trên đối tượng MediaStreamTrack.

Cạnh đượ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. Hàm này thực hiện điều đó bằng cách gọi navigator.mediaDevices.setCaptureHandleConfig() với một đối tượng tuỳ chọn 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ặt hàng "*" hoặc (iii) một mảng nguồn gốc. Nếu permittedOrigins bao gồm một mục "*" duy nhất, thì tất cả các ứng dụng web thu thập đều có thể quan sát được 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 thấy cách hiển thị một mã nhận dạng duy nhất (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 bất kỳ ứng dụng web thu thập nào.

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ề tên người dùng ghi hình từ một đoạn 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 nghe 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ề 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 bằng Tay cầm chụp ảnh 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

Dưới đây là thông tin sơ lược về những điều sẽ xảy ra trong tương lai gần giúp 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ề Tên người dùng 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 nhiều thông tin chi tiết nhất có thể và các hướng dẫn đơn giản để tái tạo. Glitch rất hữu ích khi chia sẻ các bản dựng lại 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ự hỗ trợ 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.

Xác nhận

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