title: Javascript/html - take picture with webcam and treat as input type="file"
body: <p>I have some code that I can upload and image and run some facial recognition on it like so</p>
  <p>html</p>
  <pre><code>&lt;body&gt;
    &lt;input type=&quot;file&quot; id=&quot;imageUpload&quot;&gt;
  &lt;/body&gt;
  </code></pre>
  <p>javascript</p>
  <pre><code>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 () =&gt; {
      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 =&gt; faceMatcher.findBestMatch(d.descriptor))
      results.forEach((result, i) =&gt; {
        const box = resizedDetections[i].detection.box
        const drawBox = new faceapi.draw.DrawBox(box, { label: result.toString() })
        drawBox.draw(canvas)
      })
    })
  }
  </code></pre>
  <p>I would like to not have to select an image to upload but instead take a picture with my webcam.</p>
  <p>Thanks</p>