Picture-in-Picture APIで画像表示

<img
id="pip-image-element"
src="https://source.unsplash.com/400x300?random"
style="width: 400px; height: 300px;"
>
<button id="pip-button-element">PinP Toggle</button>

interface CanvasElement extends HTMLCanvasElement {
  captureStream(frameRate?: number): MediaStream
}

class PinpImage {
  pipImageElement: HTMLImageElement | null
  pipButtonElement: HTMLButtonElement | null

  image: HTMLImageElement

  constructor() {
    this.pipImageElement = document.querySelector('#pip-image-element')
    this.pipButtonElement = document.querySelector('#pip-button-element')

    this.image = new Image()

    if (!this.pipImageElement) {
      return
    }

    this.image.crossOrigin = 'Anonymous'
    this.image.addEventListener('load', () => this.imageLoaded(), false)
    this.image.src = this.pipImageElement.src
  }

  imageLoaded(): void {
    const canvas = <CanvasElement>document.createElement('canvas')
    canvas.height = this.image.height
    canvas.width = this.image.width

    // Draw something to canvas.
    const ctx = canvas.getContext('2d')
    if (!ctx) {
      return
    }

    ctx.scale(1, 1)
    ctx.drawImage(this.image, 0, 0)

    const video = document.createElement('video')
    video.muted = true
    video.autoplay = true
    video.srcObject = canvas.captureStream(60)
    video.play()

    this.pipButtonElement?.addEventListener('click', async () => {
      try {
        if (video !== document.pictureInPictureElement) {
          await video.requestPictureInPicture()
        } else {
          await document.exitPictureInPicture()
        }
      } catch (error) {
        // some code
      } finally {
        // some code
      }
    })
  }
}

window.addEventListener('load', () => {
  new PinpImage()
})