JavaScript — simpleWebRTC с PHP-бэкендом

Я использую simpleWebRTC с xhr для реализации своеобразного многопользовательского видеочата (без звука)
короче моя главная проблема: я не смог прикрепить имя пользователя из php к правильному видео в JS

в моей очереди я буду
1. объяснить, что я сделал — и каковы мои текущие проблемы
2. если мой текущий маршрут невозможен — тогда я прошу предложения для другого курса действий с моей стороны 🙂 — мои знания в JS и PHP |

Многопользовательское видео позволяет выбрать нескольких пользователей и просматривать их в одном направлении.
Допустим, у нас есть пользователи A, B, C, D
пользователь A выбирает пользователей B, C, D, а пользователь B, например, выбирает только пользователей C и D …. и т. д.

в simpleWebRTC я подумал о двух направлениях действий
а. одна комната для всех участников, а затем отфильтровать их (не удалось, поскольку я не смог назначить правильное имя пользователя для каждого видео — отфильтровать их)
2. Вместо этого я создал комнату (с именем пользователя — электронная почта, как идентификатор) и позволил каждому пользователю подключаться к соответствующей комнате.

в первой части кода у меня есть XHR, который тянет список людей, на которых пользователь хочет подписаться на видео (то есть: хочет видеть)

var remoteRoom = [];


$.get('scripts/video/ours/musesSimpleList.php', function(msg){

myRoom = msg.username;

var remoteRoomArray = $.each( msg.museUsername, function(key, value){
remoteRoom.push = value;


return remoteRoom;
});

afterRoomDefined(myRoom, remoteRoomArray);
}, 'json');

Функция afterRoomDefined (myRoom, remoteRoomArray) вызывается после получения из MySQl списка людей, для которых этот конкретный пользователь решил зарегистрироваться, был получен

в этой функции я сейчас пытаюсь реализовать WebRTC:

function afterRoomDefined(myRoom, remoteRoom){


console.log('remote room name: '+ remoteRoom + ' type: '+ $.type(remoteRoom));


remoteRoom = JSON.stringify(remoteRoom);
console.log('isArray '+$.isArray(remoteRoom));

//Create our WebRTC connection
var webrtc = new SimpleWebRTC({
url:'https://signaling.simplewebrtc.com:443',
//the element that will hold the local video
localVideoEl: 'localVideo',
//the element that will hold remote videos
//remoteVideosEl: 'remotes',
remoteVideosEl: '',
autoRequestMedia: true,
media: {
video: true,
audio: false
},

});


webrtc.mute();

// a peer video has been added

var i = 0;

//When it's ready and we have a room from the URL, join the call
webrtc.on('readyToCall', function(peer){

//each user first creates a room for himself - so other users could connect to
if(myRoom) webrtc.joinRoom(myRoom);

//here a room is created for every person the user subscribed to. each person created a room with his own username (when he opened this page in his browser) - in the line above. so now i open rooms with the same names - so the users will see each other (two ways now)
for(var b=0; b<remoteRoom.museUsername.length; b++){
console.log('remoteRoom loop - separate values: '+ remoteRoom.museUsername[b]);
if(remoteRoom.museUsername[b]) webrtc.joinRoom(remoteRoom.museUsername[b]);
}
});


// a peer video has been added
webrtc.on('videoAdded', function (video, peer) {

var remotes = document.getElementById('remotes');
if (remotes) {
var container = document.createElement('div');
container.className = 'videoContainer'+i;

$(container).attr('data-username', remoteRoom.museUsername[i]);
i++;


container.id = 'container_' + webrtc.getDomId(peer);
container.appendChild(video);

// suppress contextmenu
video.oncontextmenu = function () { return false; };

remotes.appendChild(container);

//this is to remove the other party video - if a user only subscribed to another user - the other user is not
//$('#remotes div:not[data-username]').css('border', 'red 5px solid');
$('#remotes div:not[data-username]').remove();
}
i=i+1;
});

webrtc.on('videoRemoved', function (video, peer) {

var remotes = document.getElementById('remotes');
var el = document.getElementById(peer ? 'container_' + webrtc.getDomId(peer) : 'localScreenContainer');

$('#remotes div').css('border', '#F4171A 2px solid');
if (remotes && el) {
remotes.removeChild(el);
}
});

Вот и все. и это в основном работает.
Есть три проблемы, хотя:
а. когда один из пользователей обновляет свою страницу (обычно переходят вперед-назад), его собственное видео снова добавляется (два видео того же пользователя сейчас — одно из них заморожено) всем остальным пользователям, которые его смотрят. возможно, это проблема с

webrtc.on('videoRemoved'...

б. когда пользователь A, например, регистрируется на пользователя B … — если пользователь C, чем подписывается на пользователя A — он будет видеть также пользователя B
главная проблема, возможно, заключается в следующем:
с. я так и не смог прикрепить имя пользователя к нужному видео под:

 webrtc.on('videoAdded',....
$(container).attr('data-username', remoteRoom.museUsername[i]);...

в коде основного блока.
я использовал

 $('#remotes div:not[data-username]').remove();

найти все видео без имени пользователя и удара (видео, которые были продублированы и заморожены + другая сторона видео, если пользователь А подписан на пользователя B, а не наоборот, поэтому пользователь B не увидит пользователя A и, таким образом, C не увидит в вышеприведенное объяснение) их нет — но имя пользователя само по себе не привязано к правильному ребенку в правильном порядке (в тот момент, когда кто-то обновляет страницу, порядок шифруется ….

2. я иду в правильном направлении?
   Я посмотрел на pubNub, Xirsys, Firebase и некоторые другие решения
   (Google Appengine — требуется знание Java, html5Rocks, easyRTC, signalMaster (нет правильного объяснения того, как использовать) — но, похоже, что все они требуют node.js)

мой текущий способ действия (php и XHR) является действительным?
если нет — одно из других решений будет относительно простым и правдоподобным.
Я начал просматривать слишком много API, и теперь я в замешательстве

благодарю вас 🙂