Bạn có thể chia sẻ thẻ, cửa sổ và màn hình trên nền tảng web bằng API Chụp ảnh màn hình. Nói ngắn gọn, getDisplayMedia() cho phép người dùng chọn một hoặc nhiều phần màn hình (chẳng hạn như cửa sổ) để 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. Bài viết này giới thiệu một số thay đổi gần đây đối với API để bảo vệ quyền riêng tư tốt hơn và ngăn chặn việc vô tình chia sẻ thông tin cá nhân.
Sau đây là danh sách các chế độ kiểm soát mà bạn có thể sử dụng để chia sẻ màn hình theo cách bảo đảm quyền riêng tư:
- Tuỳ chọn
displaySurfacecó thể cho biết rằng ứng dụng web ưu tiên cung cấp một loại giao diện hiển thị cụ thể (thẻ, cửa sổ hoặc màn hình). - Bạn có thể dùng tuỳ chọn
monitorTypeSurfacesđể ngăn người dùng chia sẻ toàn bộ màn hình. - Tuỳ chọn
surfaceSwitchingcho biết liệu Chrome có cho phép người dùng tự động chuyển đổi giữa các thẻ dùng chung hay không. - Bạn có thể dùng tuỳ chọn
selfBrowserSurfaceđể ngăn người dùng chia sẻ thẻ hiện tại. Điều này giúp tránh hiệu ứng "đại diện gương". - Tuỳ chọn
systemAudiođảm bảo Chrome chỉ cung cấp bản ghi âm có liên quan cho người dùng.
Các thay đổi đối với getDisplayMedia()
Những thay đổi sau đã được thực hiện cho getDisplayMedia().
Lựa chọn displaySurface
Các ứng dụng web có hành trình chuyên biệt của người dùng (hoạt động hiệu quả nhất khi chia sẻ cửa sổ hoặc màn hình) vẫn có thể yêu cầu Chrome hiển thị cửa sổ hoặc màn hình nổi bật hơn trong công cụ chọn nội dung nghe nhìn. Thứ tự của ưu đãi vẫn không thay đổi, nhưng ngăn có liên quan đã được chọn sẵn.
Các giá trị của tuỳ chọn displaySurface là:
"browser"cho các thẻ."window"đối với Windows."monitor"cho màn hình.
const stream = await navigator.mediaDevices.getDisplayMedia({
// Pre-select the "Window" pane in the media picker.
video: { displaySurface: "window" },
});
Lưu ý rằng chúng tôi không cung cấp tuỳ chọn chọn trước một cửa sổ hoặc màn hình cụ thể. Điều này là do thiết kế, vì điều đó sẽ trao cho ứng dụng web quá nhiều quyền kiểm soát người dùng.
Lựa chọn monitorTypeSurfaces
Để bảo vệ các công ty khỏi việc rò rỉ thông tin riêng tư do lỗi của nhân viên, giờ đây, các ứng dụng hội nghị truyền hình trên web có thể đặt monitorTypeSurfaces thành "exclude". Sau đó, Chrome sẽ loại trừ các màn hình trong công cụ chọn phương tiện. Để đưa dữ liệu này vào, hãy đặt thành "include". Hiện tại, giá trị mặc định cho monitorTypeSurfaces là "include", nhưng các ứng dụng web nên đặt giá trị này một cách rõ ràng vì giá trị mặc định có thể thay đổi trong tương lai.
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
// Remove the "Entire Screen" pane in the media picker.
monitorTypeSurfaces: "exclude",
});
Lưu ý rằng monitorTypeSurfaces: "exclude" rõ ràng sẽ loại trừ lẫn nhau với displaySurface: "monitor".
Lựa chọn surfaceSwitching
Một trong những lý do được nhắc đến nhiều nhất khi chia sẻ toàn bộ màn hình là mong muốn chuyển đổi liền mạch giữa việc chia sẻ nhiều nền tảng trong một phiên. Để giải quyết vấn đề này, giờ đây Chrome sẽ hiển thị một nút cho phép người dùng linh động chuyển đổi giữa các thẻ. Nút "Thay vào đó, hãy chia sẻ thẻ này" trước đây đã có sẵn cho các tiện ích của Chrome và hiện có thể được sử dụng bởi bất kỳ ứng dụng web nào gọi getDisplayMedia().
Nếu bạn đặt surfaceSwitching thành "include", thì trình duyệt sẽ hiển thị nút đã nêu. Nếu bạn đặt thành "exclude", hệ thống sẽ không cho người dùng thấy nút đó. Các ứng dụng web nên đặt giá trị rõ ràng, vì Chrome có thể thay đổi giá trị mặc định theo thời gian.
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
// Ask Chrome to expose browser-level UX elements that allow
// the user to switch the underlying track at any time,
// initiated by the user and without prior action by the web app.
surfaceSwitching: "include"
});
Lựa chọn selfBrowserSurface
Trong các tình huống hội nghị truyền hình, người dùng thường nhầm lẫn khi chọn chính thẻ hội nghị truyền hình, dẫn đến hiệu ứng "phòng phản chiếu", tiếng hú và sự nhầm lẫn chung.
Để bảo vệ người dùng khỏi chính mình, các ứng dụng hội nghị truyền hình trên web hiện có thể đặt selfBrowserSurface thành "exclude". Sau đó, Chrome sẽ loại trừ thẻ hiện tại khỏi danh sách thẻ được cung cấp cho người dùng. Để đưa dữ liệu này vào, hãy đặt thành "include". Hiện tại, giá trị mặc định cho selfBrowserSurface là "exclude", nhưng các ứng dụng web nên đặt giá trị này một cách rõ ràng vì giá trị mặc định có thể thay đổi trong tương lai.
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
selfBrowserSurface: "exclude" // Avoid 🦶🔫.
});
Lưu ý rằng selfBrowserSurface: "exclude" rõ ràng loại trừ lẫn nhau với preferCurrentTab: true.
Lựa chọn systemAudio
getDisplayMedia() cho phép ghi âm cùng với video. Tuy nhiên, không phải âm thanh nào cũng được tạo ra như nhau. Cân nhắc các ứng dụng hội nghị truyền hình trên web:
– Nếu người dùng chia sẻ một thẻ khác thì việc ghi âm cũng sẽ hợp lý.
– Mặt khác, âm thanh hệ thống bao gồm âm thanh của chính người tham gia từ xa và không được truyền lại cho họ.
Trong tương lai, bạn có thể loại trừ một số nguồn âm thanh khỏi bản ghi hình. Nhưng hiện tại, các ứng dụng hội nghị truyền hình trên web thường cho rằng cách tốt nhất là tránh ghi lại âm thanh của hệ thống. Trước đây, bạn có thể thực hiện việc này bằng cách kiểm tra nền tảng hiển thị mà người dùng đã chọn và dừng bản âm thanh nếu họ chọn chia sẻ màn hình. Tuy nhiên, điều này gây ra một vấn đề nhỏ, đó là một số người dùng bối rối khi họ chọn hộp kiểm một cách rõ ràng để chia sẻ âm thanh hệ thống và sau đó được những người tham gia từ xa thông báo rằng không có âm thanh đến.
Khi bạn đặt systemAudio thành "exclude", ứng dụng web có thể tránh gây khó hiểu cho người dùng thông qua các tín hiệu hỗn hợp. Chrome sẽ đề xuất ghi âm bên cạnh các thẻ và cửa sổ, nhưng không ghi bên cạnh màn hình.
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true, // Ask to capture audio; caveat follows.
systemAudio: "exclude" // Do not offer to capture *system* audio.
});
Hiện tại, giá trị mặc định cho systemAudio là "include", nhưng các ứng dụng web nên đặt giá trị này một cách rõ ràng vì giá trị mặc định có thể thay đổi trong tương lai.
Bản minh hoạ
Bạn có thể dùng các chế độ điều khiển cách chia sẻ màn hình này bằng cách chạy bản minh hoạ trên Glitch. Hãy nhớ xem mã nguồn.
Hỗ trợ trình duyệt
displaySurface,surfaceSwitchingvàselfBrowserSurfacecó trong Chrome 107 trên máy tính.
Hỗ trợ trình duyệt
- 105
- 105
- x
- x
systemAudiocó trong Chrome 105 trên máy tính.
Hỗ trợ trình duyệt
- 119
- 119
- x
- x
monitorTypeSurfacescó trong Chrome 119 trên máy tính.
Ý kiến phản hồi
Nhóm Chrome và cộng đồng web tiêu chuẩn muốn biết về trải nghiệm của bạn với các chế độ kiểm soát chia sẻ màn hình đó.
Cho chúng tôi biết về thiết kế
Có điều gì đó về các chế độ kiểm soát chia sẻ màn hình 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 sử dụng các chế độ kiểm soát chia sẻ màn hì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
- Quy cách
- Giải thích về
displaySurface - Giải thích về
monitorTypeSurfaces - Giải thích về
surfaceSwitching - Giải thích về
selfBrowserSurface - Giải thích về
systemAudio - Xem xét TAG
Xác nhận
Hình ảnh chính của John Schnobrich.
Cảm ơn Rachel Andrew đã đánh giá bài viết này.