Simple Video Chating with WebRTC

programming
6

Hi sergee, JavaScript code is fine. It is the same as in the post, Iā€™ve only changed Scaledrone channal ID (I registered to Scaledrone), so it works as the example one does only for remote users. You may check the example (see the post), it works the same as my page does. Now I understand that the code doesnā€™t provide some registration form to accept my ip address, or how it works I donā€™t know, to set me as a local user. Scaledrone provide a registration solution to a site, but it is all for programmers, my occupation is different, I can only use a ready solution.

7

You are correct. Scaledrone simply offers a way to connect two hosts and is targeted for developers. If you want an out of the box video solution I highly recommend looking into a ready solution.

Unfortunately Iā€™m not exactly sure what is going wrong. If you still want to use Scaledrone then please upload and share the project with me, otherwise itā€™s impossible for me to debug it.

8

Hey Kirupa
Thanks for interesting tutorial and simple solution for a video chat.
I recreated your example and it works when both peers are in the same local network.
However when one is on local wi-fi and seccond is on cellural network the video chat doesn`t start. It is strange because the script detects 2 members and I can send text messages between peers, only the video chat does not fire up.

Any ideas why? Maybe it is some security limitation in browser??

Thanks in advance

9

Is the video the only thing that isnā€™t playing via the cellular network? Does the browser developer tools console show any errors? For the cellular test, are you viewing on a mobile device? If so, which device? :phone:

10

firstly, thank u for this project, this is very good for meā€¦ but how can 3 or much person connected for group chat? i canā€™t this :frowning:

11

That will require a more elaborate setup on the server. I would look into custom 3rd party streaming services for that level of functionality :grinning:

1 Like
12

The NAT traversal with STUN doesnā€™t work. I ran the demo with one computer on WIFI and the other on cellular hotspot and it doesnā€™t work

1 Like
13

Hi! I have the same problem. I open the url in two differents devices and in both I see myself as localvideo. I changed the ID, but doesnĀ“t work. I need help, please.

15

How well would this work on a security camera controlled using a Raspberry Pi? The application uses the Nodejs webserver running express framework to handle pan, tilt and zoom. Do you think it will work ? Thanks, your code has been the best documented I have found

16

i also have the same problem i only see the local video. when we connect the same network its working fine but when we connect different devices with different network it only shows the local video please anyone give me the solution for this

thanks in advanceā€¦!

17

Is there any way to get more that two people in a call using this same method?
current site at: https://gameplexcorp.weebly.com/meetup-room.html#testroom

18

This method is incompatible with the safari browser if that is what you are trying to use.

19

Hello,
I have two different webcams, how do I add the button / task that I can switch between?
Also, can the participant switch between my cameras?

ā€œFor example, if the participant wants to see my detail camera, he / she can select it over the system, if he / she wants a general view, he / she should choose my other camera.ā€

Thanks in advance

20

Are both webcams connected to the same machine?

22

Hello
Yes

23

This link should help you: html5 video - Accessing Multiple camera javascript getusermedia - Stack Overflow

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

:slight_smile:

24

Youā€™re a gorgeous person, Iā€™ll try right away.
I hope I can.

25

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
);
}

26

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?

27

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.
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,