Document Picture-in-Picture API の最近の導入（およびそれ以前）により、ユーザーが現在のタブからフォーカスを切り替えたときにピクチャー イン ピクチャー ウィンドウを自動的に開く機能への関心が高まっています。これは、ビデオ会議のウェブアプリで特に便利です。この機能を使用すると、プレゼンターがドキュメントを見たり、他のタブやウィンドウを使用したりしながら、参加者をリアルタイムで確認してやり取りすることができます。
ピクチャー イン ピクチャーを自動的に開始
こうしたビデオ会議のユースケースをサポートするため、Chrome 120 のデスクトップ ウェブアプリでは、自動的にピクチャー イン ピクチャーを開始できるようになっています。ただし、良好なユーザー エクスペリエンスを確保するために、いくつかの制限が設けられています。ウェブアプリが自動ピクチャー イン ピクチャーの対象となるのは、以下の条件をすべて満たす場合のみです。
"enterpictureinpicture"アクションにメディア セッション アクション ハンドラが登録されています。getUserMedia を介してカメラまたはマイクをアクティブにキャプチャしている。
ユーザーは、デフォルトで有効になっているブラウザ設定で「自動ピクチャー イン ピクチャー」を許可します。
ウェブアプリが対象となる場合、ユーザーが別のタブにフォーカスを切り替えると、"enterpictureinpicture" アクションのメディア セッション アクション ハンドラ コールバック関数が実行され、ユーザー操作なしでピクチャー イン ピクチャー ウィンドウを開くことができます。
ウェブ デベロッパーは、Picture-in-Picture API for <video> を使用して 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.");
}
ビデオ会議メディア セッション サンプルをお試しください。
ブラウザのメディア コントロールからピクチャー イン ピクチャーで表示する
"enterpictureinpicture" メディア セッション アクションは、ユーザーが Chrome ブラウザ UI のメディア コントロールを使用してピクチャー イン ピクチャーを開始する場合にも便利です。
HTML <video> 要素が再生されておらず、音声のみである場合、"enterpictureinpicture" のメディア セッション アクション ハンドラを登録すると、ウェブアプリがその処理方法を認識し、ピクチャー イン ピクチャー ウィンドウ自体を開く処理が行われることをブラウザに通知されます。
また、<video> 用の Picture-in-Picture API でブラウザを処理させるのではなく、ウェブアプリで Document Picture-in-Picture 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 プレーヤーのデモまたは Video Media Session サンプルをお試しください。
交流とフィードバックの共有
フィードバックがある場合や問題が発生した場合は、crbug.com でお知らせください。
リソース
謝辞
レビューに協力してくれた Tommy Steimel、Ryan Flores、Shimi Rahim、Frank Liberato、Rachel Andrew に感謝します。