'use strict'

// @see https://appcropolis.com/blog/using-html5-canvas-to-capture-frames-from-a-video/
// @see https://serversideup.net/capturing-an-image-from-an-html5-canvas-or-video-element/ +++

const media = document.querySelector('.media'),
      button = document.querySelector('.button'),
      output = document.querySelector('.output'),
      scale = 0.8,
      snapshots = []

/**
  * Captures a image frame from the provided video element.
  * @param {Video} video HTML5 video element from where the image frame will be captured.
  * @param {Number} scaleFactor Factor to scale the canvas element that will be return. This is an optional parameter.
  * @return {Canvas}
  */
const capture = (media, scale = 1) => {
  const w = media.videoWidth * scale,
        h = media.videoHeight * scale,
        canvas = document.createElement('canvas')
  canvas.width = w
  canvas.height = h
  const ctx = canvas.getContext('2d')
  ctx.drawImage(media, 0, 0, w, h)
  return canvas
}

const shoot = () => {
  const canvas = capture(media, scale)
  const img = document.createElement('img')
  document.body.appendChild(img)

  output.innerHTML = ''
  output.appendChild(canvas)

  //snapshots.unshift(canvas)
  //for (let i = 0; i < 4; i++) {
  //  output.appendChild(snapshots[i])
  //}

  img.crossOrigin = 'anonymous'
  canvas.onclick = () => {
    img.src = canvas.toDataURL('image/jpeg')
  }

}

media.addEventListener('play', () => button.classList.add('active'))

button.addEventListener('click', () => media.play = shoot()) // @note Pas de capture si poster en lieu et place de la vidéo.