multiple cameras being displayed on a single browser window with the help of html

programming web dev
1

hi. i’m an engineering student and currently doing my final year project. my project is the development of vehicle simulator for the training of drivers. among one of the element of my project is to display 3 camera’s output onto a single web browser (basically the concept of 1 front view and 2 rear view of a vehicle). since i’m an engineer student, i’m not that familiar with these html stuff. so could anyone help me with this? i came across kirupa’s “Accessing Your Webcam in HTML” video so i was wondering if it’s possible to do it with 3 webcam cameras

2

Hi @HARITH_FIRDAUS - I was thinking more about this since you posted on YouTube.

One approach that will work is for you to create a separate video element for each camera you would like to display the video from. In the code for targeting each video element, you can specify which camera’s source you would use. This is the API that can help you with this:

The code snippet from there may be perfect for what you are trying to do:

if (!navigator.mediaDevices?.enumerateDevices) {
  console.log("enumerateDevices() not supported.");
} else {
  // List cameras and microphones.
  navigator.mediaDevices.enumerateDevices()
    .then((devices) => {
      devices.forEach((device) => {
        console.log(`${device.kind}: ${device.label} id = ${device.deviceId}`);
      });
    })
    .catch((err) => {
      console.error(`${err.name}: ${err.message}`);
    });
}

When you have the deviceId for the camera in question, you can specify that in your code:

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

Does this help point you in the right direction?

Cheers,
Kirupa

3

thank you for the instant reply! appreciate it. i’ll try to work on it

2 Likes
4

hi kirupa. just wanna ask something following the topic. i just realized if you use the code, the display will be turned on and we will see the web cam output but the webcam output is from the device we coded on right? let’s say there are 2 devices/laptop. we do the code on laptop 1 and manage to display the 3 webcam on a single web page then we wanted to open laptop 1’s 3 webcam output on laptop 2. is that possible?

5

That is possible, but you will need to use some server-side logic for that to send the visuals across the network. It won’t be a pure client-side only solution like what we have now.

6

What you should probably be looking at is “WebRTC video”, do a search for that.
It will still need a webserver but it really doesnt do much, it just allows two browsers to find each other and then after that all communication will be directly from one browser to another. I tHiNk there was a way of doing it without the server if you know the ip’s but Im REALLY not sure about that. Still, installing node on one computer shouldnt be a hassle aye?
I did a one page google search…

…no idea how good it is as I cant test it, but its worth a look as it was the simplest one I could find quickly.