Day19: Webcam Fun

Introduction: How to use JavaScript and HTML5 getUserMedia API to implement webcam functionality.

Project Page: https://iris1114.github.io/javascript30/19_Webcam-Fun/

HTML

Contains a div container with control buttons, canvas element, video element, and an area for displaying captured photos.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Get User Media Code Along!</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="photobooth">
      <div class="controls">
        <button onClick="takePhoto()">Take Photo</button>
        <!--
      <div class="rgb">
        <label for="rmin">Red Min:</label>
        <input type="range" min=0 max=255 name="rmin">
        <label for="rmax">Red Max:</label>
        <input type="range" min=0 max=255 name="rmax">

        <br>

        <label for="gmin">Green Min:</label>
        <input type="range" min=0 max=255 name="gmin">
        <label for="gmax">Green Max:</label>
        <input type="range" min=0 max=255 name="gmax">

        <br>

        <label for="bmin">Blue Min:</label>
        <input type="range" min=0 max=255 name="bmin">
        <label for="bmax">Blue Max:</label>
        <input type="range" min=0 max=255 name="bmax">
      </div>
      --></div>

      <canvas class="photo"></canvas>
      <video class="player"></video>
      <div class="strip"></div>
    </div>

    <audio class="snap" src="./snap.mp3" hidden></audio>

    <script src="scripts.js"></script>
  </body>
</html>

JavaScript

Uses JavaScript to access user's webcam and display the feed in a video element
Draws video feed to canvas element and applies pixel manipulation
Captures photos and displays them on the page

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.srcObject = 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)
    let pixels = ctx.getImageData(0, 0, width, height)
    // pixels = redEffect(pixels)
    // pixels = rgbSplit(pixels)
    // ctx.globalAlpha = 0.1
    pixels = greenScreen(pixels)
    ctx.putImageData(pixels, 0, 0)
  }, 16)
}

function takePhoto() {
  // Play the shutter sound
  snap.currentTime = 0
  snap.play()

  // Get the data from canvas
  const data = canvas.toDataURL('image/jpeg')
  const link = document.createElement('a')
  link.href = data
  link.setAttribute('download', 'handsome')
  link.innerHTML = `<img src="${data}" alt="Handsome Man" />`
  strip.insertBefore(link, strip.firstChild)
}

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

// RGB split effect
function rgbSplit(pixels) {
  for (let i = 0; i < pixels.data.length; i += 4) {
    pixels.data[i - 150] = pixels.data[i + 0] // RED
    pixels.data[i + 500] = pixels.data[i + 1] // GREEN
    pixels.data[i - 550] = pixels.data[i + 2] // Blue
  }
  return pixels
}

// Green screen effect
function greenScreen(pixels) {
  const levels = {}

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

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

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

  return pixels
}

// Start webcam
getVideo()

// When video can play, start drawing to canvas
video.addEventListener('canplay', paintToCanvas)

Note

Uses navigator.mediaDevices.getUserMedia to access user's webcam
Uses canvas element for drawing and pixel manipulation
Uses setInterval to regularly update canvas with video feed
Provides multiple pixel manipulation effects like red effect, RGB split, and green screen