我發現這表明的WebRTC是如何工作的https://shanetully.com/2014/09/a-dead-simple-webrtc-example/簡單的WebRTC示例!但爲什麼它不工作,我做錯了什麼?
它的源代碼是在這裏https://github.com/shanet/WebRTC-Example
現在在互聯網上這個環節,我想效仿的榜樣,在這裏我所做的:
1-我創建了一個文件夾名稱voicechat
2-我在voicechat
內部創建了2個文件夾。也就是說voicechat\client
& voicechat\server
3-我把index.html
& webrtc.js
到voicechat\client
4-我把server.js
到voicechat\server
5我把文件夾voicechat
到我的Tomcat webapps
文件夾。所以路徑將是這樣C:\apache-tomcat-7.0.53\webapps\ROOT\voicechat
6-我開始了我的雄貓。
7-我在我的電腦中打開http://xxx.xxx.xxx.xxx/voicechat/client/index.html &該網頁顯示我的電腦的網絡攝像頭(網絡攝像頭1)。沒問題。
8-我在另一臺PC上打開http://xxx.xxx.xxx.xxx/voicechat/client/index.html &該網頁還顯示了其他PC的網絡攝像頭(網絡攝像頭2)。但我無法看到我的電腦的網絡攝像頭1。當我在PC上聊天時,坐在其他PC上的人聽不到我在說什麼,反之亦然。
那麼,爲什麼它沒有工作我做錯了什麼?
這裏是3個文件中的代碼:
的index.html
<html>
<head>
<script src="webrtc.js"></script>
</head>
<body>
<video id="localVideo" autoplay muted style="width:40%;"></video>
<video id="remoteVideo" autoplay style="width:40%;"></video>
<br />
<input type="button" id="start" onclick="start(true)" value="Start Video"></input>
<script type="text/javascript">
pageReady();
</script>
</body>
</html>
webrtc.js
var localVideo;
var remoteVideo;
var peerConnection;
var peerConnectionConfig = {'iceServers': [{'url': 'stun:stun.services.mozilla.com'}, {'url': 'stun:stun.l.google.com:19302'}]};
navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
window.RTCIceCandidate = window.RTCIceCandidate || window.mozRTCIceCandidate || window.webkitRTCIceCandidate;
window.RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription;
function pageReady() {
localVideo = document.getElementById('localVideo');
remoteVideo = document.getElementById('remoteVideo');
serverConnection = new WebSocket('ws://127.0.0.1:3434');
serverConnection.onmessage = gotMessageFromServer;
var constraints = {
video: true,
audio: true,
};
if(navigator.getUserMedia) {
navigator.getUserMedia(constraints, getUserMediaSuccess, errorHandler);
} else {
alert('Your browser does not support getUserMedia API');
}
}
function getUserMediaSuccess(stream) {
localStream = stream;
localVideo.src = window.URL.createObjectURL(stream);
}
function start(isCaller) {
peerConnection = new RTCPeerConnection(peerConnectionConfig);
peerConnection.onicecandidate = gotIceCandidate;
peerConnection.onaddstream = gotRemoteStream;
peerConnection.addStream(localStream);
if(isCaller) {
peerConnection.createOffer(gotDescription, errorHandler);
}
}
function gotMessageFromServer(message) {
if(!peerConnection) start(false);
var signal = JSON.parse(message.data);
if(signal.sdp) {
peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp), function() {
peerConnection.createAnswer(gotDescription, errorHandler);
}, errorHandler);
} else if(signal.ice) {
peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice));
}
}
function gotIceCandidate(event) {
if(event.candidate != null) {
serverConnection.send(JSON.stringify({'ice': event.candidate}));
}
}
function gotDescription(description) {
console.log('got description');
peerConnection.setLocalDescription(description, function() {
serverConnection.send(JSON.stringify({'sdp': description}));
}, function() {console.log('set description error')});
}
function gotRemoteStream(event) {
console.log('got remote stream');
remoteVideo.src = window.URL.createObjectURL(event.stream);
}
function errorHandler(error) {
console.log(error);
}
個
server.js
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({port: 3434});
wss.broadcast = function(data) {
for(var i in this.clients) {
this.clients[i].send(data);
}
};
wss.on('connection', function(ws) {
ws.on('message', function(message) {
console.log('received: %s', message);
wss.broadcast(message);
});
});
Tomcat是針對java的,而不是javascript。 – jib