Question

我在互联网上找到了这个链接，演示了WebRTC的工作原理https://shanetully.com/2014/09/a-dead-simple-webrtc-example/

其源代码在https://github.com/shanet/WebRTC-Example

现在，我正在尝试按照这个例子，在这里我做了什么：

1-我创建了一个文件夹名称voicechat

2-我在voicechat内创建了2个文件夹。那是voicechat\client＆amp; voicechat\server

3-我把index.html＆amp; webrtc.js进入voicechat\client

4-我将server.js放入voicechat\server

5-我将文件夹voicechat放入我的Tomcat webapps文件夹。所以路径就像这个C:\apache-tomcat-7.0.53\webapps\ROOT\voicechat

6-我开始使用Tomcat。

7-我在我的电脑和电脑中打开http://xxx.xxx.xxx.xxx/voicechat/client/index.html该网页显示了我电脑的网络摄像头（网络摄像头1）。没问题。

8-我在另一台电脑中打开http://xxx.xxx.xxx.xxx/voicechat/client/index.html＆amp;该网页还显示了其他PC的网络摄像头（网络摄像头2）。但我看不到我的电脑的网络摄像头1。当我在电脑上聊天时，坐在其他电脑上的人听不到我在说什么，反之亦然。

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

以下是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);
    });
});

Answer 1

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

来自项目自述：

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

$ npm install ws
$ node server/server.js

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

您只需使用文件网址即可打开index.html。

Answer 2

我将HTTPS_PORT = 8443更改为HTTP_PORT = 8443。将其更改为http。接下来，只有const serverConfig = {};作为serverConfig并在const httpServer = http.createServer（handleRequest）中删除serverConfig；完成这些更改后，您现在可以使用npm start运行服务器。

Answer 3

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

简单的WebRTC示例！但为什么它没有工作＆amp;我做错了什么？

3 个答案: