0
我正試圖實現這個video conferencing HTML5應用程序。我不確定到底發生了什麼，但我遵循指示，也許我錯過了某些東西...HTML5中的視頻會議：通過Socket.io的WebRTC
我複製了HTML文件（index.html），並將套接字IP更改爲正確的我的服務器：
<!DOCTYPE html>
<html>
<head>
<title>WebRTC Demo</title>
</head>
<body>
<h1>WebRTC Demo using Socket.IO</h1>
<video id="webrtc-sourcevid" autoplay style="width: 320px; height: 240px; border: 1px solid black;"></video>
<button type="button" onclick="startVideo();">Start video</button>
<button type="button" onclick="stopVideo();">Stop video</button>
<video id="webrtc-remotevid" autoplay style="width: 320px; height: 240px; border: 1px solid black;"></video>
<button type="button" onclick="connect();">Connect</button>
<button type="button" onclick="hangUp();">Hang Up</button>
<p>Run a node.js server and adapt the address in the code.</p>
<script src="http://cdn.socket.io/stable/socket.io.js"></script>
<script>
// create socket
var socket = io.connect('localhost:1337/');
var sourcevid = document.getElementById('webrtc-sourcevid');
var remotevid = document.getElementById('webrtc-remotevid');
var localStream = null;
var peerConn = null;
var started = false;
var channelReady = false;
var mediaConstraints = {'mandatory': {
'OfferToReceiveAudio':true,
'OfferToReceiveVideo':true }};
var isVideoMuted = false;
// get the local video up
function startVideo() {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia({video: true, audio: true}, successCallback, errorCallback);
function successCallback(stream) {
localStream = stream;
if (sourcevid.mozSrcObject) {
sourcevid.mozSrcObject = stream;
sourcevid.play();
} else {
try {
sourcevid.src = window.URL.createObjectURL(stream);
sourcevid.play();
} catch(e) {
console.log("Error setting video src: ", e);
}
}
}
function errorCallback(error) {
console.error('An error occurred: [CODE ' + error.code + ']');
return;
}
}
// stop local video
function stopVideo() {
if (sourcevid.mozSrcObject) {
sourcevid.mozSrcObject.stop();
sourcevid.src = null;
} else {
sourcevid.src = "";
localStream.stop();
}
}
// send SDP via socket connection
function setLocalAndSendMessage(sessionDescription) {
peerConn.setLocalDescription(sessionDescription);
console.log("Sending: SDP");
console.log(sessionDescription);
socket.json.send(sessionDescription);
}
function createOfferFailed() {
console.log("Create Answer failed");
}
// start the connection upon user request
function connect() {
if (!started && localStream && channelReady) {
createPeerConnection();
started = true;
peerConn.createOffer(setLocalAndSendMessage, createOfferFailed, mediaConstraints);
} else {
alert("Local stream not running yet - try again.");
}
}
// stop the connection upon user request
function hangUp() {
console.log("Hang up.");
socket.json.send({type: "bye"});
stop();
}
function stop() {
peerConn.close();
peerConn = null;
started = false;
}
// socket: channel connected
socket.on('connect', onChannelOpened)
.on('message', onMessage);
function onChannelOpened(evt) {
console.log('Channel opened.');
channelReady = true;
}
function createAnswerFailed() {
console.log("Create Answer failed");
}
// socket: accept connection request
function onMessage(evt) {
if (evt.type === 'offer') {
console.log("Received offer...")
if (!started) {
createPeerConnection();
started = true;
}
console.log('Creating remote session description...');
peerConn.setRemoteDescription(new RTCSessionDescription(evt));
console.log('Sending answer...');
peerConn.createAnswer(setLocalAndSendMessage, createAnswerFailed, mediaConstraints);
} else if (evt.type === 'answer' && started) {
console.log('Received answer...');
console.log('Setting remote session description...');
peerConn.setRemoteDescription(new RTCSessionDescription(evt));
} else if (evt.type === 'candidate' && started) {
console.log('Received ICE candidate...');
var candidate = new RTCIceCandidate({sdpMLineIndex:evt.sdpMLineIndex, sdpMid:evt.sdpMid, candidate:evt.candidate});
console.log(candidate);
peerConn.addIceCandidate(candidate);
} else if (evt.type === 'bye' && started) {
console.log("Received bye");
stop();
}
}
function createPeerConnection() {
console.log("Creating peer connection");
RTCPeerConnection = webkitRTCPeerConnection || mozRTCPeerConnection;
var pc_config = {"iceServers":[]};
try {
peerConn = new RTCPeerConnection(pc_config);
} catch (e) {
console.log("Failed to create PeerConnection, exception: " + e.message);
}
// send any ice candidates to the other peer
peerConn.onicecandidate = function (evt) {
if (event.candidate) {
console.log('Sending ICE candidate...');
console.log(evt.candidate);
socket.json.send({type: "candidate",
sdpMLineIndex: evt.candidate.sdpMLineIndex,
sdpMid: evt.candidate.sdpMid,
candidate: evt.candidate.candidate});
} else {
console.log("End of candidates.");
}
};
console.log('Adding local stream...');
peerConn.addStream(localStream);
peerConn.addEventListener("addstream", onRemoteStreamAdded, false);
peerConn.addEventListener("removestream", onRemoteStreamRemoved, false)
// when remote adds a stream, hand it on to the local video element
function onRemoteStreamAdded(event) {
console.log("Added remote stream");
remotevid.src = window.URL.createObjectURL(event.stream);
}
// when remote removes a stream, remove it from the local video element
function onRemoteStreamRemoved(event) {
console.log("Remove remote stream");
remotevid.src = "";
}
}
</script>
</body>
</html>
和JavaScript文件（server.js）服務器（使用相同的端口號同上）：
// create the http server and listen on port
var server = require('http').createServer();
var app = server.listen(1337, function() {
console.log((new Date()) + " Server is listening on port 1337");
});
// create the socket server on the port
var io = require('socket.io').listen(app);
// This callback function is called every time a socket
// tries to connect to the server
io.sockets.on('connection', function(socket) {
console.log((new Date()) + ' Connection established.');
// When a user send a SDP message
// broadcast to all users in the room
socket.on('message', function(message) {
console.log((new Date()) + ' Received Message, broadcasting: ' + message);
socket.broadcast.emit('message', message);
});
// When the user hangs up
// broadcast bye signal to all users in the room
socket.on('disconnect', function() {
// close user connection
console.log((new Date()) + " Peer disconnected.");
socket.broadcast.emit('user disconnected');
});
});
我已經安裝的node.js。接下來我安裝了express和socket.io：
npm install express
npm install socket.io
然後我用節點運行這個文件啓動服務器。
node server.js
從服務器訪問的index.html給了我這個錯誤
Uncaught TypeError: Object #<Object> has no method 'connect'
這是由線VAR造成插座在server.js = io.connect('localhost:1337/');
我已搜查這個錯誤並嘗試將socket.io文件放在服務器上，並將其鏈接爲<script src="/socket.io/socket.io.js"></script>，不會更改任何內容。
指南和代碼是從這個博客http://blog.gingertech.net/2012/06/04/video-conferencing-in-html5-webrtc-via-web-sockets/ – hugh 2013-03-12 12:30:41