Screen Capture API (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. Luồng này sau đó có thể được ghi lại hoặc chia sẻ với những người khác qua mạng. Tài liệu này giới thiệu về Tiêu điểm có điều kiện, một cơ chế giúp các ứng dụng web kiểm soát việc thẻ hoặc cửa sổ đã chụp có được lấy tiêu điểm khi bắt đầu chụp hay không, hoặc liệu trang chụp có tiếp tục được lấy tiêu điểm hay không.
Hỗ trợ trình duyệt
Tính năng Lấy nét có điều kiện hiện có trên Chrome 109.
Thông tin khái quát
Khi ứng dụng web bắt đầu chụp một thẻ hoặc cửa sổ, trình duyệt phải đưa ra quyết định — liệu giao diện được chụp nên được đưa lên đầu hay trang chụp ảnh nên vẫn được lấy tiêu điểm? 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 chọn.
Hãy cân nhắc một ứng dụng hội nghị truyền hình giả định trên web. Bằng cách đọc track.getSettings().displaySurface và có thể kiểm tra Tên người dùng ghi hình, ứng dụng hội nghị truyền hình trên web có thể hiểu nội dung mà người dùng chọn chia sẻ. Sau đó:
- Nếu thẻ hoặc cửa sổ đã ghi lại có thể điều khiển từ xa, hãy đảm bảo hội nghị truyền hình luôn tập trung.
- Nếu không, hãy lấy tiêu điểm thẻ hoặc cửa sổ đã chụp.
Trong ví dụ trên, ứng dụng hội nghị truyền hình trên web sẽ giữ nguyên tiêu điểm nếu chia sẻ bản trình bày, cho phép người dùng lật các trang trình bày từ xa. Tuy nhiên, nếu người dùng chọn chia sẻ trình chỉnh sửa văn bản, ứng dụng hội nghị truyền hình trên web sẽ chuyển ngay tiêu điểm sang thẻ hoặc cửa sổ đã chụp.
Sử dụng API Tiêu điểm có điều kiện
Tạo thực thể cho CaptureController rồi truyền nó vào getDisplayMedia(). Bằng cách gọi setFocusBehavior() ngay sau khi lời hứa trả về getDiplayMedia() được giải quyết, bạn có thể kiểm soát việc thẻ hoặc cửa sổ đã chụp 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 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 xem có cần lấy nét 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");
}
Thậm chí, bạn có thể quyết định xem có cần lấy tiêu điểm 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 giải quyết hoặc tối đa là một lần ngay sau khi lời hứa được giải quyết. Lệnh gọi cuối cùng ghi đè tất cả các lệnh gọi trước đó.
Chính xác hơn:
– getDisplayMedia() trả về hứa hẹn sẽ phân giải một tác vụ nhỏ. Việc gọi setFocusBehavior() sau khi tác vụ nhỏ đó hoàn tất sẽ gây ra lỗi.
– Việc gọi setFocusBehavior() sau một giây kể từ khi quá trình chụp bắt đầu sẽ không hoạt động.
Điều đó có nghĩa là cả hai đoạn mã sau đều 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 gửi trong các trường hợp sau:
- bản nhạc trong video của luồng do
getDisplayMedia()trả về không "trực tiếp". - sau khi
getDisplayMedia()trả về lời hứa được giải quyết, 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ể chơi với tính năng Tiêu điểm có điều kiện bằng cách chạy bản minh hoạ trên Glitch. Hãy nhớ xem 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 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 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 Lấy nét có điều kiện.
Cho chúng tôi biết về thiết kế
Có điều gì đó về tính năng Tiêu điểm có điều kiện không hoạt động như bạn 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. Sự cố nhỏ hoạt động tốt khi chia sẻ mã.
Hiển thị hỗ trợ
Bạn có định dùng tính năng Tiêu điểm có điều kiện 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
Hình ảnh chính của Elena Taranenko.
Cảm ơn Rachel Andrew đã đánh giá bài viết này.