Justin's Dev Journal

Browser Picture in Picture

Browser Picture in Picture

Justin Ramel's photo
Justin Ramel
·

4 min read

That platform I"m working on has integrated video which we use for stand up and team meetings. We'd like to use the backlog and update stories when in a meeting without having to open extra tabs so I've been tasked with spiking out browser Picture in Picture functionality.

Is it a viable option? Let's find out...

What is browser Picture in Picture (PiP)?

mozilla has a great description [https://support.mozilla.org/en-US/kb/about-picture-picture-firefox]:

Picture-in-Picture feature allows you to pop videos out of their webpage into a floating, always on top, window so you can watch while continuing to work in other tabs. You can move the Picture-in-Picture window around the screen and resize it to your liking.

Picture in Picture sample

You can play with Chromes demo app here:

https://googlechrome.github.io/samples/picture-in-picture/

Picture in Picture browser support

At the time of writing this post caniuse.com reports a global usage of 89.85%, far higher than I expected. We're targeting evergreen browsers so all good here, no IE 11 to worry about 🙂.

Picture in Picture API

The PiP api looks very simple and should be easily callable from our platform.

function togglePictureInPicture() {
  if (document.pictureInPictureElement) {
      document.exitPictureInPicture();
  } else {
    if (document.pictureInPictureEnabled) {
      video.requestPictureInPicture(); 
    }
  }
}

https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API

Specification: https://w3c.github.io/picture-in-picture/

React Picture in Picture

Is there an existing react component that will save me having to do any work? 😉 A quick search on npmjs.com came up with:

react-use-pip

  • Version: 1.4.1
  • Published: 2 months ago
  • Weekly Downloads: 37
  • License: MIT
  • Bundle phobia: Minified 3.1kb, Minified + Gzipped 1kb

react-picture-in-picture

  • Version: 1.0.0
  • Published: 10 months ago
  • Weekly Downloads: 86
  • License: MIT
  • Bundle phobia: Minified 1.2kb, Minified + Gzipped 634b

use-pip

  • Version: 1.0.0
  • Published: 1 year ago
  • Weekly Downloads: 2
  • License: MIT
  • Bundle phobia: Minified 863b, Minified + Gzipped 440b

Weekly downloads on these components are very low, either no one is using Picture in Picture or the API is so simple people are writing their own hooks.

Verdict

The biggest limitation that affects our use case is only being able to use HTML Video Element for PiP. We need to have multiple Video elements, one for each meeting attendee and custom buttons for changing meeting modes.

Its a NO for now but maybe useable in the future?

The W3C specification mentions (https://www.w3.org/TR/picture-in-picture/#intro):

The API only applies to HTMLVideoElement at the moment but is meant to be extensible.

If that ever becomes reality we'll take another look 🙂

Until next time!

BrowsersJavaScript