Capture Webcam

https://stackoverflow.com/q/69362269/5980430

HTML

<form id="form" action="" method="POST" enctype="multipart/form-data">
  <video id="player" controls autoplay></video>
  <button type="button" id="capture">Capture</button>
  <button>save</button>
  <canvas id="canvas" width=320 height=240></canvas>
</form>

CSS

form *{max-width:20vw;}
img{display:inline-block;}
canvas{display:none;}

JavaScript

const player = document.getElementById('player')
const canvas = document.getElementById('canvas')
const form = document.getElementById('form')
const docs = document.getElementById('document')
const captureButton = document.getElementById('capture')
const context = canvas.getContext('2d')


captureButton.addEventListener('click', (e) => {
  context.drawImage(player, 0, 0, canvas.width, canvas.height)
  let new_image = document.createElement('img')
  new_image.src = canvas.toDataURL()
  form.insertAdjacentElement('beforeend',new_image)
});

navigator.mediaDevices.getUserMedia({video: true})
  .then((stream) => { player.srcObject = stream;})