使用WebRTC.io和NodeJS抵达时连接到房间

时间:2013-08-01 09:40:13

标签: node.js socket.io webrtc

我实际上正在开发基于NodeJS,ws,WebRTC.io和socket.io的应用程序。此应用程序的目的是将主持人的视频广播给多个与会者。

主持人和所有与会者加载Web应用程序,然后主持人启动他的视频并将其流式传输给所有与会者。对于这种情况,我没有任何问题,但如果主持人发布他的视频,然后一位与会者加入会议室,这位与会者无法检索该流,我不知道如何获取此流。

我尝试了很多解决方案。

第一解决方案

当与会者到达会议室时,他会通过socket.io向主持人发送一条消息,发送回他的流。问题是流作为Object而不是MediaStream到达与会者,因此我无法使用它。

第二种解决方案

当与会者到达会议室时,他会通过socket.io向主机发送一条消息,发送回用window.webkitURL.createObjectURL(rtc.streams[0])创建的blob,然后我使用此blob作为与会者的视频源,但是我获得404错误。

以下是两种解决方案的代码:

var isStreamCreated = false;

function startVideoLive() {
    var video = document.getElementById('video');
    //Test if peer connection is available for the browser
    if (PeerConnection) {
        if (getRole() == 1) {
            rtc.createStream({
                "video": true,
                "audio": true
            }, function (stream) {
                video.src = URL.createObjectURL(stream);
                video.play();
                isStreamCreated = true
            });

        }
    }
    if (isConnected != true) {
        var room = '1234';
        rtc.connect('ws://' + server + ':8443', room);
        isConnected = true;
    }
}

function setAttendeeWebRTC() {
    if (getRole() == 0) {
        var message = {
            type: "getStreamInfos",
            URL: null,
            stream: null
        }

        socket.emit('message', message);

        rtc.on('add remote stream', function (stream, socketId) {
            rtc.attachStream(stream, 'video');
            isStreamCreated = true;
        });
    }
}

startVideoLive();
setAttendeeWebRTC();

function onGetStreamInfos(message) {
    if (getRole() == 1 && isStreamCreated == true) {

        message.URL = window.webkitURL.createObjectURL(rtc.streams[0]);
        message.stream = rtc.streams[0];

        socket.emit('message', message);
    } else if (getRole() == 0 && isStreamCreated == false && message.URL != null && message.stream != null) {

        document.getElementById('video').src = message.URL;
        // OR
        rtc.attachStream(message.stream, 'video')
        isStreamCreated = true;

    }
}

getRole()用于了解连接的用户是与会者(0)还是主持人(1)。

在服务器端,我只是广播websocket消息,并添加webrtc.io(以及许多其他内容,但在这种情况下无用)。

以下是2个案例的错误:

  • 使用blob:GET blob:http%3A // 128.1.222.159%3A8081 / 881928b6-70d3-4054-b15e-88d635a2125f 404(未找到)

  • 使用stream:Uncaught TypeError:输入错误
    rtc.attachStream
    onGetStreamInfos
    (匿名函数)
    EventEmitter.emit socket.io.js? = 1375350434038:633
    SocketNamespace.onPacket socket.io.js?
    = 1375350434038:2248
    Socket.onPacket socket.io.js? = 1375350434038:1930
    Transport.onPacket socket.io.js?
    = 1375350434038:1332
    Transport.onData socket.io.js?_ = 1375350434038:1303
    WS.open.websocket.onmessage

如果有人对如何处理我的问题有任何想法,我会提前感谢。

编辑1:

我找到了如何解决我的问题,但是有一个新问题。这是我的部分解决方案:

function onGetStreamInfos(message) {
    if (getRole() == 1 && isStreamCreated == true) {

        rtc.createPeerConnections();
        rtc.addStreams();
        rtc.addDataChannels();
        rtc.sendOffers()

    } else if (getRole() == 0 && isStreamCreated == false) {

        isStreamCreated = true;

    }
}

但是现在,当与会者加入会议室时,其他与会者丢失了视频。我认为这是因为通常我不应该在新参与者和旧参与者之间建立对等连接。

我不确定它是否非常清楚,但如果您需要更多信息,请不要犹豫,如果我终于找到了解决问题的方法,我会在这里给出解决方案。

编辑2:

通过删除rtc.createPeerConnections();rtc.addDataChannels();,它似乎适用于大多数情况(我没有测试过这么多案例)。

3 个答案:

答案 0 :(得分:1)

如果我正确理解您的问题,看起来您正在尝试通过Socket.io消息传递交换视频数据,而这需要通过RTCPeerConnection完成。

无耻的自我推销,但你可能想看看我写的WebRTC codelab,它使用Socket.io进行信号传递。

对于少数与会者,您可以使用多个RTCPeerConnections。 (请查看TalkyTawkFACEmeetingBrowser Meeting等应用。)

对于更多与会者,您需要使用MCU(有可用的开源实现),或者使用自己的服务器端WebRTC应用程序。今年的Google I / O演示文稿中有关于WebRTC体系结构的更多信息:videoslides

答案 1 :(得分:0)

你为什么要做rtc.addDataChannels();创建数据通道用于传输数据(不是媒体),对于需要使用RTCPeerConnection的媒体,通过信令通道发送sdp和ice候选对等。如果一切顺利,您将拥有媒体流。

数据通道在发送媒体流方面没有任何作用,而是用于对等数据(游戏,文件等)。

答案 2 :(得分:0)

如果您不想轻松设置自己的信令服务器,可以使用Pubnub或Pusher为您处理。它们是实时数据平台,但也可以用于webRTC信令。

如果您有兴趣尝试,请使用Pusher webRTC signaling tutorial

http://pusher.com/tutorials/webrtc_chat

免责声明:我在Pusher工作。