LaClarence/picture-in-picture

Picture in picture JS project 3

Picture-In-Picture test

3rd Javascript project: Picture in picture.

Resources

• MediaDevices: getDisplayMedia method()
• Picture-in-Picture for any Element, not just video
• Better tab sharing with Capture Handle
• Video and audio content
• Picture-in-Picture - W3C Working Draft (1)
• Picture-in-Picture - W3C Working Draft (2)
• Media Capture and Streams - W3C
• HTML5 Video API: A Guide to Video Transformation in the Browser

Others Demos

• Tab Capture Handle
• Screen sharing controls
• Picture-in-Picture Chrome Extension
• GoogleChrome - samples
• Picture-in-Picture Sample
• dom-examples/document-picture-in-picture

Code

Get info about Picture in picture windows

function getPIPInfo() {
  if (pipWindow) {
    console.log(`> Window size is ${pipWindow.width}x${pipWindow.height}`);
    const [track] = video.srcObject.getVideoTracks();
    var events = [];
    for (var property in pipWindow) {
      let match = property.match(/^on(.*)/)
      if (match) {
        events.push(match[1]);
      }
    }
    console.log(events);
  } else {
    console.log('No pip window is currently open...');
  }
}

Can be added in the finally bloc of onclick.