2015-08-08 149 views
-2

我發現這表明的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.jsvoicechat\client

4-我把server.jsvoicechat\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); 
    }); 
}); 
+0

Tomcat是針對java的,而不是javascript。 – jib

回答

0

server.js旨在被運行作爲WebSocket的信令的節點服務器。運行它與node server.js。你根本不需要Tomcat。

從項目自述:

The signaling server uses Node.js and ws and can be started as such:

$ npm install ws 
$ node server/server.js 

With the client running, open client/index.html in a recent version of either Firefox or Chrome.

您可以打開index.html只是一個文件的URL。

+0

爲什麼downvote?我完全回答了這個問題。您正嘗試使用基於節點服務器的多個開源項目,並將它們與完全不同的Web服務器一起使用。 – xdumaine

+0

我運行了「npm install ws」並得到了這樣的錯誤http://i.stack.imgur.com/r38IO.png。你能告訴我爲什麼嗎?如何解決它? – Tum

-1

這是終極簡單的代碼可以做的工作。無需安裝Node.js.爲什麼需要安裝Node.js

將該代碼放入index.html文件並啓動您的虛擬主機,然後完成!

 <!DOCTYPE html> 
<html> 
<head> 
<script src="//simplewebrtc.com/latest.js"></script> 
</head> 

<body> 

<div id="localVideo" muted></div> 
<div id="remoteVideo"></div> 


<script> 
var webrtc = new SimpleWebRTC({ 
    localVideoEl: 'localVideo', 
    remoteVideosEl: 'remoteVideo', 
    autoRequestMedia: true 
}); 

webrtc.on('readyToCall', function() { 
    webrtc.joinRoom('My room name'); 
}); 
</script> 

</body> 

</html> 
+0

SimpleWebRTC是一個不同的庫,但具有相同的要求 - 它使用小型節點服務器進行信號傳輸。您可以使用默認配置的沙箱服務器進行開發,但是當部署應用程序時,您需要運行自己的信號服務器。 – xdumaine

+0

@xdumaine,你是什麼意思?我不安裝任何節點服務器。我只運行我的tomcat服務器,然後打開localhost/index.html,它工作正常。我不知道什麼是節點服務器。只需將html文件放在我的Tomcat服務器中,然後我就可以使用WebRTC。爲什麼我需要信令服務器? – Tum

+0

當您在不提供自己的節點信令服務器的情況下使用SimpleWebRTC時,您正在使用他們的沙箱服務器進行開發。請參閱[在simplewebrtc.com上](https://simplewebrtc.com/)關於信令服務器的註釋。你的index.html頁面打開一個websocket到'wss:// signaling.simplewebrtc.com/socket.io /'這是一個節點信令服務器。 – xdumaine

相關問題