WebRTC RTCMultiConnection 使用 Socket IO

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 算法一样，流在客户端上中继，但算法经过修改以形成洪流链。实现的算法是here(git repo) -- and the algorithm is as shown in figure

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