CODEWITHSUNDEEP
javascripthtmlfrontend
AnonymousAlias
AnonymousAlias

Reputation: 1399

Javascript/html - take picture with webcam and treat as input type="file"

I have some code that I can upload and image and run some facial recognition on it like so

html

<body>
  <input type="file" id="imageUpload">
</body>

javascript

const imageUpload = document.getElementById('imageUpload')

Promise.all([
  faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
  faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
  faceapi.nets.ssdMobilenetv1.loadFromUri('/models')
]).then(start)

async function start() {
  const container = document.createElement('div')
  container.style.position = 'relative'
  document.body.append(container)
  const labeledFaceDescriptors = await loadLabeledImages()
  const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.6)
  let image
  let canvas
  document.body.append('Loaded')
  imageUpload.addEventListener('change', async () => {
    if (image) image.remove()
    if (canvas) canvas.remove()
    image = await faceapi.bufferToImage(imageUpload.files[0])
    container.append(image)
    canvas = faceapi.createCanvasFromMedia(image)
    container.append(canvas)
    const displaySize = { width: image.width, height: image.height }
    faceapi.matchDimensions(canvas, displaySize)
    const detections = await faceapi.detectAllFaces(image).withFaceLandmarks().withFaceDescriptors()
    const resizedDetections = faceapi.resizeResults(detections, displaySize)
    const results = resizedDetections.map(d => faceMatcher.findBestMatch(d.descriptor))
    results.forEach((result, i) => {
      const box = resizedDetections[i].detection.box
      const drawBox = new faceapi.draw.DrawBox(box, { label: result.toString() })
      drawBox.draw(canvas)
    })
  })
}

I would like to not have to select an image to upload but instead take a picture with my webcam.

Thanks

Upvotes: 1

Views: 2051

Answers (1)

Danny
Danny

Reputation: 590

You could use the navigator.mediaDevices.getUserMedia API
to get access to the cam and ImageCapture API to take an screenshot from it
(you could also use a <canvas> plus <video> element instead of ImageCapture).

MDN Links:
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia https://developer.mozilla.org/en-US/docs/Web/API/ImageCapture

Here you have a codepen to show how to capture an screenshot with it: https://codepen.io/Xion14/pen/yLjyZRP

Upvotes: 1

Related Questions