/pip-stream-video

change video in browser to picture in picture mode using MediaStream Picture-In-Picture API

Primary LanguageCSS

pip-stream-video

This is a simple training app based on HTML, CSS, JS and Media Devices WEB API. it will allow you to open any screen, application, or tab in a movable, resizable, window that will stay on top of anything you do. So you can have a tutorial video in the corner of your screen while you are working on something in the background.


  • Live Demo

A project featuring the use of Picture-in-Picture Web API | View Live


  • Instructions

ONLY WORKS BEST IN DESKTOP CHROME

  1. Click on Start PiP.

    Note: If first time using, allow share screen permission

  2. Select which screen to float on top
  3. Click Share
  4. Adjust floating screen size or move position
  5. To exit:
    • Option A: hover onto the floating screen, click X
    • Option B: click on Close PiP