利用條件式聚焦，提升分享螢幕畫面的效果

François Beaufort
François Beaufort
GitHub
Elad Alon

Browser Support

  • Chrome: 109.
  • Edge: 109.
  • Firefox: not supported.
  • Safari: not supported.

Source

使用者可以透過螢幕畫面擷取 API 選取要擷取的分頁、視窗或螢幕畫面，並以媒體串流的形式擷取。然後透過網路錄製或與他人分享這項串流內容。這份文件將介紹「條件式焦點」，這項機制可供網路應用程式控管擷取作業開始時，要將焦點放在擷取的分頁或視窗，還是擷取網頁。

瀏覽器支援

條件式焦點自 Chrome 109 版起開放使用。

背景

網頁應用程式開始擷取分頁或視窗時，瀏覽器會面臨決策：是否要將擷取的表面帶到最前端，還是要讓擷取頁面保持焦點？答案取決於通話原因 getDisplayMedia()，以及使用者最終選取的介面。

假設有一個虛構的視訊會議網頁應用程式。視訊會議網頁應用程式可以讀取 track.getSettings().displaySurface，並可能檢查 Capture Handle，瞭解使用者選擇分享的內容。然後執行下列步驟：

  • 如果可以遠端控制擷取的索引標籤或視窗，請將視訊會議設為焦點。
  • 否則，請將焦點移至擷取的分頁或視窗。

以上述範例來說，如果使用者分享投影片，視訊會議網路應用程式就會保留焦點，讓使用者遠端瀏覽投影片；但如果使用者選擇分享文字編輯器，視訊會議網路應用程式就會立即將焦點切換至擷取的分頁或視窗。

使用 Conditional Focus API

例項化 CaptureController 並傳遞至 getDisplayMedia()。在 getDiplayMedia() 傳回的 Promise 解決後立即呼叫 setFocusBehavior()，即可控管是否要將焦點放在擷取的索引標籤或視窗。只有在使用者共用分頁或視窗時，才能執行這項操作。

const controller = new CaptureController();

// Prompt the user to share a tab, a window or a screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

const [track] = stream.getVideoTracks();
const displaySurface = track.getSettings().displaySurface;
if (displaySurface == "browser") {
  // Focus the captured tab.
  controller.setFocusBehavior("focus-captured-surface");
} else if (displaySurface == "window") {
  // Do not move focus to the captured window.
  // Keep the capturing page focused.
  controller.setFocusBehavior("focus-capturing-application");
}

決定是否要聚焦時，可以將「擷取控點」納入考量。

// Retain focus if capturing a tab dialed to example.com.
// Focus anything else.
const origin = track.getCaptureHandle().origin;
if (displaySurface == "browser" && origin == "https://example.com") {
  controller.setFocusBehavior("focus-capturing-application");
} else if (displaySurface != "monitor") {
  controller.setFocusBehavior("focus-captured-surface");
}

您甚至可以在呼叫 getDisplayMedia() 前決定是否要對焦。

// Focus the captured tab or window when capture starts.
const controller = new CaptureController();
controller.setFocusBehavior("focus-captured-surface");

// Prompt the user to share their screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

您可以在 Promise 解決前任意次數呼叫 setFocusBehavior()，或在 Promise 解決後立即呼叫一次。最後一次叫用會覆寫先前所有叫用。

更精確地說： - 傳回的 getDisplayMedia() 承諾會在微任務中解析。在該微工作完成後呼叫 setFocusBehavior() 會擲回錯誤。 - 如果在擷取作業開始後超過一秒才呼叫 setFocusBehavior()，系統不會執行任何動作。

也就是說，下列兩個程式碼片段都會失敗：

// Prompt the user to share their screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

// Too late, because it follows the completion of the task
// on which the getDisplayMedia() promise resolved.
// This will throw.
setTimeout(() => {
  controller.setFocusBehavior("focus-captured-surface");
});

// Prompt the user to share their screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

const start = new Date();
while (new Date() - start <= 1000) {
  // Idle for ≈1s.
}

// Because too much time has elapsed, the browser will have
// already decided whether to focus.
// This fails silently.
controller.setFocusBehavior("focus-captured-surface");

在下列情況中，呼叫 setFocusBehavior() 也會擲回例外狀況：

  • getDisplayMedia() 傳回的串流影片軌不是「live」。
  • getDisplayMedia() 傳回的 Promise 解析後，如果使用者分享的是螢幕 (而非分頁或視窗)。

範例

您可以執行示範，試用條件式焦點。

特徵偵測

如要檢查是否支援 CaptureController.setFocusBehavior()，請使用：

if (
  "CaptureController" in window &&
  "setFocusBehavior" in CaptureController.prototype
) {
  // CaptureController.setFocusBehavior() is supported.
}

意見回饋

Chrome 團隊和網路標準社群很想瞭解您使用條件式焦點的體驗。

請說明設計內容

條件式焦點功能是否無法正常運作？或者缺少實作構想所需的方法或屬性？對安全模型有任何疑問或意見嗎？

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

導入時發生問題嗎？

您是否發現 Chrome 實作方式有錯誤？或者實作方式與規格不同？

顯示支援

您是否打算使用條件式焦點？您的公開支持有助於 Chrome 團隊排定功能優先順序，並向其他瀏覽器供應商說明支援這些功能的重要性。

請傳送推文至 @ChromiumDev，告訴我們您在何處使用這項功能，以及使用方式。

特別銘謝

主頁橫幅圖片由 Elena Taranenko 提供。

感謝 Rachel Andrew 審查本文。