Accessing Your Webcam in HTML5

programming
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

1 Like
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?

1 Like
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ā€™

1 Like
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:

1 Like
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?

1 Like
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

1 Like
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)
1 Like
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: