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()