我开始使用 socket io 在 WebRTC 上进行研发。我跟着这个教程。从 GitHub下载了这个项目，按照以下步骤安装了 socket io 安装 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>
我是新手，这可能是什么问题？
