JavaScript — несколько вопросов о IceCandidate и SDP Webrtc
Предположим, есть 3 пользователя A, B, C. И я использую Ajax, а не websockets для отправки и получения сообщений.
Вопрос удар:
1, в этом случае мне просто нужно, чтобы (B и C) мог видеть A, и не нужно, чтобы A мог видеть (B и C). Я добавил sdp (предложение) к B. Так нужно ли A добавлять sdp (ответ) B?
2, я обнаружил, что при A createOffer () генерируется так много (около 17) icecandidate. и я не знаю, как справиться с этим ледяным кандидатом. должен ли B (и C) добавить все эти ледяные кандидаты один за другим 17 раз?
3, как я уже сказал 3 пользователей. Это приложение один ко многим. Как это реализовать? Мой главный вопрос — как использовать sdp и icecandidate для каждого. Нужно ли добавлять sdp и icecandidate для других.
вот такой удар ледяным кандидатам
{"candidate":"candidate:1754064501 1 udp 2122255103 2001::5ef5:79fd:8c8:c74e:f166:22f 52522 typ host generation 0","sdpMid":"audio","sdpMLineIndex":0}
{"candidate":"candidate:1026183099 1 udp 2122194687 192.168.2.100 52523 typ host generation 0","sdpMid":"audio","sdpMLineIndex":0}
{"candidate":"candidate:1754064501 2 udp 2122255102 2001::5ef5:79fd:8c8:c74e:f166:22f 52524 typ host generation 0","sdpMid":"audio","sdpMLineIndex":0}
{"candidate":"candidate:1026183099 2 udp 2122194686 192.168.2.100 52525 typ host generation 0","sdpMid":"audio","sdpMLineIndex":0}
{"candidate":"candidate:1754064501 1 udp 2122255103 2001::5ef5:79fd:8c8:c74e:f166:22f 52526 typ host generation 0","sdpMid":"video","sdpMLineIndex":1}
{"candidate":"candidate:1026183099 1 udp 2122194687 192.168.2.100 52527 typ host generation 0","sdpMid":"video","sdpMLineIndex":1}
{"candidate":"candidate:1754064501 2 udp 2122255102 2001::5ef5:79fd:8c8:c74e:f166:22f 52528 typ host generation 0","sdpMid":"video","sdpMLineIndex":1}
{"candidate":"candidate:1026183099 2 udp 2122194686 192.168.2.100 52529 typ host generation 0","sdpMid":"video","sdpMLineIndex":1}
{"candidate":"candidate:638524037 1 tcp 1518275327 2001::5ef5:79fd:8c8:c74e:f166:22f 0 typ host tcptype active generation 0","sdpMid":"audio","sdpMLineIndex":0}
{"candidate":"candidate:1940501323 1 tcp 1518214911 192.168.2.100 0 typ host tcptype active generation 0","sdpMid":"audio","sdpMLineIndex":0}
{"candidate":"candidate:638524037 2 tcp 1518275326 2001::5ef5:79fd:8c8:c74e:f166:22f 0 typ host tcptype active generation 0","sdpMid":"audio","sdpMLineIndex":0}
{"candidate":"candidate:1940501323 2 tcp 1518214910 192.168.2.100 0 typ host tcptype active generation 0","sdpMid":"audio","sdpMLineIndex":0}
{"candidate":"candidate:638524037 1 tcp 1518275327 2001::5ef5:79fd:8c8:c74e:f166:22f 0 typ host tcptype active generation 0","sdpMid":"video","sdpMLineIndex":1}
{"candidate":"candidate:1940501323 1 tcp 1518214911 192.168.2.100 0 typ host tcptype active generation 0","sdpMid":"video","sdpMLineIndex":1}
{"candidate":"candidate:638524037 2 tcp 1518275326 2001::5ef5:79fd:8c8:c74e:f166:22f 0 typ host tcptype active generation 0","sdpMid":"video","sdpMLineIndex":1}
{"candidate":"candidate:1940501323 2 tcp 1518214910 192.168.2.100 0 typ host tcptype active generation 0","sdpMid":"video","sdpMLineIndex":1}
null
и вот код моего приложения: вы обнаружите, что я использую временную кнопку, которая вызывает «Получить ответ», чтобы позволить А получить sdp и icecandidate (закомментированный) из B или C
var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
//use Google's stun server
var iceServer = {
"iceServers": [{
"url": "stun:stun.l.google.com:19302"}]
};
var PeerConnection = (window.PeerConnection ||
window.webkitPeerConnection00 ||
window.webkitRTCPeerConnection ||
window.mozRTCPeerConnection);
var pc = new PeerConnection(iceServer);
var iceTimes = 1;
function getAnswer(cid)
{
teacherLoop(cid);
/*for(i=1;i<4;i++)
{
$.ajax({
url:'/get_webrtc_info.php',
type:'POST',
async:false,
data:{role:'get_answer_ice',times:i,"cid": cid},
success:function(msg)
{
var msg = JSON.parse(msg);
pc.addIceCandidate(new RTCIceCandidate(msg));
}
});
}*/
}
//start live
function startLive(cid)
{
pc.onicecandidate = function(event){
$.ajax({
url:"/webrtc.php",
type:'POST',
async:false,
data:{
"event": "__ice_candidate",
"times": iceTimes,
"cid": cid,
"data": {
"candidate": JSON.stringify(event.candidate)
}
},
});
iceTimes++;
};
$(".course-item-play-block").slideDown();
getUserMedia.call(navigator, {
"audio": true,
"video": true
}, function(stream){
var myselfVideoElement = document.getElementById('video');
myselfVideoElement.src = URL.createObjectURL(stream);
pc.addStream(stream);
pc.createOffer(function(desc){
pc.setLocalDescription(desc);
$.ajax({
url:'/webrtc.php',
type:'POST',
async:false,
data:{
"event": "__offer",
"cid": cid,
"data": {
"sdp": JSON.stringify(desc)
}
},
success:function()
{
//var timer = setInterval(teacherLoop,4000);
}
});
});
}, function(error){
//
});
}
function joinLive(cid)
{
$(".course-item-play-block").slideDown();
pc.onaddstream = function(event)
{
var remote_video = document.getElementById('video');
remote_video.src = URL.createObjectURL(event.stream);
}
pc.onicecandidate = function(event){
$.ajax({
url:"/webrtc.php",
type:'POST',
async:false,
data:{
"event": "__ice_candidate_answer",
"times": answerIceTimes,
"cid": cid,
"data": {
"candidate": JSON.stringify(event.candidate)
}
},
});
answerIceTimes++;
};
studentLoop(cid)
getIce(cid)
}
function getIce(cid)
{
for(i=1;i<17;i++)
{
$.ajax({
url:'/get_webrtc_info.php',
type:'POST',
async:false,
data:{role:'get_ice',times:i,"cid": cid},
success:function(msg)
{
var msg = JSON.parse(msg);
pc.addIceCandidate(new RTCIceCandidate(msg));
}
});
}
}
function teacherLoop(cid)
{
$.ajax({
url:'/get_webrtc_info.php',
type:'POST',
data:{role:'teacher',"cid": cid},
success:function(msg)
{
var msg = JSON.parse(msg);
pc.setRemoteDescription(new RTCSessionDescription(msg));
}
});
}
function studentLoop(cid)
{
$.ajax({
url:'/get_webrtc_info.php',
type:'POST',
async:false,
data:{role:'student',"cid": cid},
success:function(msg)
{
var msg = JSON.parse(msg);
pc.setRemoteDescription(new RTCSessionDescription(msg));
pc.createAnswer(function(answer) {
pc.setLocalDescription(new RTCSessionDescription(answer), function() {
$.ajax({
url:'/webrtc.php',
type:'POST',
async:false,
data:{
"event": "__answer",
"cid": cid,
"data": {
"sdp": JSON.stringify(answer)
}
},
success:function()
{
//var timer = setInterval(student,4000);
//studentLoop()
}
});
});
});
});
}
<div class="block course-item-play-block">
<h3>Living：</h3>
<video id="video" autoplay></video>
</div>
<?php if ($isTeacher) {?>
<div class="btn edit-course-btn common-btn common-btn-6x18 common-btn-blue" onclick="startLive(<?=$Data['cid']?>)">Start Live</div>
<div class="btn edit-course-btn common-btn common-btn-6x18 common-btn-blue" onclick="getAnswer(<?=$Data['cid']?>)">Get Answer</div>
<?php }else{?>
<div class="btn edit-course-btn common-btn common-btn-6x18 common-btn-blue" onclick="joinLive(<?=$Data['cid']?>)">Join Live</div>
<?php }?>
Решение
Я не работал над php, но что касается WebRTC:
- Не имеет значения, используете ли вы веб-сокеты или Ajax для передачи данных между узлами.
- Даже если B является просто потребителем, а A является поставщиком, B все равно необходимо предоставить
sdp-answerна самом деле, не имеет значения, кто звонит и кто отвечает, провайдер должен добавить свой MediaStream перед тем, как сделать предложение / ответ sdp. - Кандидаты ICE похожи на физические адреса, они помогают коллегам найти друг друга, A не единственный, кто их создает, B (и C) тоже создает их. Вам нужно передать их в соответствующие
PeerConnectionобъект с обеих сторон. без их обмена невозможно начать звонок. - Хотя это один ко многим, для каждого нового потребителя (B, C, …) поставщик (A) должен создать отдельное
PeerConnection, Вы также можете проверить Муаз Хан борадкастинг один-ко-многим. Если вы хотите защитить пропускную способность провайдера, вам нужно посмотреть на MCU, Вот пример трансляции один-ко-многим из Куренто.
Другие решения
Других решений пока нет …