# Simple Video Chating with WebRTC

**URL:** <https://forum.kirupa.com/t/simple-video-chating-with-webrtc/637297>\
**Category:** programming\
**Created:** [October 11, 2017, 6:36pm UTC](https://forum.kirupa.com/t/simple-video-chating-with-webrtc/637297 "2017-10-11T18:36:46Z")\
**Posts on this page:** 11\
**Page:** 2

<div class="post-metadata">

**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:** [March 12, 2021, 5:36am UTC](https://forum.kirupa.com/t/simple-video-chating-with-webrtc/637297/23 "2021-03-12T05:36:41Z")

</div>

This link should help you: [html5 video - Accessing Multiple camera javascript getusermedia - Stack Overflow](https://stackoverflow.com/questions/22787549/accessing-multiple-camera-javascript-getusermedia)

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

```

🙂

---

<div class="post-metadata">

**Author:** ![artdzy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/artdzy/32/13837_2.png) [@artdzy](https://forum.kirupa.com/u/artdzy)\
**Post date:** [March 12, 2021, 5:55am UTC](https://forum.kirupa.com/t/simple-video-chating-with-webrtc/637297/24 "2021-03-12T05:55:37Z")

</div>

You’re a gorgeous person, I’ll try right away.  
I hope I can.

---

<div class="post-metadata">

**Author:** ![artdzy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/artdzy/32/13837_2.png) [@artdzy](https://forum.kirupa.com/u/artdzy)\
**Post date:** [March 12, 2021, 6:40am UTC](https://forum.kirupa.com/t/simple-video-chating-with-webrtc/637297/25 "2021-03-12T06:40:50Z")

</div>

I’m trying, but I guess it’s not what I want.  
My goal is to ensure that the person connecting to the call can switch between my cameras.  
You can see my cameras with a “camera switch” button.  
How can I do this by changing where in the code line below?

// Generate random room name if needed  
if (!location.hash) {  
location.hash = Math.floor(Math.random() \* 0xFFFFFF).toString(16);  
}  
const roomHash = location.hash.substring(1);

// TODO: Replace with your own channel ID  
const drone = new ScaleDrone(‘2xmbUiTsqTzukyf7’);  
// Room name needs to be prefixed with ‘observable-’  
const roomName = ‘observable-’ + roomHash;  
const configuration = {  
iceServers: [{  
urls: ‘stun:stun.l.google.com:19302’  
}]  
};  
let room;  
let pc;

function onSuccess() {};  
function onError(error) {  
console.error(error);  
};

drone.on(‘open’, error =\> {  
if (error) {  
return console.error(error);  
}  
room = drone.subscribe(roomName);  
room.on(‘open’, error =\> {  
if (error) {  
onError(error);  
}  
});  
// We’re connected to the room and received an array of ‘members’  
// connected to the room (including us). Signaling server is ready.  
room.on(‘members’, members =\> {  
console.log(‘MEMBERS’, members);  
// If we are the second user to connect to the room we will be creating the offer  
const isOfferer = members.length === 2;  
startWebRTC(isOfferer);  
});  
});

// Send signaling data via Scaledrone  
function sendMessage(message) {  
drone.publish({  
room: roomName,  
message  
});  
}

function startWebRTC(isOfferer) {  
pc = new RTCPeerConnection(configuration);

// ‘onicecandidate’ notifies us whenever an ICE agent needs to deliver a  
// message to the other peer through the signaling server  
pc.onicecandidate = event =\> {  
if (event.candidate) {  
sendMessage({‘candidate’: event.candidate});  
}  
};

// If user is offerer let the ‘negotiationneeded’ event create the offer  
if (isOfferer) {  
pc.onnegotiationneeded = () =\> {  
pc.createOffer().then(localDescCreated).catch(onError);  
}  
}

// When a remote stream arrives display it in the #remoteVideo element  
pc.onaddstream = event =\> {  
remoteVideo.srcObject = event.stream;  
};

navigator.mediaDevices.getUserMedia({  
audio: true,  
video: true,  
}).then(stream =\> {  
// Display your local video in #localVideo element  
localVideo.srcObject = stream;  
// Add your stream to be sent to the conneting peer  
pc.addStream(stream);  
}, onError);

// Listen to signaling data from Scaledrone  
room.on(‘data’, (message, client) =\> {  
// Message was sent by us  
if (client.id === drone.clientId) {  
return;  
}

```
if (message.sdp) {
  // This is called after receiving an offer or answer from another peer
  pc.setRemoteDescription(new RTCSessionDescription(message.sdp), () => {
    // When receiving an offer lets answer it
    if (pc.remoteDescription.type === 'offer') {
      pc.createAnswer().then(localDescCreated).catch(onError);
    }
  }, onError);
} else if (message.candidate) {
  // Add the new ICE candidate to our connections remote description
  pc.addIceCandidate(
    new RTCIceCandidate(message.candidate), onSuccess, onError
  );
}

```

});  
}

function localDescCreated(desc) {  
pc.setLocalDescription(  
desc,  
() =\> sendMessage({‘sdp’: pc.localDescription}),  
onError  
);  
}

---

<div class="post-metadata">

**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:** [March 12, 2021, 9:50pm UTC](https://forum.kirupa.com/t/simple-video-chating-with-webrtc/637297/26 "2021-03-12T21:50:37Z")

</div>

A remote person changing your local camera is difficult (or impossible) to implement, for there are security implications that block this behavior. This is something that you have to initiate through an action on your local machine itself.

Have you seen examples of apps or services that are able to do what you are trying to do?

---

<div class="post-metadata">

**Author:** ![artdzy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/artdzy/32/13837_2.png) [@artdzy](https://forum.kirupa.com/u/artdzy)\
**Post date:** [March 14, 2021, 8:01pm UTC](https://forum.kirupa.com/t/simple-video-chating-with-webrtc/637297/27 "2021-03-14T20:01:13Z")

</div>

I do not know such a system. However, it was possible to switch between online traffic cameras and security cameras.

I’m running your source code on [https://artunduzay.com/digitalinspection/index](https://artunduzay.com/digitalinspection/index).  
Is it possible to show two cameras at the same time as User and Enviroment and add “ull screen” feature?  
In this case, the participant can view the camera he wants to watch in full screen.  
The microphone will remain the default device.

If you can help me with this, I would be very happy.  
I don’t want to take any more of your time.  
Thanks in advance,

---

<div class="post-metadata">

**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:** [March 14, 2021, 8:15pm UTC](https://forum.kirupa.com/t/simple-video-chating-with-webrtc/637297/28 "2021-03-14T20:15:49Z")

</div>

Unfortunately no, that isn’t possible either. The media capabilities in the browser aren’t quite as feature-rich as what you describe. You can only have one video source and one audio source active at any one time - even if your system has multiple sources available 😔

---

<div class="post-metadata">

**Author:** ![artdzy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/artdzy/32/13837_2.png) [@artdzy](https://forum.kirupa.com/u/artdzy)\
**Post date:** [March 15, 2021, 7:08am UTC](https://forum.kirupa.com/t/simple-video-chating-with-webrtc/637297/29 "2021-03-15T07:08:10Z")

</div>

sample1- I can get two camera streams in the link below.  
[multiple camera stream sample](https://we.tl/t-qAIRlA8ywN)

sample2- In the link below, I can stop this camera and make it full screen.  
[webcam/camera streaming via video player template](https://we.tl/t-0ZWBF5Pavu)  
What I want is to add the simultaneous broadcasting feature of (sample1) two cameras to the code you wrote, and (sample2) to make it full screen and pause as in the video player interface.

The microphone can remain the default device.

Can you please check it?

---

<div class="post-metadata">

**Author:** ![artdzy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/artdzy/32/13837_2.png) [@artdzy](https://forum.kirupa.com/u/artdzy)\
**Post date:** [March 17, 2021, 3:24am UTC](https://forum.kirupa.com/t/simple-video-chating-with-webrtc/637297/30 "2021-03-17T03:24:55Z")

</div>

Did you have a chance to check? @kirupa

---

<div class="post-metadata">

**Author:** ![pacedev](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pacedev/32/14061_2.png) [@pacedev](https://forum.kirupa.com/u/pacedev)\
**Post date:** [March 31, 2021, 6:35am UTC](https://forum.kirupa.com/t/simple-video-chating-with-webrtc/637297/32 "2021-03-31T06:35:02Z")

</div>

Hi really simple and helpful post to start with WebRTC. Is this possible to Record this 1:1 Video chat along with Audio ? if yes then can someone guide in right direction please.

---

<div class="post-metadata">

**Author:** ![Ubaid\_Ur\_Rehman](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ubaid_ur_rehman/32/14136_2.png) [@Ubaid\_Ur\_Rehman](https://forum.kirupa.com/u/Ubaid_Ur_Rehman)\
**Post date:** [April 7, 2021, 1:05pm UTC](https://forum.kirupa.com/t/simple-video-chating-with-webrtc/637297/34 "2021-04-07T13:05:22Z")

</div>

Hello Sir Thank you for this tutorial I found this helpful.  
But I am facing an issue in connecting using different network.  
I am using one device on my wifi and other device on my cellular network but I can’t create stream in this way. kindly guide me.

---

<div class="post-metadata">

**Author:** ![mdjavedakhtar](https://avatars.discourse-cdn.com/v4/letter/m/958977/32.png) [@mdjavedakhtar](https://forum.kirupa.com/u/mdjavedakhtar)\
**Post date:** [February 12, 2022, 3:54pm UTC](https://forum.kirupa.com/t/simple-video-chating-with-webrtc/637297/35 "2022-02-12T15:54:14Z")

</div>

can anyone help me change it to use MQTT instead of scalardrone !!

[Previous page](https://forum.kirupa.com/t/simple-video-chating-with-webrtc/637297.md?page=1)