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

網路平台已採用 Screen Capture API 共用分頁、視窗和畫面。簡單來說，getDisplayMedia() 可讓使用者選取特定畫面或部分畫面 (例如視窗) 做為媒體串流擷取。然後，你也可以錄製這個直播，或透過網路與他人分享。本文說明最近對 API 所做的一些變更，以進一步保護隱私權並防止意外分享個人資訊。

您可以採用下列控制項來保護分享螢幕畫面：

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

對「getDisplayMedia()」所做的變更

系統已對 getDisplayMedia() 進行下列變更。

displaySurface 選項

包含專門的使用者歷程 (最適合用於分享視窗或畫面) 的網頁應用程式仍可要求 Chrome 以更醒目的方式在媒體選擇器中顯示視窗或畫面。優惠的順序維持不變，但系統會預先選取相關窗格。

displaySurface 選項的值如下：

• "browser" 代表分頁。
• "window"。
• "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 上的示範，即可運用這些分享螢幕畫面控制項。請務必查看原始碼。

瀏覽器支援

• 電腦版 Chrome 107 支援「displaySurface」、「surfaceSwitching」和「selfBrowserSurface」。

• 「systemAudio」適用於電腦版 Chrome 105。

• 「monitorTypeSurfaces」適用於電腦版 Chrome 119。

意見回饋：

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

介紹設計

這些螢幕分享控制項是否有任何功能無法正常運作？還是缺少實作提案所需的方法或屬性？對安全模型有任何疑問或意見嗎？

• 在 GitHub 存放區中提交規格問題，或是在現有問題中新增想法。

執行時遇到問題嗎？

您在導入 Chrome 時發現錯誤嗎？還是實作方式與規格不同？

• 前往 https://new.crbug.com 回報錯誤。請務必盡可能提供詳細資訊，並且提供重現問題的簡單操作說明。Glitch 很適合分享代碼。

顯示支援服務

您打算使用這些分享螢幕畫面控制項嗎？您的公開支援團隊可以協助 Chrome 團隊決定各項功能的優先順序，並向其他瀏覽器供應商瞭解支援這些功能的重要性。

請發文至 @ChromiumDev，讓我們知道您的位置和使用方式。

實用連結

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

特別銘謝

主頁橫幅由 John Schnobrich。

感謝 Rachel Andrew 協助審查這篇文章。