Media (Chrome 70 ) Cheatsheet

Picture in Picture

button.addEventListener('click', async(event) => {
   if (video !== document.pictureInPictureElement)
       await video.requestPictureInPicture();
   else 
       await document.exitPictureInPicture()
})

Listeners

let pipWindow

video.addEventListener('enterpictureinpicture', (event) => {
	// Video entered Picture-in-Picture
	pipWindow = event.pictureInPictureWindow
	console.log('Window size is ${pipWindow.width}x${pipWindow.height}')
	pipWindow.addEventListener('resize', onPipWindowResize)
})

video.addEventListener('leavepictureinpicture', (event) => {
	// Video left Picture-in-Picture
	pipWindow.removeEventListener('resize', onPipWindowResize)
})

function onPipWindowResize(event) {
	console.log('Window size changed to ${pipWindow.width}x${pipWindow.height}')
}

Enabling / Disabling toggle button for PIP

if ('pictureInPictureEnabled' in document) {
	// Set button ability depending on whether Picture-in-Picture can be used.
	setPipButton()
	video.addEventListener('loadedmetadata', setPipButton)
	video.addEventListener('emptied', setPipButton)
} else {
	// Hide button if Picture-in-Picture is not supported.
	togglePipButton.hidden = true
}

function setPipButton() {
	togglePipButton.disabled = !document.pictureInPictureEnabled ||
							   video.disablePictureInPicture ||
							   (video.readyState == 0)
}

Media Streaming

video.srcObject = await navigator.mediaDevices.getUserMedia({video:true})

// On button click
await video.requestPictureInPicture()

PiP is perfect for

• Multi-tasking
• Record Desktop with Camera
• Always on top media center

AV1

• Video Codec
• Open Source
• Deploy Widely

if (MediaSource.isTypeSupported('video/mp4; codecs=av01.0.05M.08')) {
  // Play AV1 Video
}

const sourceBuffer = myMediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08')
sourceBuffer.appendBuffer(someWebmVP9Data)

// Later on..
if ('changeType' in sourceBuffer) {
	// Change source buffer type and append new data.
	sourceBuffer.changeType('video/mp4; codecs=av01.0.05M.08')
	sourceBuffer.appendBuffer(someMp4Av1Data)
}