webRTC 이용하여 비디오 채팅 방법 with Node.js + Socket.io

webRTC 를 이용하여 비디오 채팅방을 만들어보도록 하겠습니다.

webRTC 는 https 이용해야 하기 때문에 node exporess 에서 SSL 적용을 해줘야 합니다.

최종화면 

기본적인 SSL 

ssl_server.js

// Dependencies
const fs = require('fs');
const http = require('http');
const https = require('https');
const express = require('express');

const app = express();

// Certificate 인증서 경로
const privateKey = fs.readFileSync('/etc/httpd/ssl/xxx.com_2022.key', 'utf8');
const certificate = fs.readFileSync('/etc/httpd/ssl/xxx.com_2022.crt', 'utf8');

const credentials = {
        key: privateKey,
        cert: certificate,
};

app.use((req, res) => {
        res.send('Hello there 222222!');
});

// Starting both http & https servers
const httpServer = http.createServer(app);
const httpsServer = https.createServer(credentials, app);

httpsServer.listen(8443, () => {
        console.log('HTTPS Server running on port 8443');
});

실제 사용할 server.js

SSL 사용하기 위해 8443 포트를 사용한다. (기존에 아파치가 443 포트 사용하고 있음)

const fs = require('fs');
const https = require('https');
const express = require("express");
const app = express();

const { v4: uuidv4 } = require("uuid");
app.set("view engine", "ejs");

// Certificate 인증서 경로
const privateKey = fs.readFileSync('/etc/httpd/ssl/xxx.com_2022.key', 'utf8');
const certificate = fs.readFileSync('/etc/httpd/ssl/xxx.com_2022.crt', 'utf8');

const credentials = {
        key: privateKey,
        cert: certificate,
};

const server = https.createServer(credentials, app);

const io = require("socket.io")(server, {
  cors: {
    origin: '*'
  }
});
const { ExpressPeerServer } = require("peer");
const opinions = {
  debug: true,
}

app.use("/peerjs", ExpressPeerServer(server, opinions));
app.use(express.static("public"));

app.get("/", (req, res) => {
  res.redirect(`/${uuidv4()}`);
});

app.get("/:room", (req, res) => {
  res.render("room", { roomId: req.params.room });
});

io.on("connection", (socket) => {
  socket.on("join-room", (roomId, userId, userName) => {
    socket.join(roomId);
    setTimeout(()=>{
      socket.to(roomId).broadcast.emit("user-connected", userId);
    }, 1000)
    socket.on("message", (message) => {
      io.to(roomId).emit("createMessage", message, userName);
    });
  });
});

server.listen(process.env.PORT || 8443);

 

나머지는 https://github.com/itstaranarora/video-chat-v1   소스 활용합니다.

public/script.js 아래부분은 server.js 와 동기화 해야함

var peer = new Peer({
  host: 'xxx.com',
  port: 8443,

 

 

 

참고자료

https://levelup.gitconnected.com/building-a-video-chat-app-with-node-js-socket-io-webrtc-26f46b213017

Building a Video Chat App with Node.js + Socket.io + WebRTC

https://github.com/itstaranarora/video-chat-v1

GitHub - itstaranarora/video-chat-v1: A Video Chat app build with NodeJS, Express, Peerjs, Socket.io