Para hacer una aplicación de videollamada, se requiere que todos y cada uno de los clientes envíen su transmisión de video y audio a todos los demás clientes. Entonces, para este propósito, estamos usando Peer.js y para la comunicación entre los clientes y el servidor, estamos usando WebSocket, es decir , Socket.io .
Requisito previo: 1. Node.js: es una tecnología JavaScript Back-End de código abierto. Tiene un administrador de paquetes llamado npm – Administrador de paquetes de Nodes que instala diferentes paquetes muy fácilmente.
2. Express.js: es un marco de servidor de node.js.
3. Socket.io: Nos ayuda a crear una comunicación bidireccional basada en eventos en tiempo real entre el servidor y el cliente.
4. Peer.js: Nos ayuda a enviar y recibir los flujos de audio y video de los otros clientes.
Configuración del entorno: este es el primer paso, aquí estamos creando e inicializando un nuevo repositorio.
$ mkdir VideoCallApp $ cd VideoCallApp $ npm init
Ahora, el siguiente paso es instalar los paquetes necesarios para nuestra VideoCallApp.
- Express: es el marco basado en servidor para node.js
- ejs: es un lenguaje de plantillas simple que le permite generar marcado HTML con JavaScript simple.
- Socket.io: Gestiona el Websocket para la comunicación basada en eventos.
- Nodemon (opcional): reinicia automáticamente el servidor cuando guarda los archivos de su proyecto.
- Módulo uuid : este módulo se utiliza para generar una identificación única. Esto se utilizará en este proyecto.
Instalación de los módulos necesarios:
$ npm install express $ npm install ejs $ npm install socket.io $ npm install nodemon
Ahora, nos preparamos para la parte de implementación.
Implementación:
Paso 1: Cree un archivo de servidor: 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
app.listen(4000 , ()=>{
console.log("Server running on port 4000");
})
Comando de ejecución para server.js
node server.js
Ahora, si abre el host local, es decir, localhost: 4000, verá el resultado, es decir: Bienvenido a la aplicación de videollamadas GeeksforGeeks.
Ahora, para socket.io necesitamos escribir más código. Aquí, agregamos código para socket.io y simplemente cambiamos los métodos app.listen() a server.listen().
Ahora estamos listos para el desarrollo del lado del cliente.
Javascript
const server = require('http').Server(app);
const io = require('socket.io')(server);
server.listen(4000 , ()=>{
console.log("Server running on port 4000");
);
Paso 2: cree dos carpetas, una es pública y la segunda es vistas.
Estructura del proyecto:
- Ahora, en las vistas, cree un archivo index.ejs que contenga todo el código html.
- Aquí, agregamos tres archivos de script, el primero es para peerjs, el segundo es para socket.io y el último es nuestro archivo index.js principal.
Archivo index.ejs
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Video App</title>
<style media="screen">
* {
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;
}
</style>
<script type="text/javascript">
var roomID = "<%= RoomId %>"
</script>
<script src=
"https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"
defer>
</script>
<script src="socket.io/socket.io.js" defer>
</script>
<script src="index.js" charset="utf-8" defer>
</script>
</head>
<body>
<div id="videoDiv"></div>
</body>
</html>
Nota: puede crear su propia interfaz de usuario, creé una simple.
- Ahora, en la carpeta pública, cree un archivo index.js para su archivo index.ejs y escriba algo de código.
const socket = io('/');
const peer = new Peer();
peer.on('open' , (id)=>{
socket.emit("newUser" , id);
});
Entonces, cada vez que el nuevo usuario se conecte, obtendrá una identificación única a través de peer.js y luego emitirá un evento de socket para el servidor, es decir, newUser.
Entonces, para manejar este evento, necesitamos agregar más código en nuestro lado del servidor.
JavaScript
io.on('connection' , (socket)=>{
socket.on('newUser' , (id)=>{
socket.join('/');
socket.to('/').broadcast.emit("userJoined" , id);
});
});
Ahora, cuando ocurra este evento, el servidor le dirá a todos los demás clientes que el nuevo usuario está conectado.
Implementemos la función principal de esta aplicación:
Ahora vamos a tomar las transmisiones de audio y video de los usuarios y enviar esa transmisión a otro cliente. Para esto, vamos a usar WebRTC aquí.
Código para tomar video y audio del usuario-
Javascript
navigator.mediaDevices.getUserMedia({
video:true,
audio:true
}).then((stream)=>{
// Some more code
}).catch(err=>{
alert(err.message)
})
Ahora necesitamos enviar la transmisión a todos los demás clientes, así que implementemos esa parte.
Aquí tenemos un método peer.js llamado call. Llamará al otro cliente para enviar y recibir flujos.
Cliente 1: El cliente 1 llamará al cliente 2 como se muestra a continuación.
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);
})
Cliente 2: veamos cómo responderá el cliente 2 a la llamada del cliente 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)
})
})
Ahora, después de enviar y recibir las transmisiones de ambos clientes, la salida será:
Producción –
PRODUCCIÓN
Nota: puede implementarlo en cualquier plataforma que desee. En mi caso, lo implementé en heroku.com
Para el código fuente, haga clic aquí . También es básico, puede modificarlo como desee.
Publicación traducida automáticamente
Artículo escrito por iamabhishekkalra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA