webCam.jade

extends base

block vars
  - var title = 'Unreal Webcam'

block styles
  link(rel="stylesheet" type="text/css" href="styles/webCam.css")

block body

  .photobooth
    .controls
      button(onClick="takePhoto()") Take Photo
      .rgb
        label(for="rmin") Red Min:
        input(type="range" min="0" max="255" name="rmin")

        label(for="rmax") Red Max:
        input(type="range" min="0" max="255" name="rmax")
        br
        label(for="gmin") Green Min:
        input(type="range" min="0" max="255" name="gmin")

        label(for="gmax") Green Max:
        input(type="range" min="0" max="255" name="gmax")
        br
        label(for="bmin") Blue Min:
        input(type="range" min="0" max="255" name="bmin")

        label(for="bmax") Blue Max:
        input(type="range" min="0" max="255" name="bmax")

    canvas.photo
    video.player
    .strip

  audio.snap(src="sounds/snap.mp3" hidden)

  script(type="text/javascript").
    const $video = document.querySelector('.player')
    const $canvas = document.querySelector('.photo')
    const ctx = $canvas.getContext('2d')
    const $strip = document.querySelector('.strip')
    const $snap = document.querySelector('.snap')

    function getVideo() {
      navigator.mediaDevices.getUserMedia({ video: true, audio: false })
        .then(localMediaStream => {
          $video.src = window.URL.createObjectURL(localMediaStream)
          $video.play()
        })
        .catch(err => {
          console.error(`Oh no!!`, err)
        })
    }

    function paintToCanvas() {
      const width = $video.videoWidth
      const height = $video.videoHeight

      $canvas.width = width
      $canvas.height = height

      return setInterval(() => {
        ctx.drawImage($video, 0, 0, width, height)

        // yank out pixels
        let pixels = ctx.getImageData(0, 0, width, height)
        // manipulate pixels
        pixels = rgbSplit(pixels)
        //- ctx.globalAlpha = 0.1
        // return pixels to canvas
        ctx.putImageData(pixels, 0, 0)
      }, 16)
    }

    function takePhoto() {
      $snap.currentTime = 0
      $snap.play()

      const data = $canvas.toDataURL('image/jpeg')
      const link = document.createElement('a')

      link.href = data
      link.setAttribute('download', 'snapShot')
      link.innerHTML = `<img src="${data}" alt="snapShot">`

      $strip.insertBefore(link, $strip.firstChild)
    }


    // Effects
    function redEffect(pixels) {
      for (let i = 0; i < pixels.data.length; i += 4) {
        pixels.data[i + 0] = pixels.data[i + 0] + 200
        pixels.data[i + 1] = pixels.data[i + 1] - 50
        pixels.data[i + 2] = pixels.data[i + 2] * 0.5
      }

      return pixels
    }

    function rgbSplit(pixels) {
      for (let i = 0; i < pixels.data.length; i += 4) {
        pixels.data[i - 150] = pixels.data[i + 0]
        pixels.data[i + 500] = pixels.data[i + 1]
        pixels.data[i + 550] = pixels.data[i + 2]
      }

      return pixels
    }

    function greenScreen(pixels) {
      const levels = {}

      document.querySelectorAll('.rgb input').forEach($input => {
        levels[$input.name] = $input.value
      })


      for (let i = 0; i < pixels.data.length; i += 4) {
        const red = pixels.data[i + 0]
        const green = pixels.data[i + 1]
        const blue = pixels.data[i + 2]
        const alpha = pixels.data[i + 3]

        if (red >= levels.rmin && green >= levels.gmin &&
          blue >= levels.bmin && red <= levels.rmax &&
          green <= levels.gmax && blue <= levels.bmax)
          pixels.data[i + 3] = 0
      }

      return pixels
    }

    getVideo()
    $video.addEventListener('canplay', paintToCanvas)