Browser Picture in Picture

Senior Full-Stack Developer with over 20 years of experience building web applications for startups, government, and higher education.
Search for a command to run...

Senior Full-Stack Developer with over 20 years of experience building web applications for startups, government, and higher education.
No comments yet. Be the first to comment.
Writing this up so I have somewhere to quickly grab basic Jest setup. This information is copied from the Jest Documentation Site compressed into just the parts I'm interested in. Create folders mkdir -p <project>/src cd <project> Install and init n...

In this blog post, we'll explore the process of setting up and configuring a Postgres database using Docker and seeding it with test data. This approach can be used for a variety of apps and can be easily adapted for your own needs. We'll cover all t...

Continuing from last time, we will explore the concepts behind Create and Update functionality and provide a step-by-step guide on how to implement it in your SvelteKit application. Let's get started! Server & Client Code In SvelteKit, the server-sid...

Introduction In this post, I will explore how to create a REST API using Spring Boot and Kotlin. We will dive into the fundamentals of Spring Boot and Kotlin, explain how to set up the project, and guide you through the process of building the API st...

Introduction Welcome to the latest post in my series of Koan Battles using Kotlin and TypeScript. In this series, we'll complete a Koan in both languages and then discuss the differences between the two solutions. My goal is to help you gain a deeper...

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...
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.
You can play with Chromes demo app here:
https://googlechrome.github.io/samples/picture-in-picture/
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 ๐.
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/
Is there an existing react component that will save me having to do any work? ๐ A quick search on npmjs.com came up with:
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.
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!