JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="camera">
    <video id="monitor" autoplay></video>
  </div>

  <canvas id="photo"></canvas>
  <input type=button value="&#x1F4F7;" onclick="snapshot()">
</div>

CSS

video {
    width: 500px;
    height: 500px;
    object-fit: cover;
    object-position: center;
}

.camera {
    width: 500px;
    height: 500px;
    overflow: hidden;
}

JavaScript

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator.throw(value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments)).next());
    });
};
let canvas;
let video;
$(window).on('load', (event) => __awaiter(this, void 0, void 0, function* () {
    video = document.getElementById('monitor');
    canvas = document.getElementById('photo');
    video.srcObject = yield navigator.mediaDevices.getUserMedia({ video: true });
    video.onloadedmetadata = () => {
        canvas.width = 500;
        canvas.height = 500;
    };
}));
function snapshot() {
    canvas.getContext('2d').drawImage(video, 0, 0);
}