简单的WebRTC示例！但为什么它不工作，我做错了什么？

问题描述：

我发现这表明的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

答

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。

为什么downvote？我完全回答了这个问题。您正尝试使用基于节点服务器的多个开源项目，并将它们与完全不同的Web服务器一起使用。 – xdumaine

我运行了“npm install ws”并得到了这样的错误http://i.stack.imgur.com/r38IO.png。你能告诉我为什么吗？如何解决它？ – Tum

答

这是终极简单的代码可以做的工作。无需安装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>

SimpleWebRTC是一个不同的库，但具有相同的要求 - 它使用小型节点服务器进行信号传输。您可以使用默认配置的沙箱服务器进行开发，但是当部署应用程序时，您需要运行自己的信号服务器。 – xdumaine

@xdumaine，你是什么意思？我不安装任何节点服务器。我只运行我的tomcat服务器，然后打开localhost/index.html，它工作正常。我不知道什么是节点服务器。只需将html文件放在我的Tomcat服务器中，然后我就可以使用WebRTC。为什么我需要信令服务器？ – Tum

当您在不提供自己的节点信令服务器的情况下使用SimpleWebRTC时，您正在使用他们的沙箱服务器进行开发。请参阅[在simplewebrtc.com上]（https://simplewebrtc.com/）关于信令服务器的注释。你的index.html页面打开一个websocket到'wss：// signaling.simplewebrtc.com/socket.io /'这是一个节点信令服务器。 – xdumaine

简单的WebRTC示例！但为什么它不工作，我做错了什么？

相关推荐