使用套接字IO的WebRTC RTCMultiConnection

Question

我用socket io开始了WebRTC的研发。我关注了这个tutorial。已从GitHub下载此project，并按照以下步骤安装socket io install socket io

现在，在运行index.html之后，单击打开或加入广播按钮，按钮被禁用，但什么也没有发生，控制台中也没有错误

​

​

index.html代码：

<input type="text" id="broadcast-id" placeholder="broadcast-id" value="room-xyz">
<select id="broadcast-options">
    <option>Audio+Video</option>
    <option title="Works only in Firefox.">Audio+Screen</option>
    <option>Audio</option>
    <option>Video</option>
    <option title="Screen capturing requries HTTPs. Please run this demo on HTTPs to make sure it can capture your screens.">Screen</option>
</select>
<button id="open-or-join">Open or Join Broadcast</button>
<hr>
<div id="videos-container"></div>

<script src="http://10.0.0.***:3000/socket.io/socket.io.js"></script>
<script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>
<script>
    var socket = io.connect('http://10.0.0.***');

    // using single socket for RTCMultiConnection signaling
    var onMessageCallbacks = {};
    socket.on('message', function(data) {
        if (data.sender == connection.userid) return;
            if (onMessageCallbacks[data.channel]) {
                onMessageCallbacks[data.channel](data.message);
            };
        });

    // initializing RTCMultiConnection constructor.
    function initRTCMultiConnection(userid) {
        var connection = new RTCMultiConnection();
        connection.body = document.getElementById('videos-container');
        connection.channel = connection.sessionid = connection.userid = userid || connection.userid;
        connection.sdpConstraints.mandatory = {
            OfferToReceiveAudio: false,
            OfferToReceiveVideo: true
        };
        // using socket.io for signaling
        connection.openSignalingChannel = function(config) {
            var channel = config.channel || this.channel;
            onMessageCallbacks[channel] = config.onmessage;
            if (config.onopen) setTimeout(config.onopen, 1000);
            return {
                send: function(message) {
                    socket.emit('message', {
                        sender: connection.userid,
                        channel: channel,
                        message: message
                    });
                },
                channel: channel
           };
      };
      connection.onMediaError = function(error) {
          alert(JSON.stringify(error));
      };
      return connection;
 }

 // this RTCMultiConnection object is used to connect with existing users
 var connection = initRTCMultiConnection();

 connection.getExternalIceServers = false;

 connection.onstream = function(event) {
     connection.body.appendChild(event.mediaElement);

     if (connection.isInitiator == false && !connection.broadcastingConnection) {
          // "connection.broadcastingConnection" global-level object is used
          // instead of using a closure object, i.e. "privateConnection"
          // because sometimes out of browser-specific bugs, browser 
          // can emit "onaddstream" event even if remote user didn't attach any stream.
          // such bugs happen often in chrome.
          // "connection.broadcastingConnection" prevents multiple initializations.

          // if current user is broadcast viewer
          // he should create a separate RTCMultiConnection object as well.
          // because node.js server can allot him other viewers for
          // remote-stream-broadcasting.
          connection.broadcastingConnection = initRTCMultiConnection(connection.userid);

          // to fix unexpected chrome/firefox bugs out of sendrecv/sendonly/etc. issues.
          connection.broadcastingConnection.onstream = function() {};

          connection.broadcastingConnection.session = connection.session;
          connection.broadcastingConnection.attachStreams.push(event.stream); // broadcast remote stream
          connection.broadcastingConnection.dontCaptureUserMedia = true;

          // forwarder should always use this!
          connection.broadcastingConnection.sdpConstraints.mandatory = {
               OfferToReceiveVideo: false,
               OfferToReceiveAudio: false
          };

          connection.broadcastingConnection.open({
               dontTransmit: true
          });
      }
 };

 // ask node.js server to look for a broadcast
 // if broadcast is available, simply join it. i.e. "join-broadcaster" event should be emitted.    
 // if broadcast is absent, simply create it. i.e. "start-broadcasting" event should be fired.
 document.getElementById('open-or-join').onclick = function() {
       var broadcastid = document.getElementById('broadcast-id').value;
       if (broadcastid.replace(/^\s+|\s+$/g, '').length <= 0) {
            alert('Please enter broadcast-id');
            document.getElementById('broadcast-id').focus();
            return;
       }

       this.disabled = true;

       connection.session = {
            video: document.getElementById('broadcast-options').value.indexOf('Video') !== -1,
            screen: document.getElementById('broadcast-options').value.indexOf('Screen') !== -1,
            audio: document.getElementById('broadcast-options').value.indexOf('Audio') !== -1,
            oneway: true
      };

      socket.emit('join-broadcast', {
          broadcastid: broadcastid,
          userid: connection.userid,
          typeOfStreams: connection.session
      });
};

// this event is emitted when a broadcast is already created.
socket.on('join-broadcaster', function(broadcaster, typeOfStreams) {
    connection.session = typeOfStreams;
    connection.channel = connection.sessionid = broadcaster.userid;

    connection.sdpConstraints.mandatory = {
        OfferToReceiveVideo: !!connection.session.video,
        OfferToReceiveAudio: !!connection.session.audio
    };

    connection.join({
        sessionid: broadcaster.userid,
        userid: broadcaster.userid,
        extra: {},
        session: connection.session
    });
});

// this event is emitted when a broadcast is absent.
socket.on('start-broadcasting', function(typeOfStreams) {
     // host i.e. sender should always use this!
     connection.sdpConstraints.mandatory = {
          OfferToReceiveVideo: false,
          OfferToReceiveAudio: false
     };
     connection.session = typeOfStreams;
     connection.open({
         dontTransmit: true
     });

     if (connection.broadcastingConnection) {
         // if new person is given the initiation/host/moderation control
         connection.broadcastingConnection.close();
         connection.broadcastingConnection = null;
     }
});

window.onbeforeunload = function() {
     // Firefox is weird!
     document.getElementById('open-or-join').disabled = false;
};
</script>

我是个新手，有什么问题吗？

Answer 1

不久前，我自己也陷入了同样的境地。我想实现一些类似于Muaz在他的git repo中所做的算法，但在许多地方，我发现Muaz的这个repo现在没有维护，已经过时了，我必须从头开始。因此，我只是遵循了Shane Tully的webRTC示例，并开始在其上编写我的算法。在muaz的算法中，流是通过客户端中继的，但算法被修改为形成torrent链。实现的算法是here(git repo) -- and the algorithm is as shown in figure

过滤高带宽和低带宽客户端，以便只有高带宽客户端充当流转发器。它在局域网和互联网上工作得很好，有相当多的改进空间。