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

François Beaufort
François Beaufort
Elad Alon
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ư 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 đã thay đổ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ể 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 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 "hội trường gươ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.

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

Chúng tôi đã thực hiện các thay đổi sau đây đố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" },
});
Ảnh chụp màn hình công cụ chọn nội dung nghe nhìn có lựa chọn sẵn
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 công cụ chọn phương tiệ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 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",
});
Ảnh chụp màn hình của công cụ chọn nội dung nghe nhìn không có
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" 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 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.

Ảnh chụp màn hình nút dùng để linh động chuyển đổi giữa các thẻ chia sẻ
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ì 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 nhầm lẫn khi chọn chính thẻ hội nghị truyền hình, dẫn đến hiệu ứng "những chiếc gương", tiếng hú và sự 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 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 🦶🔫.
});
Ảnh chụp màn hình công cụ chọn nội dung nghe nhìn, không bao gồm thẻ hiện tại
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. 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 chính những 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 web tổ chức 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ể 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.

Ảnh chụp màn hình của công cụ chọn nội dung nghe nhìn có tính năng chia sẻ âm thanh trên thẻ
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", 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 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 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.

Hỗ trợ trình duyệt

  • Chrome: 105.
  • Edge: 105.
  • Firefox: không được hỗ trợ.
  • Safari: không được hỗ trợ.

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

Hỗ trợ trình duyệt

  • Chrome: 119.
  • Edge: 119.
  • Firefox: không được hỗ trợ.
  • Safari: không được hỗ trợ.

  • 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 đó.

Giới thiệu 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 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 này?

  • 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 hiện 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.

Lời cảm ơn

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