Capturing an Image from the User.md

https://developers.google.com/web/fundamentals/media/capturing-images https://codepen.io/bhagwatchouhan/pen/jjLJoB

Capturing an Image from the User

https://developers.google.com/web/fundamentals/media/capturing-images
https://codepen.io/bhagwatchouhan/pen/jjLJoB

<h1>Capturing an Image from the User </h1>
<input type="file" accept="image/*" id="file-input">
<input type="file" accept="image/*" capture>
<input type="file" accept="image/*" capture="user">
<input type="file" accept="image/*" capture="environment">

<video id="player" controls autoplay></video>
<button id="capture">Capture</button>
<canvas id="canvas" width=320 height=240></canvas>
<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>

<script>

    const supported = 'mediaDevices' in navigator;
    
    console.log(supported);

    const fileInput = document.getElementById('file-input');

    fileInput.addEventListener('change', (e) => doSomethingWithFiles(e.target.files));
</script>