Accessing Your Webcam in HTML5

programming
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:

42

Iā€™ve gotten this to work as a single html file, but when I then take that file and make it as the target of another fileā€™s frameset, it doesnā€™t work even though loading the frameset page causes my computer to ask for permission to access my camera. If I right click and choose to view the frame in its own tab, it loads and works.

The idea is to have a split browser screen where you have me in one part, and the text Iā€™m reading in the other part. Having it all in one window is easier than having the video in one window and the text in another and manually arranging it on my screen.
Any ideas?

43

Is the domain for both the page loading the frame and the content of the frame the same?

44

Yes. Theyā€™re all local files.

Videobox.html is the file that works fine on its own, but not in this context. I just get the grey box. ![frameset%20example|690x405](upload://4dAQvtX9kGjBMNYJftVp7mt5EvB.png)
45

frameset%20example
frameset example.PNG1306Ɨ768 268 KB

46

Try uploading them to a HTTPS server and see if this problem is solved. You may be running into some security-related issue, for running some of these APIs like getUserMedia from the file system has shown weird behavior.

47

I didnā€™t want this to be the way, because I like the idea of being able to use it when not connected to the internet, but putting it on a website and the exact same html/files now works.

Will try to see if I can have the frameset local with the texts, but the actual webcame on the website and see if it still works.

48

You can totally do this without relying on the internet by by running a web server on your local machine. One popular option is http-server: https://www.npmjs.com/package/http-server

Let me know if you need any further guidance on this :slight_smile:

1 Like
49

Great write up! Would there be a way to use an outdoor cams (Hikvision) as the feed instead of a built in webcam? I have a few (3) cams Id like to put on a page and broadcast on the web for local weather conditions for my windsurfing group.

50

That would be more challenging. I donā€™t think our browser APIs would be able to help you here, for that would require your outdoor cams to stream the visuals to the network via a local web server or something equivalent that you can then access.

51

Can you do group video chat?

52

Yes, but you will need a centralized server to coordinate all of the streams. It isnā€™t something you can easily do on the client side on your machine :slight_smile:

53

Hello and thank you for sharing this topic with us.
I have a question. How can I use another camera instead of laptop camera?
For instance, I want to use an esp32 cam to be displayed on my Html web page.
How should I add it to the javascript code or any other parts of it ??
I appreciate any help in advance.:heart::heart: