diff --git a/media-session/video-conferencing.html b/media-session/video-conferencing.html index b42c3880f9..aed156065e 100755 --- a/media-session/video-conferencing.html +++ b/media-session/video-conferencing.html @@ -19,6 +19,7 @@

Background

+Automatically enter Picture-in-Picture {% include output_helper.html %} diff --git a/media-session/video-conferencing.js b/media-session/video-conferencing.js index eede6d032e..47cc88e40d 100644 --- a/media-session/video-conferencing.js +++ b/media-session/video-conferencing.js @@ -27,6 +27,23 @@ togglePipButton.addEventListener("click", async () => { } }); +autoPipCheckbox.addEventListener('input', () => { + try { + if (!autoPipCheckbox.checked) { + // Disable automatically enter Picture-in-Picture. + navigator.mediaSession.setActionHandler('enterpictureinpicture', null); + return; + } + // Request browser to automatically enter Picture-in-Picture when eligible. + navigator.mediaSession.setActionHandler('enterpictureinpicture', async () => { + log('> Video is eligible for Automatic Picture-in-Picture.'); + await video.requestPictureInPicture(); + }); + } catch (error) { + log('Warning! The "enterpictureinpicture" media session action is not supported.'); + } +}); + try { navigator.mediaSession.setActionHandler('togglemicrophone', () => { log('> User clicked "Toggle Mic" icon.'); diff --git a/media-session/video.js b/media-session/video.js index 8db6136ff0..3fb6eb81bc 100644 --- a/media-session/video.js +++ b/media-session/video.js @@ -128,6 +128,18 @@ try { log('Warning! The "seekto" media session action is not supported.'); } + +/* Enter Picture-in-Picture (supported since Chrome 120) */ + +try { + navigator.mediaSession.setActionHandler('enterpictureinpicture', async function() { + log('> User clicked "Enter Picture-in-Picture" icon.'); + await video.requestPictureInPicture(); + }); +} catch(error) { + log('Warning! The "enterpictureinpicture" media session action is not supported.'); +} + /* Utils */ function getAwesomePlaylist() {