admin管理员组文章数量:1353240
I'm now implementing the source code from WebRTC Samples to bee 3 users connection by using mesh topology.
However, my code doesn't work as I thought it would be. I think I'm stuck at calling function iceCallBack#
(# refers to number 1, 2 ,3) because the output result is the same as the original. It only can connect 2 users.
I don't know how to fix it in proper way.
Here is some of my JavaScript code that I have been working on:
var audio2 = document.querySelector('audio#audio2');
var audio3 = document.querySelector('audio#audio3');
var pc1;
var pc2;
var pc3;
function call() {
callButton.disabled = true;
codecSelector.disabled = true;
trace('Starting call');
var servers = null;
var pcConstraints = {
'optional': []
};
pc1 = new RTCPeerConnection(servers, pcConstraints);
trace('Created local peer connection object pc1');
pc1.onicecandidate = iceCallback1;
pc2 = new RTCPeerConnection(servers, pcConstraints);
trace('Created remote peer connection object pc2');
pc2.onicecandidate = iceCallback2;
pc2.onaddstream = gotRemoteStream;
trace('Requesting local stream');
pc3 = new RTCPeerConnection(servers, pcConstraints);
trace('Created remote peer connection object pc2');
pc3.onicecandidate = iceCallback3;
pc3.onaddstream = gotRemoteStream2;
trace('Requesting local stream');
navigator.mediaDevices.getUserMedia({
audio: true,
video: false
})
.then(gotStream)
.catch(function(e) {
alert('getUserMedia() error: ' + e.name);
});
}
//Description of pc1 creating offer to pc2
function gotDescription1(desc) {
desc.sdp = forceChosenAudioCodec(desc.sdp);
trace('Offer from pc1 \n' + desc.sdp);
pc1.setLocalDescription(desc, function() {
pc2.setRemoteDescription(desc, function() {
pc2.createAnswer(gotDescription2, onCreateSessionDescriptionError);
}, onSetSessionDescriptionError);
}, onSetSessionDescriptionError);
}
//Description of pc1 creating offer to pc3
function gotDescription3(desc) {
desc.sdp = forceChosenAudioCodec(desc.sdp);
trace('Offer from pc1 \n' + desc.sdp);
pc1.setLocalDescription(desc, function() {
pc3.setRemoteDescription(desc, function() {
pc3.createAnswer(gotDescription4, onCreateSessionDescriptionError); //Must edit gotDescription4
}, onSetSessionDescriptionError);
}, onSetSessionDescriptionError);
}
//Creating answer from pc2
function gotDescription2(desc) {
desc.sdp = forceChosenAudioCodec(desc.sdp);
pc2.setLocalDescription(desc, function() {
trace('Answer from pc2 \n' + desc.sdp);
pc1.setRemoteDescription(desc, function() {
}, onSetSessionDescriptionError);
}, onSetSessionDescriptionError);
}
//Creating answer from pc3
function gotDescription4(desc) {
desc.sdp = forceChosenAudioCodec(desc.sdp);
pc3.setLocalDescription(desc, function() {
trace('Answer from pc2 \n' + desc.sdp);
pc1.setRemoteDescription(desc, function() {
}, onSetSessionDescriptionError);
}, onSetSessionDescriptionError);
}
function iceCallback1(event) {
if (event.candidate) {
pc2.addIceCandidate(new RTCIceCandidate(event.candidate),
onAddIceCandidateSuccess, onAddIceCandidateError);
pc3.addIceCandidate(new RTCIceCandidate(event.candidate),
onAddIceCandidateSuccess, onAddIceCandidateError);
trace('Local ICE candidate: \n' + event.candidate.candidate);
}
}
function iceCallback2(event) {
if (event.candidate) {
pc1.addIceCandidate(new RTCIceCandidate(event.candidate),
onAddIceCandidateSuccess, onAddIceCandidateError);
pc3.addIceCandidate(new RTCIceCandidate(event.candidate),
onAddIceCandidateSuccess, onAddIceCandidateError);
trace('Remote ICE candidate: \n ' + event.candidate.candidate);
}
}
function iceCallback3(event) {
if (event.candidate) {
pc1.addIceCandidate(new RTCIceCandidate(event.candidate),
onAddIceCandidateSuccess, onAddIceCandidateError);
pc2.addIceCandidate(new RTCIceCandidate(event.candidate),
onAddIceCandidateSuccess, onAddIceCandidateError);
trace('Remote ICE candidate: \n ' + event.candidate.candidate);
}
}
<div id="audio">
<div>
<div class="label">Local audio:</div><audio id="audio1" autoplay controls muted></audio>
</div>
<div>
<div class="label">Remote audio2:</div><audio id="audio2" autoplay controls></audio>
</div>
<div>
<div class="label">Remote audio3:</div><audio id="audio3" autoplay controls></audio>
</div>
</div>
I'm now implementing the source code from WebRTC Samples to bee 3 users connection by using mesh topology.
However, my code doesn't work as I thought it would be. I think I'm stuck at calling function iceCallBack#
(# refers to number 1, 2 ,3) because the output result is the same as the original. It only can connect 2 users.
I don't know how to fix it in proper way.
Here is some of my JavaScript code that I have been working on:
var audio2 = document.querySelector('audio#audio2');
var audio3 = document.querySelector('audio#audio3');
var pc1;
var pc2;
var pc3;
function call() {
callButton.disabled = true;
codecSelector.disabled = true;
trace('Starting call');
var servers = null;
var pcConstraints = {
'optional': []
};
pc1 = new RTCPeerConnection(servers, pcConstraints);
trace('Created local peer connection object pc1');
pc1.onicecandidate = iceCallback1;
pc2 = new RTCPeerConnection(servers, pcConstraints);
trace('Created remote peer connection object pc2');
pc2.onicecandidate = iceCallback2;
pc2.onaddstream = gotRemoteStream;
trace('Requesting local stream');
pc3 = new RTCPeerConnection(servers, pcConstraints);
trace('Created remote peer connection object pc2');
pc3.onicecandidate = iceCallback3;
pc3.onaddstream = gotRemoteStream2;
trace('Requesting local stream');
navigator.mediaDevices.getUserMedia({
audio: true,
video: false
})
.then(gotStream)
.catch(function(e) {
alert('getUserMedia() error: ' + e.name);
});
}
//Description of pc1 creating offer to pc2
function gotDescription1(desc) {
desc.sdp = forceChosenAudioCodec(desc.sdp);
trace('Offer from pc1 \n' + desc.sdp);
pc1.setLocalDescription(desc, function() {
pc2.setRemoteDescription(desc, function() {
pc2.createAnswer(gotDescription2, onCreateSessionDescriptionError);
}, onSetSessionDescriptionError);
}, onSetSessionDescriptionError);
}
//Description of pc1 creating offer to pc3
function gotDescription3(desc) {
desc.sdp = forceChosenAudioCodec(desc.sdp);
trace('Offer from pc1 \n' + desc.sdp);
pc1.setLocalDescription(desc, function() {
pc3.setRemoteDescription(desc, function() {
pc3.createAnswer(gotDescription4, onCreateSessionDescriptionError); //Must edit gotDescription4
}, onSetSessionDescriptionError);
}, onSetSessionDescriptionError);
}
//Creating answer from pc2
function gotDescription2(desc) {
desc.sdp = forceChosenAudioCodec(desc.sdp);
pc2.setLocalDescription(desc, function() {
trace('Answer from pc2 \n' + desc.sdp);
pc1.setRemoteDescription(desc, function() {
}, onSetSessionDescriptionError);
}, onSetSessionDescriptionError);
}
//Creating answer from pc3
function gotDescription4(desc) {
desc.sdp = forceChosenAudioCodec(desc.sdp);
pc3.setLocalDescription(desc, function() {
trace('Answer from pc2 \n' + desc.sdp);
pc1.setRemoteDescription(desc, function() {
}, onSetSessionDescriptionError);
}, onSetSessionDescriptionError);
}
function iceCallback1(event) {
if (event.candidate) {
pc2.addIceCandidate(new RTCIceCandidate(event.candidate),
onAddIceCandidateSuccess, onAddIceCandidateError);
pc3.addIceCandidate(new RTCIceCandidate(event.candidate),
onAddIceCandidateSuccess, onAddIceCandidateError);
trace('Local ICE candidate: \n' + event.candidate.candidate);
}
}
function iceCallback2(event) {
if (event.candidate) {
pc1.addIceCandidate(new RTCIceCandidate(event.candidate),
onAddIceCandidateSuccess, onAddIceCandidateError);
pc3.addIceCandidate(new RTCIceCandidate(event.candidate),
onAddIceCandidateSuccess, onAddIceCandidateError);
trace('Remote ICE candidate: \n ' + event.candidate.candidate);
}
}
function iceCallback3(event) {
if (event.candidate) {
pc1.addIceCandidate(new RTCIceCandidate(event.candidate),
onAddIceCandidateSuccess, onAddIceCandidateError);
pc2.addIceCandidate(new RTCIceCandidate(event.candidate),
onAddIceCandidateSuccess, onAddIceCandidateError);
trace('Remote ICE candidate: \n ' + event.candidate.candidate);
}
}
<div id="audio">
<div>
<div class="label">Local audio:</div><audio id="audio1" autoplay controls muted></audio>
</div>
<div>
<div class="label">Remote audio2:</div><audio id="audio2" autoplay controls></audio>
</div>
<div>
<div class="label">Remote audio3:</div><audio id="audio3" autoplay controls></audio>
</div>
</div>
Note: I'm new with webRTC. I might be dumb in some way, please forgive me.
Thank you so much.
Share Improve this question asked Apr 27, 2016 at 9:14 benjibenji 1961 silver badge11 bronze badges 5- Sorry, this isn't a debugging site. Mind asking a question? – jib Commented Apr 27, 2016 at 14:56
- Can 'RTCPeerConnection().addIceCandidate()' be used 2 times at the same time? Because I want it to municate in bidirection. For example, A --> B,C. B --> A,C. C --> A,B – benji Commented Apr 28, 2016 at 1:08
- do you have a working three way example? i must be stupid im stuck where you were and cant seem to get past it – kaioker2 Commented May 10, 2020 at 23:09
- @kaioker2 did you managed to get the idea to make it work? – Jatin Garg Commented Nov 1, 2021 at 16:38
- @JatinGarg no i did not srry – kaioker2 Commented Nov 4, 2021 at 2:05
1 Answer
Reset to default 11A mesh of 3 users means each user sets up two connections, one to each of the other two users. At each client's end, these are two entirely different RTCPeerConnections, and you can't reuse candidates between them, as each candidate contains port numbers allocated specifically for the media and the target it is to be sent to.
If you know how to set up one connection, you know how to set up two. Just keep things separate.
本文标签: javascriptWebRTC with 3 users connectionStack Overflow
版权声明:本文标题:javascript - WebRTC with 3 users connection - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1743854601a2550627.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论