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

使用者可透過 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" },
});

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

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() 的網頁應用程式現在都能使用這個按鈕。

如果將 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() 允許在影片旁擷取音訊。但並非所有音訊都獲得同等的效應。建議使用視訊會議網頁應用程式： - 如果使用者分享另一個分頁，錄製音訊也很合理。 - 系統音訊包括遠端參與者個人音訊內容，不得傳回這些音訊。

日後你可以在拍攝時排除部分音訊來源。但以目前來說，視訊會議網頁應用程式通常最好避免擷取系統音訊。設定方式為檢查使用者選擇的顯示介面，並在使用者選擇分享螢幕畫面時停止音軌。不過，這樣做會引發小問題，如果使用者明確勾選分享系統音訊的核取方塊，導致部分使用者感到困惑，導致遠端參與者沒有收到任何音訊，他們就會感到困惑。

將 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 上使用。

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

• 你可以透過電腦版 Chrome 119 使用 monitorTypeSurfaces。

意見回饋

Chrome 團隊和網路標準社群想瞭解您使用這些螢幕畫面分享控制功能的經驗，

請與我們分享設計

這些螢幕畫面分享控制選項是否無法正常運作？或是你還需要實現創意的方法或屬性嗎？對安全性模型有任何疑問或意見嗎？

• 在 GitHub 存放區上提交規格問題，或將你的想法新增至現有問題。

無法導入嗎？

您發現 Chrome 實作錯誤嗎？還是採用與規格不同？

• 前往 https://new.crbug.com 回報錯誤。請盡可能附上所有細節，並提供重現重現說明的簡單操作說明。Glitch 很適合用來分享代碼。

顯示支援

你打算使用這些螢幕畫面分享控制選項嗎？您的公開支援服務可協助 Chrome 團隊優先開發特定功能，並說明其他瀏覽器廠商對於這些功能的支援有多重要。

請將 Twitter 訊息傳送給 @ChromiumDev，並告訴我們您使用何處及使用方式。

實用連結

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

特別銘謝

主頁橫幅由 John Schnobrich 提供。

感謝 Rachel Andrew 撰寫這篇文章。