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

Question

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

它的源代码在这里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- 我开始 Tomcat。

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

8- 我在另一台电脑上打开了 http://xxx.xxx.xxx.xxx/voicechat/client/index.html 并且该网页还显示了另一台电脑的网络摄像头（网络摄像头 2）。但是我看不到 PC 的网络摄像头 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);
    });
});

Answer 1

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.

您可以只用一个文件 URL 打开 index.html。

Answer 2

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

Answer 3

我将 HTTPS_PORT = 8443 更改为 HTTP_PORT = 8443。对所有 https 执行相同的操作；将其更改为 http。接下来，只有 const serverConfig = { };作为 serverConfig 并删除 const httpServer = http.createServer(handleRequest) 中的 serverConfig；在这些更改之后，您现在可以运行使用 npm 启动您的服务器。

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

Simple WebRTC Example! But why it didn't work & what did I do wrong?

webrtc