Picture-in-Picture demos

Your browser Picture-in-Picture.

You can test 4 different ways of using the picture-in-picture feature in this demo page.

First one will be the most obvious usage with a video being displayed inside the <video> tag.
Second one is using your webcam to render inside the video element.
Third one will share one of your screen (or browser's tab) in the video output section
Forth one is more complex as it renders the WebGL canvas as a video which then can be displayed in PiP.

Click on buttons 1 to 4 to switch the rendering sent to the output video section from video, webcam, screen sharing or WebGL Canvas.

Then, simply click on 'Toggle Picture-in-picture' to display the output video element as a PiP element.

WebGL Canvas
Output video section
Associated PWA Builder demo page: https://components.pwabuilder.com/demo/pip A video of the feature in action is available there if your device doesn't support it yet. Click here to check all our demos.