带有php后端的simpleWebRTC

Question

我使用simpleWebRTC和xhr来实现特殊的多用户视频聊天(没有音频)--简而言之，我的主要问题是:我无法将来自php的用户名附加到JS中正确的视频中。

在我的遗书中，我将1.解释我做了什么--以及我目前的问题是什么。2.如果我目前的路线是不可能的--那么我要求对我的另一种行动方案提出建议:-) --我的知识是JS和PHP

多用户视频允许选择几个用户，并以一种方式看到他们。假设我们有用户A、B、C、D，用户A选择看到用户B、C、D，而用户B只选择看到用户C和D。诸若此类

在simpleWebRTC中，我想到了两个操作过程a。一个房间供所有参与者使用，然后将它们过滤掉(因为我无法将正确的用户名附加到每个视频中--过滤掉)。相反，我创建了一个房间(带有用户名-电子邮件，如id)，并让每个用户连接到适当的房间。

在代码的第一部分中，我有一个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);
}
});

就这样。这基本上是可行的。但是有三个问题: a.当一个用户刷新他的页面(通常是向后浏览第四个)时，他自己的视频又被添加到所有其他观看他的用户中(其中一个被冻结)。也许这是个问题

webrtc.on('videoRemoved'...

b.例如当用户A向用户B注册时.-如果用户C比订阅用户A-他也会看到用户B，主要问题可能是: c.我从来没有真正能够将用户名附加到正确的视频中：

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

在主块代码中。我用过

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

查找所有没有用户名和踢的视频(如果用户A订阅了用户B，而不是相反，用户B将不会看到用户A，从而C不会在上面的解释中看到)，则查找所有没有用户名的视频(如果用户A订阅了用户B，则将视频的另一面froze+the )删除--但是用户名本身并没有按正确的顺序附加到正确的子节点(当某人刷新页面的时候，命令就会混乱.)

1. 我走的方向对吗？我看了一下pubNub、xirsys、firebase和其他一些解决方案(google应用程序-所需的java知识、html5Rocks、easyRTC、signalMaster (没有正确解释如何使用)--但它们似乎都需要node.js )。

我当前的操作模式(php和XHR)是否有效？如果不是，另一种解决方案将相对简单和可行吗？我开始查看太多的api，现在我很困惑

谢谢:-)

Answer 1

很难准确地看出出了什么问题，因为这里似乎面临多个问题，包括一般的webRTC和DOM插入/删除问题。

如果您正在寻找使用webRTC的PubNub解决方案，则应该查看以下内容：

https://github.com/stephenlb/webrtc-sdk

以及您可以尝试的演示：http://stephenlb.github.io/webrtc-sdk/

另外，请查收

http://www.pubnub.com/blog/building-a-webrtc-video-and-voice-chat-application/