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

François Beaufort

Elad Alon

Bạn có thể chia sẻ các thẻ, cửa sổ và màn hình trên nền tảng web bằng Screen Capture API. 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ư một cửa sổ) để chụp dưới dạng luồng nội dung nghe nhìn. Sau đó, bạn có thể ghi lại hoặc chia sẻ luồng này với những người khác qua mạng. Gần đây, chúng tôi đã điều chỉnh 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.

Dưới đâ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 mà vẫn bảo vệ quyền riêng tư:

• Tuỳ chọn displaySurface có thể cho biết rằng ứng dụng web ưu tiê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).
• Bạn có thể sử dụng tuỳ chọn monitorTypeSurfaces để 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ẻ được chia sẻ 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 hiệu ứng "hiệu ứng hình ảnh phản chiếu".
• Tuỳ chọn systemAudio đảm bảo rằng Chrome chỉ cung cấp tính năng ghi âm phù hợp cho người dùng.

Thay đổi đối với getDisplayMedia()

Chúng tôi đã thực hiện các thay đổi sau đối với getDisplayMedia().

Tuỳ chọn displaySurface

Các ứng dụng web có hành trình người dùng chuyên biệt (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 cung cấp cửa sổ hoặc màn hình nổi bật hơn trong bộ chọn nội dung nghe nhìn. Thứ tự của mặt hàng vẫn không thay đổi, nhưng ngăn có liên quan được chọn trước.

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" },
});

Ngăn "Cửa sổ" được chọn trước trong bộ chọn nội dung nghe nhìn.

Xin 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ì việc đó sẽ khiến ứng dụng web có quá nhiều quyền đối với 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 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 bộ chọn nội dung nghe nhìn. Để đưa vào, hãy đặt giá trị này 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",
});

Ngăn "Toàn màn hình" không hiển thị trong bộ chọn nội dung nghe nhìn.

Xin lưu ý rằng monitorTypeSurfaces: "exclude" tường minh loại trừ lẫn nhau với displaySurface: "monitor".

Tuỳ chọn surfaceSwitching

Một trong những lý do hàng đầu khiến người dùng chia sẻ toàn bộ màn hình là mong muốn chuyển đổi liền mạch giữa các nền tảng chia sẻ trong một phiên. Để giải quyết vấn đề này, Chrome hiện hiển thị một nút cho phép người dùng linh động chuyển đổi giữa việc chia sẻ các thẻ khác nhau. Trước đây, nút "Chia sẻ thẻ này" này chỉ dành cho các tiện ích Chrome, nhưng giờ đây, mọi ứng dụng web gọi getDisplayMedia() đều có thể sử dụng nút này.

Nút "Chia sẻ thẻ này" trong Chrome.

Nếu bạn đặt surfaceSwitching thành "include", trình duyệt sẽ hiển thị nút nói trên. Nếu bạn đặt thành "exclude", thì nút đó sẽ không hiển thị cho người dùng. Bạn nên đặt một giá trị rõ ràng cho ứng dụng web 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 trường hợp hội nghị truyền hình, người dùng thường mắc lỗi chọn chính thẻ hội nghị truyền hình, dẫn đến hiệu ứng "hội trường gương", tiếng hú và sự nhầm lẫn chung.

Để bảo vệ người dùng khỏi chính họ, các ứng dụng web hội nghị truyền hình 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 vào, hãy đặt giá trị này 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 🦶🔫.
});

Thẻ hiện tại bị loại trừ, chỉ có thẻ thứ hai.

Xin lưu ý rằng selfBrowserSurface: "exclude" tường minh loại trừ lẫn nhau với preferCurrentTab: true.

Tuỳ chọn systemAudio

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

Tính năng chia sẻ âm thanh trên thẻ được cung cấp trong ngăn "Thẻ Chrome", nhưng không có trong ngăn "Toàn bộ màn hình".

Bằng cách đặ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 lại âm thanh cùng với các thẻ và cửa sổ, nhưng không ghi lại 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 có thể thay đổi trong tương lai.

Bản minh hoạ

Bạn có thể thử nghiệm 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 nhớ xem mã nguồn.

Hỗ trợ trình duyệt

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

Hỗ trợ trình duyệt

• 105
• 105
• x
• x

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

Hỗ trợ trình duyệt

• 119
• 119
• x
• x

• 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 trải nghiệm của bạn về các chế độ kiểm soát chia sẻ màn hình đó.

Giới thiệu 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ư mong đợi không? Hay 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 của mình 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 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ào một vấn đề hiện có.

Bạn gặp vấn đề khi triển khai?

Bạn có phát hiện lỗi khi 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 càng nhiều thông tin chi tiết càng tốt và hướng dẫn đơn giản để tái tạo lỗi. Glitch hoạt động hiệu quả để chia sẻ mã.

Thể hiện sự ủng hộ

Bạn có dự định sử dụng các chế độ kiểm soát chia sẻ màn hình đó không? Sự ủng hộ 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 thấy tầm quan trọng của việc hỗ trợ các tính năng đó.

Hãy gửi một tweet đến @ChromiumDev và cho chúng tôi biết bạn đang sử dụng công cụ này ở đâu và như thế nào.

Đường liên kết hữu ích

• Thông số kỹ thuật
• Video giải thích về displaySurface
• Video giải thích về monitorTypeSurfaces
• Video giải thích về surfaceSwitching
• Video giải thích về selfBrowserSurface
• Video giải thích về systemAudio
• Xem xét thẻ

Lời cảm ơn

Cảm ơn Rachel Andrew đã xem xét