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

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

媒體挑選器中不會顯示「Entire Screen」窗格。

請注意，明確的 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

• systemAudio 適用於電腦版 Chrome 105。

瀏覽器支援

• 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 審查