Accessing Your Webcam in HTML5


#21

I think the APi has been changed to: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

The tutorial will be updated in a few moments to support it instead of the now-deprecated navigator.getUserMedia.

Cheers,
Kirupa


#22

I updated the tutorial to reflect the new getUserMedia API that everyone should be using: https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm

Thanks for bringing this to my attention :slight_smile:


#23

How to stop video streaming completely


#24

You canā€™t prevent the code from disabling your webcam. Is that what you are asking?


#25

Hi, thanks for the article, however Iā€™m not seeing the webcam in Firefox on Windows 7, just the grey box and the error warning. Works fine in Chrome.


#26

What is the error you are seeing in Firefox?


#27

Hi, my bad! Turns out it wasnā€™t working because the webcam was still in use in a Chrome browser whilst I was testing in FF!
In the hope of someone else not making the same stupid mistake, the error was ā€˜NotReadableError: Failed to allocate videosourceā€™


#28

Haha! That has bitten me so often. The error message could be more helpful in a case like this as well :stuck_out_tongue:


#29

Hi,
thanks for this. Can you pls advise how to make it work in an android webview? thks.


#30

The code should just work. Have you set the appropriate app permissions to allow webcam access via the webview?


#31

Hello Kirupa,

I wanted to ask you that is there any way to stop the camera, it seems that when i close my video div on stop my camera is still on and browser still shows the recording icon in the tab corner.


#32

Sorry for the delay in replying on this. You need to stop each audio/video track individually.

You can get a list of all tracks using: stream.getTracks()

That will be an array of track objects, so you can loop through it and call the stop method on each track object found.

Cheers,
Kirupa


#33

Hey, thanks for the great tutorial, I like how you broke it down so you understand the sections. Any update on filters and overlays? I just want to add a custom grid to mine. Ideas? Thank you sir.


#34

Sorry for the delay in getting back to you on it. You can position a div element over the image and place any content you want. You can certainly use filters and/or grids - just be sure to ensure there are transparent regions so that the video can still be visible :slight_smile:


#35

Hi Kirupa,

Congratulations! Keep up with the good work!


#36

You can change the example slightly to allow selecting front/back camera (works on iOS and Android!)

 var params = {video: {facingMode: 'environment'}};
// or use 
//var params = {video: {facingMode: 'user'}};
 
if (navigator.mediaDevices.getUserMedia) {       
    navigator.mediaDevices.getUserMedia(params)

#37

Hi,

I tried the samething but my streaming is not stopped and i can see the camera is still running in the background. Is there any other way to stop the cam ?

Below is my code:
I have created my function cameraServiceā€¦

cameraService(cameraStop: boolean) {
    var front = false;
    var constraints = { video: { facingMode: (front ? "user" : "environment") } };

    function handleSuccess(stream) {
      const video: any = document.querySelector('#video');
      video.srcObject = stream;
      if (cameraStop == true) {
        video.play();
        console.log("On Stream");
      }
      else {
        stopStream(stream);
        console.log("Off Stream");
      }
    }

    function showVideo() {
      this.video.classList.add("visible");
    }

    function handleError(error) {
      console.log('getUserMedia error: ', error);
    }

    navigator.mediaDevices.getUserMedia(constraints).
      then(handleSuccess).catch(handleError);

    function stopStream(stream) {

      for (let track of stream.getTracks()) {
        track.stop()
      }
    }
  }

#38

I think you are on the right track :smile:

You may need to set the video source to null in addition to calling stop on the track object. Check out the following snippet:

function stop(e) {
  var stream = video.srcObject;
  var tracks = stream.getTracks();

  for (var i = 0; i < tracks.length; i++) {
    var track = tracks[i];
    track.stop();
  }

  video.srcObject = null;
}

Here is a working example: https://www.kirupa.com/snippets/examples/stop_webcam_stream.htm

Does this help?

Cheers,
Kirupa


#40

Kirupa,
what changes do i have to make if i want to take a picture and the save it?


#41

You can define a new image using the canvas.drawImage API. The source of the image will be a frame from the video element that is displaying your webcam footage. I donā€™t have time to create a custom example (yet), but this article does a good job providing a solution: https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos

:slight_smile: