Advanced Photo Editor

Take Picture from Webcam

Step 19: Remove the video that you downloaded, and modify the button to stream the webcam to the video.
Hint: Use the following code and modify accordingly to stream the webcam to the video:
// built-in method for getting the webcam stream
window.navigator.mediaDevices.getUserMedia({
  // object specifying the dimensions of the webcam stream
  video: {
    width: yourCanvasVariable.width,
    height: yourCanvasVariable.height
  }
// send the webcam stream to the video element
}).then(streamWebcamToVideo)
Then put the following function in your code and modify accordingly:
function streamWebcamToVideo(stream) {
  // set the source object of the video element to the webcam stream
  yourVideoVariable.srcObject = stream

  // play the video
  yourVideoVariable.play()
}
Note: You must view your page in a separate tab to allow the camera.
Last step Next step