Hỗ trợ trình duyệt
- 102
- 102
- x
- x
Nền tảng web hiện đi kèm với tay cầm chụp, một cơ chế giúp cộng tác giữa việc chụp và chụp các ứng dụng web. Tay cầm chụp cho phép ứng dụng web chụp ảnh có thể xác định ứng dụng web đã chụp một cách hợp lý và tự tin. (Nếu ứng dụng web đã chụp đã chọn sử dụng).
Một vài ví dụ minh hoạ các lợi ích này.
Ví dụ 1: Nếu một ứng dụng hội nghị truyền hình trên web đang ghi âm ứng dụng web bản trình bày, thì ứng dụng hội nghị truyền hình trên web có thể hiển thị các chế độ điều khiển để người dùng di chuyển giữa các trang trình bày. Vì các chức năng điều khiển được nhúng trực tiếp trong ứng dụng hội nghị truyền hình trên web, nên người dùng không phải chuyển đổi nhiều lần giữa thẻ hội nghị truyền hình và thẻ trình bày. Với gánh nặng này được gỡ bỏ, người dùng giờ đây có thể tập trung hoàn toàn hơn vào việc phân phối bản trình bày của họ.
Ví dụ 2: Hiệu ứng "đại diện gương" xuất hiện 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 ghi lại thẻ đang diễn ra cuộc gọi hội nghị truyền hình và ứng dụng hội nghị truyền hình trên web hiển thị bản xem trước trên thiết bị, thì người dùng sẽ thấy được 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 việc tự chụp; ví dụ: bằng cách chặn bản xem trước cục bộ của ứng dụng web.
Giới thiệu về tay cầm chụp
Tay cầm chụp gồm 2 phần bổ sung cho nhau:
- Các ứng dụng web đã ghi lại có thể chọn tiết lộ một số thông tin nhất định cho một số nguồn gốc bằng
navigator.mediaDevices.setCaptureHandleConfig(). - Sau đó, việc ghi lại các ứng dụng web có thể đọc thông tin đó bằng
getCaptureHandle()trên các đối tượngMediaStreamTrack.
Mặt chụp
Ứng dụng web có thể hiển thị thông tin cho các ứng dụng web sắp thu thập. Để thực hiện việc này, hãy gọi navigator.mediaDevices.setCaptureHandleConfig() với 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à chuỗi bất kỳ tối đa 1024 ký tự.exposeOrigin: Nếutrue, nguồn gốc của ứng dụng web đã chụp có thể hiển thị với việc chụp ứng dụng web.permittedOrigins: Các giá trị hợp lệ là (i) một mảng trống, (ii) một mảng chỉ có một mục"*", hoặc (iii) một mảng nguồn gốc. NếupermittedOriginsbao 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 đượcCaptureHandle. Nếu không, bạn chỉ có thể quan sát khi ghi lại các ứng dụng web có nguồn gốc từpermittedOrigins.
Ví dụ sau cho thấy cách hiển thị UUID được tạo ngẫu nhiên dưới dạng 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 đã chụp không biết liệu mình có đang chụp ảnh hay không. Trừ phi ứng dụng web chụp ảnh sử dụng thông tin CaptureHandle để thiết lập hoạt động giao tiếp với ứng dụng web đã thu thập (ví dụ: sử dụng tính năng nhắn tin qua trình thực thi hoặc một 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ữ một video MediaStreamTrack và có thể đọc thông tin về ô điều khiển chụp ảnh bằng cách gọi getCaptureHandle() trên MediaStreamTrack đó. Lệnh gọi này trả về null nếu không có tay cầm chụp hoặc nếu ứng dụng web chụp ảnh không được phép đọc mã này. Nếu có tay cầm chụp và ứng dụng web chụp ảnh được thêm vào permittedOrigins, 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ằngnavigator.mediaDevices.setCaptureHandleConfig().origin: Nguồn gốc của ứng dụng web đã ghi lại nếu bạn đặtexposeOriginthànhtrue. Nếu không, dữ liệu 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 trong một bả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 các sự kiện "capturehandlechange" trên đối tượng MediaStreamTrack. Thay đổi xảy ra khi:
- Ứng dụng web đã ghi lại gọi
navigator.mediaDevices.setCaptureHandleConfig(). - Hoạt động di chuyển trên nhiều tài liệu xảy ra trong ứng dụng web đã chụp.
videoTrack.addEventListener('capturehandlechange', event => {
captureHandle = event.target.getCaptureHandle();
// Consume new capture handle...
});
Mức độ bảo mật và quyền riêng tư
Về mặt lý thuyết, hiện nay, khả năng cộng tác giữa việc chụp và ghi lại các ứng dụng web là bằng cách nhúng "pixel ma thuật" vào ứng dụng web đã chụp hoặc nhúng mã QR vào luồng video. Chụp tay cầm có cơ chế đơn giản hơn, đáng tin cậy hơn và an toàn hơn. Thao tác này cũng cho phép ứng dụng web thu thập chọn đối tượng – chọn nguồn gốc hoặc toàn bộ web.
Lưu ý rằng navigator.mediaDevices.setCaptureHandleConfig() chỉ dùng được 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ạy mẫu trên Tay cầm chụp ảnh để chơi trò chơi đó. Hãy xem qua mã nguồn.
Bản thu thử
Một số bản minh hoạ có sẵn tại:
Phát hiện tính năng
Để kiểm tra xem getCaptureHandle() có được hỗ trợ hay không, hãy 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 dùng:
if ('setCaptureHandleConfig' in navigator.mediaDevices) {
// navigator.mediaDevices.setCaptureHandleConfig() is supported.
}
Các bước tiếp theo
Sau đây là phần bật mí về những gì sẽ cải thiện 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 theo vùng sẽ cho phép cắt một bản nhạc video bắt nguồn từ quá trình chụp màn hình của thẻ hiện tại.
- Tiêu điểm 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.
Ý kiến phản hồi
Nhóm Chrome và cộng đồng về các tiêu chuẩn web muốn biết về trải nghiệm của bạn khi sử dụng tính năng Capture Capture.
Cho chúng tôi biết về thiết kế
Có vấn đề nào về Tên người dùng chụp không hoạt động như mong đợi không? Hoặc 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 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 một vấn đề về thông số kỹ thuật lên kho lưu trữ GitHub hoặc thêm ý kiến vào một vấn đề hiện có.
Bạn gặp vấn đề khi triển khai?
Bạn có tìm thấy lỗi khi triển khai Chrome không? Hay cách triển khai có khác với quy cách 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à hướng dẫn đơn giản để tái tạo. Hiệu ứng nhiễu rất phù hợp để chia sẻ bản sao chép nhanh chóng và dễ dàng.
Hiển thị hỗ trợ
Bạn có định dùng Tên người dùng chụp ảnh không? Hoạt động 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 biết tầm quan trọng của việc hỗ trợ họ.
Gửi một bài đăng trên Twitter đến @ChromiumDev để cho chúng tôi biết vị trí và cách bạn sử dụng công cụ này.
Các đường liên kết hữu ích
Xác nhận
Cảm ơn Joe Medley đã xem lại bài viết này.