Taking a photo from webcam and painting it to canvas seemed magical before this challenge.

Here’s the demo.

The snippets below seems gibberish, but don’t worry, there will be comments to explain how it works. I promise.

Markup

  <body class="wrapper">
    <div class="photobooth">
      <div class="controls">
        <button class="take-photo-js">
          <span class="photo-icon">&#128247;</span>
        </button>
      </div>

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

    <div class="strip"></div>
    <audio class="snap" src="assets/sounds/snap.mp3" hidden></audio>
    <script src="assets/js/demo19.js"></script>
  </body>

JavaScript