Chế độ kiểm soát việc chia sẻ màn hình bảo đảm quyền riêng tư

Bạn hiệ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. Tóm lại, getDisplayMedia() cho phép người dùng chọn một màn hình hoặc một phần màn hình (chẳng hạn như cửa sổ) để ghi lại 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. 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ệ tốt hơn quyền riêng tư 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ể dùng để bảo đảm quyền riêng tư cho tính năng chia sẻ màn hình:

• Tuỳ chọn displaySurface có thể cho biết ứng dụng web muốn cung cấp một loại nền tảng hiển thị cụ thể (thẻ, cửa sổ hoặc màn hình).
• Tuỳ chọn monitorTypeSurfaces có thể được dùng để ngăn người dùng chia sẻ toàn bộ màn hình.
• Tuỳ chọn surfaceSwitching cho biết liệu Chrome có cho phép người dùng linh động chuyển đổi giữa các thẻ dùng chung hay không.
• Bạn có thể sử 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 "sàn gương" hiệu ứng.
• Tuỳ chọn systemAudio đảm bảo Chrome chỉ cung cấp tính năng ghi âm phù hợp cho người dùng.

Các thay đổi đối với getDisplayMedia()

Các thay đổi sau đã được thực hiện đối với getDisplayMedia().

Tuỳ 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ẻ một cửa sổ hoặc màn hình, vẫn có thể yêu cầu Chrome cung cấp 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 liên quan đã được chọn sẵn.

Các giá trị cho tuỳ chọn displaySurface là:

• "browser" cho thẻ.
• "window" cho cửa sổ.
• "monitor" cho màn hình.

const stream = await navigator.mediaDevices.getDisplayMedia({
  // Pre-select the "Window" pane in the media picker.
  video: { displaySurface: "window" },
});

Xin lưu ý rằng chúng tôi không cung cấp lựa chọn chọn trước một cửa sổ hoặc màn hình cụ thể. Điều này là theo thiết kế vì điều đó sẽ cung cấp cho ứng dụng web quá nhiều quyền kiểm soát của người dùng.

Tuỳ 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, các ứng dụng web tổ chức hội nghị truyền hình hiện 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 này 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",
});

Xin lưu ý rằng monitorTypeSurfaces: "exclude" rõ ràng sẽ loại trừ lẫn nhau với displaySurface: "monitor".

Tuỳ chọn surfaceSwitching

Một trong những lý do hàng đầu được nhắc đến cho việc chia sẻ toàn bộ màn hình là bạn muốn chuyển đổi liền mạch giữa việc chia sẻ nhiều khu vực 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 hoạt chuyển đổi giữa các chế độ chia sẻ thẻ. "Chia sẻ thẻ này" nút trước đây có sẵn cho các tiện ích của Chrome và giờ đây có thể được bất kỳ ứng dụng web nào gọi getDisplayMedia() sử dụng.

Nếu bạn đặt surfaceSwitching thành "include", trình duyệt sẽ hiện nút đã nói. Nếu bạn đặt thành "exclude", thì người dùng sẽ không thấy nút đó. Ứng dụng web nên đặt mộ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"
});

Tuỳ chọn selfBrowserSurface

Trong các tình huống hội nghị truyền hình, người dùng thường mắc sai lầm khi chọn thẻ hội nghị truyền hình, dẫn đến việc xuất hiện "những chiếc gương" hiệu ứng, tiếng hú và gây nhầm lẫn nói chung.

Để bảo vệ người dùng, giờ đây, các ứng dụng web hội nghị truyền hình có thể đặt selfBrowserSurface thành "exclude". Khi đó, Chrome sẽ loại trừ thẻ hiện tại khỏi danh sách các 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 này có thể thay đổi trong tương lai.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  selfBrowserSurface: "exclude"  // Avoid 🦶🔫.
});

Xin lưu ý rằng selfBrowserSurface: "exclude" rõ ràng sẽ loại trừ lẫn nhau với preferCurrentTab: true.

Tuỳ chọn systemAudio

getDisplayMedia() cho phép ghi âm cùng với video. Tuy nhiên, không phải mọi âm thanh đều được tạo ra như nhau. Hãy cân nhắc các ứng dụng web dùng tính năng hội nghị truyền hình sau đây: – Nếu người dùng chia sẻ một thẻ khác thì việc ghi âm cũng hợp lý. - Mặt khác, âm thanh của hệ thống bao gồm cả âm thanh của những người tham gia từ xa âm thanh của chính mình 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 âm. Tuy nhiên, hiện tại, các ứng dụng web hội nghị truyền hình thường tìm cách tránh ghi lại âm thanh của hệ thống. Trước đây, bạn có thể kiểm tra bằng cách kiểm tra xem người dùng chọn giao diện hiển thị nào 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 sẽ bối rối khi họ đánh dấu rõ ràng vào hộp đánh dấu để chia sẻ âm thanh hệ thống, sau đó được những người tham gia từ xa thông báo rằng không có âm thanh nào được gửi đến.

Bằng cách đặt systemAudio thành "exclude", một ứng dụng web có thể tránh gây khó khăn cho người dùng do các tín hiệu hỗn hợp. Chrome sẽ đề xuất ghi âm cùng với thẻ và cửa sổ, nhưng không hỗ trợ cùng với 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 này có thể thay đổi trong tương lai.

Bản minh hoạ

Bạn có thể sử dụng các chế độ điều khiển chia sẻ màn hình này 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.

Hỗ trợ trình duyệt

• displaySurface, surfaceSwitching và selfBrowserSurface có trong Chrome 107 trên máy tính.

• systemAudio có trong Chrome 105 trên máy tính.

• monitorTypeSurfaces có trong Chrome 119 trên máy tính.

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 với các chế độ kiểm soát việc chia sẻ màn hình đó.

Hãy cho chúng tôi biết về thiết kế

Có điều gì đó về các chế độ kiểm soát việc chia sẻ màn hình 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 hiệu quả để chia sẻ mã.

Thể hiện sự ủng hộ

Bạn có định sử dụng các chế độ kiểm soát việc chia sẻ màn hì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 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

• Thông số kỹ thuật
• displaySurface thông báo giải thích
• monitorTypeSurfaces thông báo giải thích
• surfaceSwitching thông báo giải thích
• selfBrowserSurface thông báo giải thích
• systemAudio thông báo giải thích
• Bài đánh giá 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.