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
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.
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
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ā¦!
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
This method is incompatible with the safari browser if that is what you are trying to use.
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
Are both webcams connected to the same machine?
Hello
Yes
This link should help you: html5 video - Accessing Multiple camera javascript getusermedia - Stack Overflow
navigator.mediaDevices.getUserMedia({
video: {
deviceId: { exact: camera1Id }
}
});
Youāre a gorgeous person, Iāll try right away.
I hope I can.
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
);
}
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?
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,
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
sample1- I can get two camera streams in the link below.
multiple camera stream sample
sample2- In the link below, I can stop this camera and make it full screen.
webcam/camera streaming via video player template
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?
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.
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.
can anyone help me change it to use MQTT instead of scalardrone !!