What Is It?
This was a project to explore creative ways to use the experimental Picture-in-Picture Web API to render non-video content in a floating always-on-top window. Eventually this ability might be offered natively by the browser (e.g. by PiP v2, or a different Web API), but I wanted to showcase some use-cases for why we should want it in the first place and the value it could bring.
I believe that giving webpages the ability to draw content off-page, in windows they could control, opens up some amazing possibilities, and would be a step towards parity between native desktop apps and web apps. This project is an exploration of that idea.
Where to Get It
💾 Source Code: GitHub
🚀 Live Demos: pip-rendering-fun.netlify.app
Demo
Here is a demo showing how it could be used to display real-time stats, in a persistent floating display:
There are quite a few demos that I built out, including using PiP for:
- A time tracking application
- Displaying info about itself, through the web API
- Displaying the user’s own display / desktop
- Mirroring a drawable surface, in real-time
- The analytics / stats demo, as shown above
To see all the demos above, and try them for yourself if you have a compatible browser, they are deployed at pip-rendering-fun.netlify.app.
What I Used
- TypeScript
- Web APIs
- HTML Canvas
- MediaSource
- PictureInPictureWindow
- MediaDevices
- Netlify (deploying the demos)
- Documentation! (Both consuming and writing my own)
- Markdown
- Vanilla HTML and JavaScript
- Browser “quirks”
A lot of the web APIs I used are considering “experimental”; in fact, I had to use TypeScript’s ambient declaration support to augment the Document interface, since the types for those APIs have not yet made it into the lib.dom.d.ts that ships with TypeScript!
This was also a great opportunity to learn more about web standards, and how different browsers end up implementing the same specification (surprise, surprise – it is not always the same!). I also spent a fair amount of time writing my own documentation on the topic; covering some of the issues I ran into, discrepancies in how APIs were implemented, and browser quirks.
