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() {