JSFiddle - React, Tailwind, and code Playground

HTML

<button>Take a picture.</button>

<div id="container-element">
</div>

CSS

#container-element {
  height: 300px;
  width: 300px;
  background-color: #333;
  margin: 0 auto;
}

JavaScript

$(document).ready(function(){
    var sayCheese = new SayCheese('#container-element', { snapshots: true });
    
    sayCheese.on('start', function() {
     // do something when started
     this.takeSnapshot();
    });
    
    sayCheese.on('error', function(evt, error) {
     // handle errors, such as when a user denies the request to use the webcam,
     // or when the getUserMedia API isn't supported
    });
    
    sayCheese.on('snapshot', function(evt, snapshot) {
      // do something with a snapshot canvas element, when taken
    });
    
    sayCheese.start();
    
    $('button').click(function(){
        alert("works");
      sayCheese.takeSnapshot();
    });
});


/*
 * Say Cheese!
 * Lee Machin, 2012
 * http://leemach.in, http://new-bamboo.co.uk
 *
 * Minimal javascript library for integrating a webcam and snapshots into your app.
 *
 * Handles starting up the webcam and rendering the element, and also capturing shots
 * in a separate canvas element.
 *
 * Depends on video and canvas, and of course, getUserMedia. It's unlikely to work
 * on anything but the newest browsers.
 */

var SayCheese = (function($) {

  var SayCheese;

  navigator.getUserMedia = (navigator.getUserMedia ||
                            navigator.webkitGetUserMedia ||
                            navigator.mozGetUserMedia ||
                            navigator.msGetUserMedia ||
                            false);

  window.URL = (window.URL ||
                window.webkitURL);

  SayCheese = function SayCheese(element, options) {
    this.snapshots = [],
    this.video = null,
    this.events = {},
    this.stream = null,
    this.options = {
      snapshots: true
    };

    this.setOptions(options);
    this.element = document.querySelectorAll(element)[0];
    this.element.style.position = 'relative';

    return this;
  };

  // todo: remove jquery dependency
  SayCheese.prototype.on = function on(evt, handler) {
    return $(this).on(evt, handler);
  };

 ...