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

François Beaufort
François Beaufort

瀏覽器支援

  • Chrome:109。
  • Edge:109。
  • Firefox:不支援。
  • Safari:不支援。

資料來源

Screen Capture API 讓使用者選取要擷取的分頁、視窗或螢幕畫面,做為媒體串流。然後錄製這部直播影片,或是透過網路與他人分享。本文件將介紹「條件聚焦」,這是網頁應用程式的機制,可控制擷取的分頁或視窗是否會在擷取時聚焦,或者擷取網頁是否保持聚焦。

瀏覽器支援

Chrome 109 以上版本才有條件聚焦功能。

背景

網頁應用程式開始擷取某個分頁或視窗時,瀏覽器會做出決定:應該將擷取的介面移至最前方,還是要保持擷取頁面聚焦狀態?答案取決於呼叫 getDisplayMedia() 的原因,以及在使用者選擇的介面上。

假設你使用假想的視訊會議網頁應用程式,閱讀 track.getSettings().displaySurface 內容 (可能會查看擷取帳號代碼) 後,視訊會議網頁應用程式就能瞭解使用者選擇分享的內容。然後執行下列步驟:

  • 如果擷取的分頁或視窗可以從遠端控制,請將視訊會議畫面保持在焦點位置。
  • 否則焦點會移至已擷取的分頁或視窗。

在上例中,當使用者分享簡報內容時,視訊會議網頁應用程式會保持焦點,讓使用者從遠端翻閱投影片。但如果使用者選擇共用文字編輯器,視訊會議網頁應用程式就會立即將焦點移至擷取的分頁或視窗。

使用條件聚焦 API

CaptureController 例項化,並傳遞至 getDisplayMedia()。在傳回的 getDiplayMedia() 承諾解析後立即呼叫 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 });

您可以在承諾解析之前任意多次呼叫 setFocusBehavior(),也可以最多立即呼叫承諾來解決一次。上次叫用會覆寫先前所有的叫用。

更精確: - 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() 傳回串流的視訊軌並非「直播」
  • 之後,如果使用者分享某個畫面 (而非分頁或視窗),則 getDisplayMedia() 傳回的承諾都會解析。

範例

如要使用條件聚焦功能,請在 Glitch 上執行示範。請務必檢查原始碼

特徵偵測

如要檢查系統是否支援 CaptureController.setFocusBehavior(),請使用:

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

意見回饋

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

請與我們分享設計

有沒有無法正常運作的條件式焦點?或是你還需要實現創意的方法或屬性嗎?對安全性模型有任何疑問或意見嗎?

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

無法導入嗎?

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

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

顯示支援

您是否打算使用「條件式聚焦」?您的公開支援服務可協助 Chrome 團隊優先開發特定功能,並說明其他瀏覽器廠商對於這些功能的支援有多重要。

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

特別銘謝

主頁橫幅由 Elena Taranenko 提供。

感謝 Rachel Andrew 撰寫這篇文章。