JavaScript How to Use a Camera in a Browser

1. Get camera permissions (use chrome in this article)

First, make sure that the url on which you run the following js is https protocol or localhost protocol:

 const constrains = {
   video: true,
   audio: true
  }
 navigator.mediaDevices.getUserMedia(constrains)
  .then(stream => {
   console.log(' Get stream The type of is MediaStream')
  })
  //  In 1 Some words from old browsers: 
  // navigator.webkitGetUserMedia
  // navigator.mozGetUserMedia

After that, your browser will have a pop-up box telling you that your browser wants to access camera and asking if you allow it.
In addition, constrains here can set the minimum, ideal and maximum resolution, and can also control the direction of the camera by setting facingMode on the mobile phone.

2. Give the obtained stream: MediaStream to video and camera to realize the live broadcast effect

 const video = document.createElement('video');
 //document.body.appendChild(video)
 const constrains = {
   video: true,
   audio: true
  }
 navigator.mediaDevices.getUserMedia(constrains)
  .then(stream => {
  video.srcObject = stream;
  video.play();
  })

At this time, video will play the content recorded by camera in real time

STEP 3 Take pictures

 //  Displaying photos image Label 
 const image = document.createElement('image')
 // canvas Will read video And then output (somewhat similar to giving video Screenshot) 
 const canvas = document.createElement('canvas')
 const video = document.getElementById('video');
 const context = canvas.getContext('2d')
 context.drawImage(video, 0, 0, canvas.height, canvas.width)
 //  At this point, the canvas The generated picture is converted to 1 A data url
 const url = canvas.toDataURL()
 image.src = url

4. Video recording

Need to make some modifications based on 2. MediaStream to video

 const constrains = {
   video: true,
   audio: true
  }
 let mediaRecorder
 navigator.mediaDevices.getUserMedia(constrains)
  .then(stream => {
  mediaRecorder = new MediaRecorder(stream)
  })
 
 startRecord() {
  mediaRecorder.start()
  mediaRecorder.ondataavailable = e => {
   chunks.push(e.data)
  }
 }

 stopRecord() {
  mediaRecorder.stop()
  return new Promise(resolve => {
   mediaRecorder.onstop = e => {
    const blob = new Blob(chunks, { type: 'video/ogg; codecs=opus' })
    const audioURL = window.URL.createObjectURL(blob)
    resolve(audioURL)
   }
  })
 }

 // video Labels are used to display recorded content 
 const video = document.createElement('video');
 //document.body.appendChild(video)

 //  Start recording 
 startRecord()

 // do something.... For example, there are two here button , 1 I started recording, 1 End video recording 

 //  End the video recording 
 stopRecord().then(videoUrl => {
  video.src = videoUrl
 })
 //  At this time video The content of the label is what you recorded. 

Above is how JavaScript uses the camera in the browser detailed content, more about JavaScript browser uses the camera information please pay attention to this site other related articles!