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.
  • Cạnh: 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. Tay cầm nắm bắt giúp ứng dụng web chụp ảnh có thể xác định ứng dụng web được chụp một cách tiện dụng và tự tin. (Nếu ứng dụng web được ghi lại đã chọn tham gia.)

Một vài ví dụ minh hoạ các lợi ích này.

Ví dụ 1: Nếu ứ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ế độ kiểm soát 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 trong ứng dụng web của hội nghị truyền hình, nên người dùng không phải chuyển đổi liên tục 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: "Hội trường gương" hiệu ứng xảy ra khi bề mặt được chụp được kết xuất trở lại vị trí đang được chụp. Điều đáng chú ý là nếu người dùng chọn ghi lại thẻ nơi cuộc gọi hội nghị truyền hình đang diễn ra và ứng dụng web của ứng dụng hội nghị truyền hình hiển thị bản xem trước trên thiết bị, thì người dùng sẽ thấy hiệu ứng đáng sợ này. Khi sử dụng Tay cầm chụp, bạn có thể phát hiện và giảm thiểu hiệu quả của chế độ tự chụp; ví dụ: do ứng dụng web chặn bản xem trước cục bộ.

Hình minh hoạ hiệu ứng hội trường gương

Giới thiệu về tay cầm chụp

Tay cầm chụp ảnh bao gồm 2 phần bổ sung cho nhau:

  • 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 muốn chụp ảnh. 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à chuỗi bất kỳ dài tối đa 1024 ký tự.
  • exposeOrigin: Nếu là true, thì có thể ứng dụng web được ghi lại sẽ cho thấy nguồn gốc của ứng dụng web được 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, hệ thống chỉ có thể ghi nhận các ứng dụng web có nguồn gốc là 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);

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

Đang chụp ảnh bên

Ứng dụng web chụp ảnh lưu giữ video MediaStreamTrack và có thể đọc thông tin về tên người dùng 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ó ô điều khiển ghi hình nào hoặc nếu ứng dụng web chụp ảnh không được phép đọc thông số này. Nếu có một ô điều khiển chụp ảnh và ứng dụng web chụp ảnh đượ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 đã thu thập thiết lập bằng navigator.mediaDevices.setCaptureHandleConfig().
  • origin: Nguồn gốc của ứng dụng web được thu thậ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 của CaptureHandle bằng cách theo dõi sự kiện "capturehandlechange" trên đối tượng MediaStreamTrack. Thay đổi sẽ xảy 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 các ứng dụng web đã chụp và đã ghi có thể cộng tác được bằng cách nhúng "pixel ma thuật" chẳng hạn như trong ứng dụng web đã ghi hoặc mã QR được nhúng vào luồng video. Tay cầm Capture cung cấp cơ chế đơn giản, đáng tin cậy và an toàn hơn. Việc này cũng cho phép ứng dụng web đã thu thập chọn đối tượng, có thể là chọn nguồn gốc hoặc toàn bộ web.

Xin lưu ý rằng navigator.mediaDevices.setCaptureHandleConfig() chỉ có sẵn cho khung chính cấp cao nhất trong bối cảnh duyệt web an toàn (chỉ giao thức 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 hãy nhớ xem mã nguồn.

Bản thu thử

Một số bản minh hoạ có 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.
}

Các 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 Region Capture (Chụp ảnh khu vực) sẽ cho phép cắt một đoạn video có nguồn gốc từ hoạt động chụp ảnh màn hình của thẻ hiện tại.
  • Chế độ Lấy nét có điều kiện sẽ 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 bề mặt màn hình đã chụp hoặc để tránh sự 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 ý kiến của bạn về trải nghiệm của bạn khi dùng tính năng Chụp tên người dùng.

Hãy cho chúng tôi biết 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 hay thuộc tính nào bị thiếu để triển khai ý tưởng của bạn không? Bạn có câu hỏi hoặc nhận xét về mô hình bảo mật này?

  • Báo cáo 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ề vấn đề hiện có.

Bạn gặp vấn đề trong quá trình triển khai?

Bạn có phát hiện lỗi trong quá trình 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?

  • Báo cáo 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à 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 dùng tên người dùng chụp ảnh 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 đó.

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

Xác nhận

Cảm ơn Joe Medley đã đánh giá bài viết này.