Quiero usar la detección de puntos de referencia faciales de la biblioteca face-api.js en la imagen capturada desde una cámara web cuando se presiona el botón de captura. ¿Cómo puedo hacer eso?

Sé que no es el código perfecto, pero mi proceso de pensamiento fue tomar la instantánea de la cámara web, colocarla en <img src""> y luego usar la detección de puntos de referencia faciales en la imagen instantánea.

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>

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'); }

Aquí está el JSFiddle si eso lo hace más fácil. Gracias.

JSFiddle