保障隱私的分享螢幕畫面控制項

François Beaufort

Elad Alon

您現在可以使用 Screen Capture API 在網頁平台上分享分頁、視窗和螢幕畫面。簡而言之，getDisplayMedia() 可讓使用者選取某個畫面或部分畫面 (例如視窗)，擷取為媒體串流。這項串流內容可透過網路錄製或與他人分享。我們最近對 API 進行了一些變更，以便進一步保護隱私權，並避免意外分享個人資訊。

以下列出可用於分享隱私保護螢幕畫面的控制項：

• displaySurface 選項可指出網頁應用程式偏好提供特定的顯示介面類型 (分頁、視窗或畫面)。
• 您可以使用 monitorTypeSurfaces 選項，禁止使用者分享整個畫面。
• surfaceSwitching 選項會指出 Chrome 是否應允許使用者動態切換共用分頁。
• selfBrowserSurface 選項可用於禁止使用者分享目前的分頁。這樣可避免產生「鏡廳」效果。
• systemAudio 選項可確保 Chrome 只向使用者提供相關的音訊擷取內容。

getDisplayMedia() 的變更

我們已對 getDisplayMedia() 進行以下變更。

displaySurface 選項

網頁應用程式如果有專屬的使用者歷程，且最適合用於分享視窗或畫面，仍可要求 Chrome 在媒體挑選器中提供更顯眼的視窗或畫面。優惠的排序保持不變，但相關窗格會預先選取。

displaySurface 選項的值如下：

• "browser" 代表分頁。
• "window" 適用於 Windows。
• "monitor" 適用於螢幕。

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

媒體選擇器中預先選取了「Window」窗格。

請注意，我們不提供預先選取特定視窗或畫面的選項。我們採用這種設計，因為這麼做會讓網頁應用程式過度消耗使用者。

monitorTypeSurfaces 選項

為避免員工因操作錯誤而洩漏私人資訊，現在視訊會議網頁應用程式可以將 monitorTypeSurfaces 設為 "exclude"。Chrome 就會在媒體挑選器中排除這些畫面。如要納入，請將其設為 "include"。目前，monitorTypeSurfaces 的預設值是 "include"，但建議網頁應用程式明確設定這個值，因為預設值日後可能會改變。

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Remove the "Entire Screen" pane in the media picker.
  monitorTypeSurfaces: "exclude",
});

媒體挑選器未顯示「整個螢幕畫面」窗格。

請注意，明確的 monitorTypeSurfaces: "exclude" 與 displaySurface: "monitor" 互斥。

surfaceSwitching 選項

使用者最常分享整個螢幕畫面的原因之一，是希望在工作階段中流暢切換不同畫面的分享畫面。為解決這個問題，Chrome 現已提供按鈕，讓使用者可動態切換分享的不同分頁。以往 Chrome 擴充功能可以使用這個「改為分享這個分頁」按鈕，所有呼叫 getDisplayMedia() 的網頁應用程式現在都能使用這個按鈕。

Chrome 中的「改為分享這個分頁」按鈕。

如果 surfaceSwitching 設為 "include"，瀏覽器就會顯示該按鈕。如果設為 "exclude"，則系統不會向使用者顯示該按鈕。建議網頁應用程式設定明確的值，因為 Chrome 可能會隨時間變更預設值。

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

selfBrowserSurface 選項

在視訊會議情境中，使用者經常會誤選視訊會議分頁，導致「鏡廳」效果、嘯叫聲和一般混淆。

為保護使用者免於遭受自己攻擊，視訊會議網頁應用程式現在可以將 selfBrowserSurface 設為 "exclude"。接著，Chrome 會從提供給使用者的分頁清單中排除目前的分頁。如要納入，請將其設為 "include"。目前 selfBrowserSurface 的預設值為 "exclude"，但建議網頁應用程式明確設定這個值，因為預設值日後可能會有所變動。

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

目前的分頁已遭到排除，只會顯示第二個分頁。

請注意，明確的 selfBrowserSurface: "exclude" 與 preferCurrentTab: true 互斥。

systemAudio 選項

getDisplayMedia() 可同時擷取音訊和影片。但並非所有音訊都獲得同等的效應。請考慮使用視訊會議網頁應用程式： - 如果使用者分享其他分頁，也應擷取音訊。- 另一方面，系統音訊包含遠端參與者自己的音訊，因此不應傳回給他們。

日後，您或許可以從擷取內容中排除某些音訊來源。不過，目前視訊會議網頁應用程式通常會避免擷取系統音訊。先前可以透過檢查使用者選擇的顯示介面，並在使用者選擇分享螢幕畫面時停止音軌，不過，這會導致一個小問題：部分使用者明確勾選方塊來分享系統音訊，但遠端參與者卻告知沒有音訊傳入，這會讓使用者感到困惑。

分頁音訊分享功能會顯示在「Chrome 分頁」窗格中，但不會顯示在「整個畫面」窗格中。

將 systemAudio 設為 "exclude"，網頁應用程式就能避免混淆使用者。Chrome 會在分頁和視窗旁邊提供擷取音訊的功能，但不會在畫面旁邊擷取音訊。

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.
});

目前 systemAudio 的預設值為 "include"，但建議網頁應用程式明確設定這個值，因為預設值日後可能會有所變動。

示範

您可以在 Glitch 上執行示範，試用這些螢幕分享控制項。請務必查看原始碼。

瀏覽器支援

• displaySurface、surfaceSwitching 和 selfBrowserSurface 可在電腦版 Chrome 107 中使用。

瀏覽器支援

• 105
• 105
• x
• x

• 可透過電腦版 Chrome 105 使用 systemAudio。

瀏覽器支援

• 119
• 119
• x
• x

• monitorTypeSurfaces 適用於 Chrome 119 桌面版。

意見回饋

Chrome 團隊和網路標準社群希望瞭解你使用這些螢幕分享控制項的體驗。

請提供設計相關資訊

這些螢幕畫面分享控制選項是否無法正常運作？或者，您是否缺少實作想法所需的方法或屬性？您對安全性模型有疑問或意見嗎？

• 在 GitHub 存放區中提出規格問題，或在現有問題中加入您的想法。

導入時發生問題？

你是否發現 Chrome 實作項目有錯誤？還是採用與規格不同？

• 前往 https://new.crbug.com 回報錯誤。請盡可能提供所有細節，以及簡單的重製說明。Glitch 適合用於分享程式碼。

顯示支援

您是否打算使用這些螢幕分享控制項？您的公開支援服務可幫助 Chrome 團隊優先開發特定功能，並讓其他瀏覽器廠商瞭解支援這些功能的重要性。

請發推文給 @ChromiumDev，告訴我們你在哪裡使用這項功能，以及使用方式。

實用連結

• 規格
• displaySurface 說明文件
• monitorTypeSurfaces 說明文件
• surfaceSwitching 說明文件
• selfBrowserSurface 說明文件
• systemAudio 說明文件
• TAG 審查

特別銘謝

感謝 Rachel Andrew 審查