简单的WebRTC示例！但是为什么它不起作用&我做错了什么？_Webrtc

简单的WebRTC示例！但是为什么它不起作用&我做错了什么？

webrtc

简单的WebRTC示例！但是为什么它不起作用&我做错了什么？,webrtc,Webrtc,我在互联网上找到了这个链接，它演示了WebRTC的工作原理它的源代码在这里现在，我试着按照这个例子来做： 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文件夹。因此路径

我在互联网上找到了这个链接，它演示了WebRTC的工作原理

它的源代码在这里

现在，我试着按照这个例子来做：

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

我开始养我的雄猫

7-我在我的电脑中打开&网页上显示了我电脑的网络摄像头1。没问题

8-我在另一台电脑上打开，网页上还显示了另一台电脑的网络摄像头2。但我看不到我电脑上的网络摄像头1。当我在电脑上说话时，坐在另一台电脑上的人听不到我在说什么，反之亦然

那么，为什么它不起作用我做错了什么

以下是3个文件的代码：

index.html

server.js

server.js打算作为websocket信令的节点服务器运行。使用node server.js运行它。你根本不需要Tomcat

从项目自述：

信令服务器使用Node.js和ws，可以这样启动：

在客户端运行时，在最新版本的Firefox或Chrome中打开client/index.html

只需一个文件URL即可打开index.html

这是完成这项工作的最简单的代码。无需安装Node.js。为什么需要安装Node.js

然后将代码放入index.html文件并启动webhost，然后就完成了

     <!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>

我将HTTPS_PORT=8443更改为HTTP_PORT=8443。对所有https执行相同的操作；将其更改为http。接下来，只有const serverConfig={}；作为const httpServer=http.createServerHandlerRequest中的serverConfig和delete serverConfig；在这些更改之后，您现在可以使用npm start运行您的服务器。

Tomcat用于java，而不是javascript。SimpleWebRTC是一个不同的库，但具有相同的要求—它使用一个小型节点服务器发送信号。您可以使用默认配置的沙盒服务器进行开发，但在部署应用程序时，您需要运行自己的信号服务器。@xdumaine，这是什么意思？我没有安装任何节点服务器。我只是运行我的tomcat服务器，然后打开localhost/index.html，它就可以正常工作了。我不知道什么是节点服务器。只要把html文件放在我的Tomcat服务器上，我就可以使用WebRTC了。为什么我需要信令服务器？当您使用SimpleWebRTC而不提供自己的节点信令服务器时，您正在使用他们的沙箱服务器进行开发。请参阅有关信令服务器的说明。您的index.html页面正在打开一个websocket以wss://signaling.simplewebrtc.com/socket.io/ 这是一个节点信令服务器。我刚刚安装了node.js。然后我打开node.js，然后键入>node server.js-？SyyntaxError:意外的标识符。然后我运行>npm安装ws->然后我得到一个错误，npm应该在正常shell中的节点repl之外运行。怎么了？我不明白。我想将Webrtc整合到我的Java webapp中。所以，我必须同时运行两台服务器。Java web的Tomcat服务器和webrtc的节点服务器？为什么把事情弄得这么复杂？为什么要投否决票？我准确地回答了这个问题。您正在尝试使用多个基于节点服务器的开源项目，并将它们用于完全不同的web服务器。你能告诉我为什么吗？如何修复它？

    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);
}

 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);
    });
});

$ npm install ws
$ node server/server.js

     <!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>