如何在 node.js 中制作视频通话应用程序？

为了制作视频通话应用程序，每个客户端都需要将他们的视频和音频流发送给所有其他客户端。因此，为此目的，我们使用 Peer.js 并用于客户端和服务器之间的通信，我们使用 WebSocket 即Socket.io 。

先决条件：
1. Node.js：它是一种开源的 JavaScript 后端技术。它有一个名为npm的包管理器- 节点包管理器，可以非常轻松地安装不同的包。

2、 Express.js：它是一个node.js服务器框架。

3. Socket.io：它帮助我们在服务器和客户端之间创建一个基于事件的实时双向通信。

4. Peer.js：帮助我们发送和接收其他客户端的音视频流。

设置环境：这是第一步，我们在这里创建和初始化一个新的存储库。

$ mkdir VideoCallApp 
$ cd VideoCallApp
$ npm init

现在，下一步是为我们的 VideoCallApp 安装所需的包。

• Express ：它是基于服务器的 node.js 框架
• ejs ：它是一种简单的模板语言，可让您使用纯 JavaScript 生成 HTML 标记。
• Socket.io ：它管理 Websocket 以进行基于事件的通信。  
• Nodemon （可选）：保存项目文件时它会自动重新启动服务器。
• uuid 模块：该模块用于生成唯一的 id。这将在这个项目中使用

安装所需模块：

$ npm install express
$ npm install ejs
$ npm install socket.io
$ npm install nodemon

现在，我们都为实现部分做好了准备。

执行：

第 1 步：创建服务器文件 — server.js

JavaScript

// Importing express module
const express = require('express'); 
const app = express(); 
  
app.set("view engine", "ejs"); 
  
// Calling the public folder
app.use(express.static("public")); 
  
// Handling get request
app.get("/" , (req,res)=>{
  res.send("Welcome to GeeksforGeeks Video Call App"); 
});
  
// Listing the server 
server.listen(4000 , ()=>{
    console.log("Server running on port 4000");
)

server.js 的执行命令

node server.js

现在，如果您打开本地主机，即 localhost:4000，您将看到输出，即 — Welcome to GeeksforGeeks Video Call App。

Now, For socket.io we need to write some more code. Here, we added code for socket.io and we just change app.listen() to server.listen() methods.

Now we are all set for the client side development.

Javascript

const server = require('http').Server(app);
const io = require('socket.io')(server);
  
server.listen(4000 , ()=>{
    console.log("Server running on port 4000");
);

Step2：创建两个文件夹，一个是public，一个是views。

项目结构：

• 现在在视图中创建一个包含所有 html 代码的 index.ejs 文件。
• 在这里，我们添加了三个脚本文件，第一个是 peerjs，第二个是 socket.io，最后一个是我们的主要 index.js 文件。

索引.ejs 文件

HTML

  

    
    Video App
    
        * {
            margin: 0;
        }
  
        #videoDiv {
            display: grid;
            grid-gap: 10px;
            height: 80%;
            position: relative;
            grid-template-columns: repeat(auto-fill, 300px);
            grid-auto-rows: 300px;
        }
  
        #footer {
            width: 100%;
            height: 50px;
            background-color: white;
            display: flex;
            justify-content: center;
            flex: 1;
            border-bottom: 1px solid grey;
            margin-top: 10px;
        }
  
        button {
            height: 30px;
            width: 80px;
            margin-top: 10px;
            text-align: center;
            border-radius: 10px;
            outline: none;
            border: none;
            text-decoration: none;
            background-color: red;
            cursor: pointer;
        }
  
        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: 2px solid white;
        }
    
    
        var roomID = "<%= RoomId %>"
    
  
    
    
      
    
    
      
    
    

  

    

  

注意——你可以创建自己的 UI，我创建了一个简单的。

• 现在在公共文件夹中为您的 index.ejs 文件创建一个 index.js 文件并编写一些代码。

const socket = io('/');
const peer = new Peer();

peer.on('open' , (id)=>{
    socket.emit("newUser" , id);
});

因此，每当新用户连接时，他们都会通过 peer.js 获得一个唯一的 id，然后它会为服务器发出一个套接字事件，即 newUser。

所以为了处理这个事件，我们需要在我们的服务器端添加更多的代码。

JavaScript

io.on('connection' , (socket)=>{
    socket.on('newUser' , (id)=>{
        socket.join('/');
        socket.to('/').broadcast.emit("userJoined" , id);
    });
});

现在，当此事件发生时，服务器将告诉所有其他客户端新用户已连接。

让我们实现这个应用程序的主要函数-

现在我们将获取用户的音频、视频流并将该流发送到另一个客户端。为此，我们将在这里使用 WebRTC。

获取用户视频和音频的代码-

Javascript

navigator.mediaDevices.getUserMedia({
  video:true,
  audio:true
}).then((stream)=>{
  
      // Some more code
}).catch(err=>{
    alert(err.message)
})

现在我们需要将流发送到所有其他客户端，所以让我们实现那部分 -

这里我们有一个名为 call 的 peer.js 方法。它将调用另一个客户端来发送和接收流。

客户端 1：客户端 1 将调用客户端 2，如下所示。

Javascript

socket.on('userJoined' , id=>{
  console.log("new user joined")
  
  // Calling other client and sending our stream
  const call  = peer.call(id , myVideoStream);
  const vid = document.createElement('video');
  call.on('error' , (err)=>{
    alert(err);
  })
  
  // Taking the stream of the other client
  // when they will send it.
  call.on('stream' , userStream=>{
  
    // addVideo is a function which append
    // the video of the clients
    addVideo(vid , userStream);
  })

客户端 2：让我们看看客户端 2 将如何响应客户端 1 的调用。

Javascript

peer.on('call' , call=>{
  
    // Here client 2 is answering the call
    // and sending back their stream
    call.answer(stream); 
        const vid = document.createElement('video');
  
    // This event append the user stream. 
    call.on('stream' , userStream=>{
        addVideo(vid , userStream);
    })
    call.on('error' , (err)=>{
        alert(err)
    })
  })

现在在发送和接收两个客户端的流之后，输出将是 -

输出 -

输出

注意——你可以在任何你想要的平台上部署它，在我的例子中，我将它部署在 heroku.com

源代码请点击这里，它也是一个基本的，你可以随意修改它。