# multiple cameras being displayed on a single browser window with the help of html **URL:** \ **Category:** web dev\ **Created:** [January 18, 2023, 4:25pm UTC](https://forum.kirupa.com/t/multiple-cameras-being-displayed-on-a-single-browser-window-with-the-help-of-html/656387 "2023-01-18T16:25:41Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![HARITH\_FIRDAUS](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/harith_firdaus/32/20399_2.png) [@HARITH\_FIRDAUS](https://forum.kirupa.com/u/HARITH_FIRDAUS)\ **Post date:** [January 18, 2023, 4:25pm UTC](https://forum.kirupa.com/t/multiple-cameras-being-displayed-on-a-single-browser-window-with-the-help-of-html/656387/1 "2023-01-18T16:25:41Z")
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 ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [January 18, 2023, 7:52pm UTC](https://forum.kirupa.com/t/multiple-cameras-being-displayed-on-a-single-browser-window-with-the-help-of-html/656387/2 "2023-01-18T19:52:40Z")
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: > **[MediaDevices: enumerateDevices() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices)** > > The enumerateDevices() method of the MediaDevices interface requests a list of the currently available media input and output devices, such as microphones, cameras, headsets, and so forth. > The returned Promise is resolved with an array of... The code snippet from there may be perfect for what you are trying to do: ```auto 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: ```auto navigator.mediaDevices.getUserMedia({ video: { deviceId: { exact: camera1Id } } }); ``` Does this help point you in the right direction? Cheers, Kirupa ---
**Author:** ![HARITH\_FIRDAUS](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/harith_firdaus/32/20399_2.png) [@HARITH\_FIRDAUS](https://forum.kirupa.com/u/HARITH_FIRDAUS)\ **Post date:** [January 19, 2023, 6:09am UTC](https://forum.kirupa.com/t/multiple-cameras-being-displayed-on-a-single-browser-window-with-the-help-of-html/656387/3 "2023-01-19T06:09:49Z")
thank you for the instant reply! appreciate it. i’ll try to work on it ---
**Author:** ![HARITH\_FIRDAUS](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/harith_firdaus/32/20399_2.png) [@HARITH\_FIRDAUS](https://forum.kirupa.com/u/HARITH_FIRDAUS)\ **Post date:** [January 19, 2023, 8:23am UTC](https://forum.kirupa.com/t/multiple-cameras-being-displayed-on-a-single-browser-window-with-the-help-of-html/656387/4 "2023-01-19T08:23:18Z")
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? ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [January 19, 2023, 3:22pm UTC](https://forum.kirupa.com/t/multiple-cameras-being-displayed-on-a-single-browser-window-with-the-help-of-html/656387/5 "2023-01-19T15:22:47Z")
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. ---
**Author:** ![PAEz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/paez/32/19607_2.png) [@PAEz](https://forum.kirupa.com/u/PAEz)\ **Post date:** [January 20, 2023, 9:45am UTC](https://forum.kirupa.com/t/multiple-cameras-being-displayed-on-a-single-browser-window-with-the-help-of-html/656387/6 "2023-01-20T09:45:19Z")
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… > **[GitHub - itstaranarora/video-chat-v1: A Video Chat app build with NodeJS, Express,...](https://github.com/itstaranarora/video-chat-v1)** > > A Video Chat app build with NodeJS, Express, Peerjs, Socket.io …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.