用Node.js、WebRTC和Socket.IO建立视频聊天

1_gtXKVvIwqDc_2kwOUlXLEA
大家好啊,今天我们要学习如何使用NodeJS和Web sockets作为后端,HTML5 API和JavaScript作为前端,构建一个简单的一对一音频/视频聊天。Mozilla Firefox、Google Chrome、Opera等大多数现代浏览器都支持WebRTC(Web实时通信),其任务就是为浏览器实现丰富且高质量的RTC app。那我们现在就开始吧。

它是如何工作的?

通常情况下,WebRTC app需要满足以下条件:

  • 音频或视频流
  • 网络信息
  • 能报错(如果有)、开始、停止或终止会话的通信媒介
  • 音频/视频流播放器

我们先从创建一个提供HTML和JavaScript的Web服务器开始。

const express = require('express'),
    http = require('http'),
    app = express();
// use express static to deliver resources HTML, CSS, JS, etc)
// from the public folder
app.use(express.static('public'));
http.createServer(options, app).listen(3355);
console.log("The HTTP server is up and running");

这里你可以看到我们已经创建了一个基本的http服务器,现在我们需要这个服务器来处理socket会话,因此我们将用WS模块对它们进行处理。我们需要添加更多的代码并将其组合在一起,然后会得到这样的结果:

const express = require('express'),
    ws = require('ws'),
    http = require('http'),
    app = express();
// use express static to deliver resources HTML, CSS, JS, etc)
// from the public folder
app.use(express.static('public'));
var httpServer = http.createServer(options, app).listen(3355);
console.log("The HTTP server is up and running");
var wsServer = new ws.Server({server: httpServer});
wss.on('connection', function (client) {
    console.log("A new client was connected.");
    client.on('message', function (message) { // incoming client
        wss.broadcast(message, client);
});
});
// Define a method to broadcast to all clients
wss.broadcast = function (data, exclude) {
    var i = 0, n = this.clients ? this.clients.length : 0, client = null;
    if (n < 1) return;
    for (; i < n; i++) {
        client = this.clients[i];
        if (client === exclude) continue;
        if (client.readyState === client.OPEN) client.send(data);
        else console.error('Error: the client state is ' +     client.readyState);
}
};

到目前为止,我们学习了如何构建服务器。如果你有留意到该代码,你会发现从客户端收到的所有内容都会通过消息广播发送回其他客户端。我们下一个任务是创建一个UI(简单UI)和一个JavaScript以处理socket消息/数据。我们还是需要创建一些基本的HTML,和几个视频标签:一个是自己的视频,另一个是接收者/呼叫者的视频。

<!DOCTYPE html>
<html>
   <head>
     <script src="webrtc.js"></script>
     <title>WebRTC Simple Video-Chat</title>
   </head>
   <body>
     <video id="remoteVideo" autoplay></video>
     <video id="localVideo" autoplay muted></video>
     <input id="videoCallButton" type="button" disabled value="Video Call"/>
     <input id="endCallButton" type="button" disabled value="End Call"/>
     <script>window.addEventListener("load", pageReady);</script>
   </body>
</html>

现在,我们已经有了HTML和服务器设置,现在该施一些JavaScript魔法了,app将准备就绪,我们从页面Ready法开始:

function pageReady() {
// check browser WebRTC availability
    if(navigator.getUserMedia) {
        videoCallButton = document.getElementById("videoCallButton");
        endCallButton = document.getElementById("endCallButton");
        localVideo = document.getElementById('localVideo');
        remoteVideo = document.getElementById('remoteVideo');
        videoCallButton.removeAttribute("disabled");
        videoCallButton.addEventListener("click", initiateCall);
        endCallButton.addEventListener("click", function (evt){       wsc.send(JSON.stringify({"closeConnection": true }));
    });
 } else {
    alert("Sorry, your browser does not support WebRTC!")
 }
};

仔细看,我们定义了“呼叫”和“结束通话”两个按钮、“本地视频”和“远程视频”两个视频。单击“呼叫”按钮将启动呼叫,单击“结束呼叫”就结束呼叫。建立连接后就会播放视频。现在你会想我们还没有定义视频的播放方式,因为目前没有任何内容。在进入下一步骤之前,让我们概括一些方法,这些方法的名称根据浏览器引擎不同而不同。看以下行:

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;

你能看到这些方法虽有着不同的名称,但他们的功能却是相同的。getUserMedia获取客户端/浏览器计算机的媒体(音频,视频)。RTCPeerConnection负责两个远程对等方之间的会话。RTCIceCandidate就不一样了,因为它是从我们定义的ICE服务器中获取的(请参阅ICE Server的更多信息)。RTCSessionDescriptor介绍了两者之间的连接以及它们的配置方式。

结论

现在你知道怎么把频通话和聊天功能与WebRTC、Node.js都集成在一起了吧。当然,可以使用多种编程语言来构建视频聊天app。但某些语言(例如JavaScript)可以根据用户的期望来提供准确的视频/语音聊天app。
在如今大规模的WebRTC市场中,Node.js是构建理想的支持视频聊天app的WebRTC的不二选择。这款app能为用户提供优质的性能,创建API并处理并行的请求和需求扩展性,在Android、iOS和Web中建立起成功的视频/语音聊天app。
因此,让我们探索这些技术,并将视频聊天功能集成到你的项目里,该功能使用户可以进行实时数据交换和视频流。

此文章最初于2020年6月16日发布在https://rydotinfotech.com/

原作者 Rydot Infotech

原文链接 https://rydotinfotech.medium.com/building-a-video-chat-using-node-js-webrtc-and-socket-io-52b930346e6c