API Chụp ảnh màn hình cho phép người dùng chọn một thẻ, cửa sổ hoặc màn hình để chụp dưới dạng luồng nội dung nghe nhìn. Sau đó, sự kiện phát trực tiếp này có thể được ghi lại hoặc chia sẻ với người khác qua mạng. Tài liệu này giới thiệu tính năng Lấy nét có điều kiện, một cơ chế cho các ứng dụng web kiểm soát việc thẻ hoặc cửa sổ được chụp có được lấy tiêu điểm khi bắt đầu chụp hay không, hoặc trang chụp có tiếp tục được lấy làm tâm điểm hay không.
Hỗ trợ trình duyệt
Tính năng Lấy nét có điều kiện có trong Chrome 109.
Thông tin khái quát
Khi một ứng dụng web bắt đầu chụp thẻ hoặc cửa sổ, trình duyệt sẽ phải đối mặt với một quyết định — nên đưa giao diện được chụp lên đầu hay trang chụp có nên duy trì làm tâm điểm không? Câu trả lời phụ thuộc vào lý do gọi getDisplayMedia() và trên nền tảng mà người dùng rốt cuộc là chọn.
Hãy cân nhắc một ứng dụng web hội nghị truyền hình giả định. Bằng cách đọc track.getSettings().displaySurface và có thể kiểm tra Tên người dùng chụp, ứng dụng web hội nghị truyền hình này có thể hiểu được nội dung mà người dùng đã chọn chia sẻ. Sau đó:
- Nếu thẻ hoặc cửa sổ đã ghi có thể được điều khiển từ xa, hãy tập trung vào hội nghị truyền hình.
- Nếu không, hãy lấy tiêu điểm vào thẻ hoặc cửa sổ đã chụp.
Trong ví dụ trên, ứng dụng web hội nghị truyền hình sẽ giữ lại tiêu điểm nếu chia sẻ một bản trình bày, cho phép người dùng lật qua các trang trình bày từ xa. Tuy nhiên, nếu người dùng chọn chia sẻ một trình chỉnh sửa văn bản, thì ứng dụng web hội nghị truyền hình sẽ ngay lập tức chuyển tiêu điểm sang thẻ hoặc cửa sổ đã ghi.
Sử dụng API lấy nét có điều kiện
Tạo thực thể cho CaptureController rồi truyền vào getDisplayMedia(). Bằng cách gọi setFocusBehavior() ngay sau khi getDiplayMedia() trả về hứa hẹn sẽ được xử lý, bạn có thể kiểm soát việc thẻ hoặc cửa sổ đã ghi có được lấy tiêu điểm hay không. Chỉ có thể thực hiện việc này nếu người dùng đã chia sẻ một thẻ hoặc một cửa sổ.
const controller = new CaptureController();
// Prompt the user to share a tab, a window or a screen.
const stream =
await navigator.mediaDevices.getDisplayMedia({ controller });
const [track] = stream.getVideoTracks();
const displaySurface = track.getSettings().displaySurface;
if (displaySurface == "browser") {
// Focus the captured tab.
controller.setFocusBehavior("focus-captured-surface");
} else if (displaySurface == "window") {
// Do not move focus to the captured window.
// Keep the capturing page focused.
controller.setFocusBehavior("focus-capturing-application");
}
Khi quyết định có nên lấy tiêu điểm hay không, bạn có thể xem xét Tên người dùng chụp.
// Retain focus if capturing a tab dialed to example.com.
// Focus anything else.
const origin = track.getCaptureHandle().origin;
if (displaySurface == "browser" && origin == "https://example.com") {
controller.setFocusBehavior("focus-capturing-application");
} else if (displaySurface != "monitor") {
controller.setFocusBehavior("focus-captured-surface");
}
Bạn thậm chí có thể quyết định xem có nên tập trung trước khi gọi getDisplayMedia() hay không.
// Focus the captured tab or window when capture starts.
const controller = new CaptureController();
controller.setFocusBehavior("focus-captured-surface");
// Prompt the user to share their screen.
const stream =
await navigator.mediaDevices.getDisplayMedia({ controller });
Bạn có thể tuỳ ý gọi setFocusBehavior() nhiều lần trước khi lời hứa được thực hiện hoặc tối đa là một lần ngay sau khi lời hứa đó được thực hiện. Lệnh gọi gần đây nhất sẽ ghi đè mọi lệnh gọi trước đó.
Chính xác hơn:
– Lời hứa getDisplayMedia() được trả về sẽ phân giải trong một tác vụ vi mô. Nếu gọi setFocusBehavior() sau khi tác vụ vi mô đó hoàn tất, thì sẽ xảy ra lỗi.
– Việc gọi setFocusBehavior() nhiều hơn một giây sau khi bắt đầu chụp sẽ không hoạt động.
Điều đó có nghĩa là cả hai đoạn mã sau đều sẽ không thành công:
// Prompt the user to share their screen.
const stream =
await navigator.mediaDevices.getDisplayMedia({ controller });
// Too late, because it follows the completion of the task
// on which the getDisplayMedia() promise resolved.
// This will throw.
setTimeout(() => {
controller.setFocusBehavior("focus-captured-surface");
});
// Prompt the user to share their screen.
const stream =
await navigator.mediaDevices.getDisplayMedia({ controller });
const start = new Date();
while (new Date() - start <= 1000) {
// Idle for ≈1s.
}
// Because too much time has elapsed, the browser will have
// already decided whether to focus.
// This fails silently.
controller.setFocusBehavior("focus-captured-surface");
Việc gọi setFocusBehavior() cũng sẽ gửi trong các trường hợp sau:
- bản video của luồng do
getDisplayMedia()trả về không phải là "live". - sau khi
getDisplayMedia()trả về lời hứa sẽ được phân giải, nếu người dùng đã chia sẻ màn hình (không phải thẻ hoặc cửa sổ).
Mẫu
Bạn có thể sử dụng tính năng Lấy nét có điều kiện bằng cách chạy bản minh hoạ trên Glitch. Hãy chắc chắn kiểm tra mã nguồn.
Phát hiện tính năng
Để kiểm tra xem CaptureController.setFocusBehavior() có được hỗ trợ hay không, hãy sử dụng:
if (
"CaptureController" in window &&
"setFocusBehavior" in CaptureController.prototype
) {
// CaptureController.setFocusBehavior() is supported.
}
Ý kiến 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 Tập trung có điều kiện.
Hãy cho chúng tôi biết về thiết kế
Có vấn đề gì về tính năng Tập trung có điều kiện 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?
- 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 hiệu quả để chia sẻ mã.
Thể hiện sự ủng hộ
Bạn có định dùng tính năng Tập trung có điều kiện 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 thấy các nhà cung cấp trình duyệt khác quan trọng như thế nào trong 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.
Các đường liên kết hữu ích
Xác nhận
Hình ảnh chính của Elena Taranenko.
Cảm ơn Rachel Andrew đã đánh giá bài viết này.