JSFiddle - React, Tailwind, and code Playground

HTML

<img src="" id="originalImg" />
    <canvas id="canvas" width="320" height="240"></canvas>
    <canvas id="reflay" width="320" height="240" class="overlay"></canvas>
    <video id="player" width="320" height="240" autoplay></video>
    <button id="capture">Capture</button>


    <script>
      const player = document.getElementById('player');
      const canvas = document.getElementById('canvas');
      const context = canvas.getContext('2d');
      const captureButton = document.getElementById('capture');

      const constraints = {
        video: true,
      };

      captureButton.addEventListener('click', () => {
        // Draw the video frame to the canvas.
        context.drawImage(player, 0, 0, canvas.width, canvas.height);
      });

      // Attach the video stream to the video element and autoplay.
      navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
        player.srcObject = stream;
      });
    </script>

CSS

#overlay, .overlay {
            position: absolute;
            top: 0;
            left: 0;
            margin: 8px;
        }

JavaScript

$(document).ready(function(){
                
    async function face(){
        
        const MODEL_URL = '/models'

        await faceapi.loadSsdMobilenetv1Model(MODEL_URL)
        await faceapi.loadFaceLandmarkModel(MODEL_URL)


        const img = convertCanvasToImage();
        let faceDescriptions = await faceapi.detectAllFaces(img).withFaceLandmarks()
        const canvas = $('#reflay').get(0)
        faceapi.matchDimensions(canvas, img)

        faceDescriptions = faceapi.resizeResults(faceDescriptions, img)
        faceapi.draw.drawDetections(canvas, faceDescriptions)
        faceapi.draw.drawFaceLandmarks(canvas, faceDescriptions)

    }
    
    return face()
})

function convertCanvasToImage(){
    var image = new Image();
    image.src = canvas.toDataURL("image/jpeg");
    return image = document.getElementById('originalImg');
}