網頁應用程式的自動子母畫面功能

François Beaufort
François Beaufort

隨著 Document Picture-in-Picture API 的最近介紹 (甚至之前),網頁開發人員越來越熱衷於能在使用者從目前的分頁切換焦點時,自動開啟子母畫面視窗。這項功能在視訊會議網頁應用程式中特別實用,因為簡報者可以在展示文件或其他分頁或視窗時,即時查看參與者並進行互動。

使用者切換分頁時,子母畫面視窗會自動開啟及關閉。

自動進入子母畫面

為了支援這類視訊會議,Chrome 120 電腦版網頁應用程式將自動進入子母畫面,但請留意幾項限制,確保使用者享有良好的體驗。網頁應用程式必須符合下列所有條件,才能使用自動子母畫面功能:

  • 已針對 "enterpictureinpicture" 動作註冊媒體工作階段動作處理常式。

  • 透過 getUserMedia 主動擷取相機或麥克風。

  • 使用者透過瀏覽器設定預設啟用「自動子母畫面」。

螢幕截圖:Chrome 瀏覽器網站資訊窗格中的自動子母畫面設定。
Chrome 瀏覽器網站資訊窗格中的自動子母畫面設定。

如果網頁應用程式符合資格,當使用者將焦點切換至其他分頁時,系統會觸發 "enterpictureinpicture" 動作的媒體工作階段動作處理常式回呼函式,讓該應用程式在沒有使用者手勢的情況下開啟子母畫面視窗。

網頁開發人員可以使用 <影片> 的子母畫面 API 從 HTML <video> 元素開啟子母畫面視窗,或使用 Document Picture-in-Picture API 開啟一個一律開啟的視窗,並填入任意 HTML 內容。開啟子母畫面視窗時,系統不會聚焦,並在頁面重新顯示頁面顯示設定時自動關閉。

以下範例說明如何要求存取使用者的相機。接著,使用可開啟子母畫面視窗的回呼函式,安全地為 "enterpictureinpicture" 動作註冊媒體工作階段動作處理常式。這個視窗包含使用者的攝影機影片串流,其中使用 <video> 的 Picture-in-Picture API。

const video = document.querySelector("video");
// Request access to the user's camera.
navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
  video.srcObject = stream;
});

try {
  // Request video to automatically enter picture-in-picture when eligible.
  navigator.mediaSession.setActionHandler("enterpictureinpicture", () => {
    video.requestPictureInPicture();
  });
} catch (error) {
  console.log("The enterpictureinpicture action is not yet supported.");
}

請嘗試使用視訊會議媒體工作階段範例。

進入瀏覽器媒體控制項的子母畫面

當使用者想在 Chrome 瀏覽器 UI 中使用媒體控制項進入子母畫面時,"enterpictureinpicture" 媒體工作階段動作也非常實用。

Chrome 瀏覽器中媒體控制項的螢幕截圖,遊標顯示在子母畫面使用者控制項上。
Chrome 瀏覽器中的媒體控制項,遊標位於子母畫面的使用者控制項上。

如果未播放任何 HTML <video> 元素,但只有音訊,當您為 "enterpictureinpicture" 註冊媒體工作階段動作處理常式時,就會讓瀏覽器知道網頁應用程式知道處理方式,並會自行開啟子母畫面視窗。

如果網頁應用程式想使用 Document Picture-in-Picture API 開啟子母畫面視窗,而不是讓瀏覽器透過 <影片> 的子母畫面 API 處理,那麼這個 API 也能派上用場。

以下範例說明如何為 "enterpictureinpicture" 動作安全地註冊媒體工作階段動作處理常式。使用者在 Chrome 瀏覽器 UI 中使用媒體控制項進入子母畫面時,回呼函式會透過 Document Picture-in-Picture API 開啟子母畫面視窗。

try {
  // Use the Document Picture-in-Picture API when entering
  // picture-in-picture from browser media control.
  navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
    const pipWindow = await documentPictureInPicture.requestWindow();
    // Populate HTML content and handle closing window...
  });
} catch (error) {
  console.log("The enterpictureinpicture action is not yet supported.");
}

您可以使用 Document Picture-in-Picture API VideoJS 播放器示範影片媒體工作階段範例

互動並提供意見

如有任何意見或遇到的問題,請前往 crbug.com 與我們分享。

資源

特別銘謝

感謝 Tommy Steimel、Ryan Flores、Shimi Rahim、Frank Liberato 和 Rachel Andrew 針對他的評論。

主頁橫幅由 pine WattUnsplash 上提供。