I want to use two webcams on a single web page in html & javascript

Question

I want to capture images from both cameras and use them for some purposes is there anyone who can help me out? any tutorial? library? method? .

The methods to include webcam images on one's website differ from manufacturer, model, network surrounding, etc. Impossible to answer — yunzen, Jan 19 '21 at 08:22
https://stackoverflow.com/questions/22787549/accessing-multiple-camera-javascript-getusermedia Here you can find how to solve your problem. — dev.artisanbiz, Jan 19 '21 at 08:24

score 0 · Answer 1 · answered Jan 19 '21 at 08:57

You can create two different streams, one for each camera, and show them simultaneously in two <video> tags.

The list of available devices is available using navigator.mediaDevices.enumerateDevices(). After filtering the resulting list for only videoinputs, you have access to the deviceIds without needing permission from the user.

With getUserMedia you can then request a stream from the camera with id camera1Id using

navigator.mediaDevices.getUserMedia({
  video: {
    deviceId: { exact: camera1Id }
  }
});

The resulting stream can be fed into a <video> (referenced here by vid) by calling vid.srcObject = stream.

I have done this for two streams from two webcams simultaneously.

Here you can get details https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices — MD. RAKIB HASAN, Jan 19 '21 at 08:58

I want to use two webcams on a single web page in html & javascript

1 Answers1