Socket.io를 사용하여 실시간 비디오 채팅을 구현하는 방법

Socket.io는 실시간 웹 애플리케이션을 위한 JavaScript 라이브러리입니다. 비디오 채팅을 구현하기 위해 Socket.io를 사용하는 방법에 대해 알아보겠습니다.

프로젝트 설정 먼저, Node.js와 Express를 사용하여 웹 서버를 설정합니다. 프로젝트 폴더를 생성한 후 터미널에서 다음 명령어를 실행합니다:
```
mkdir video-chat-app
cd video-chat-app
npm init -y
npm install express socket.io
```

서버 설정 프로젝트 폴더에 server.js 라는 파일을 생성하고 다음과 같이 작성합니다:

const express = require("express");
const app = express();
const server = require("http").createServer(app);
const io = require("socket.io")(server);

app.use(express.static(__dirname + "/public"));

io.on("connection", (socket) => {
  console.log("A user connected");
  socket.on("disconnect", () => {
    console.log("A user disconnected");
  });
});

server.listen(3000, () => {
  console.log("Server is running on http://localhost:3000");
});

클라이언트 설정 public 폴더를 생성하고 그 안에 index.html 파일을 생성합니다:

<!DOCTYPE html>
<html>
  <head>
    <title>Video Chat App</title>
  </head>
  <body>
    <h1>Video Chat App</h1>
    <video id="videoElement" autoplay></video>

    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();

      // 비디오 스트림 가져오기
      navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
        const videoElement = document.getElementById("videoElement");
        videoElement.srcObject = stream;

        socket.emit("user-connected");

        socket.on("user-connected", () => {
          console.log("Another user connected");

          // 다른 사용자 비디오 스트림 받기
          socket.on("stream", (userVideoStream) => {
            console.log("Receiving video stream from another user");
            addVideoStream(videoElement, userVideoStream);
          });
        });
      });

      // 비디오 스트림 보내기
      function addVideoStream(videoElement, stream) {
        videoElement.srcObject = stream;
        videoElement.addEventListener("loadedmetadata", () => {
          videoElement.play();
        });
      }
    </script>
  </body>
</html>

비디오 채팅 구현 server.js에서 io.on("connection", (socket) => { ... })를 통해 소켓 연결 이벤트를 처리합니다. 클라이언트에서 socket.emit("user-connected")를 호출하여 사용자가 서버에 연결되었음을 알리고, 다른 사용자가 연결되었을 때 이를 처리하기 위해 socket.on("user-connected", ...)를 사용합니다.

사용자가 비디오 스트림을 제공하기 위해 navigator.mediaDevices.getUserMedia({ video: true })를 호출하고, 다른 사용자와의 연결에 대한 이벤트를 수신하기 위해 socket.on("stream", ...)을 사용합니다.
애플리케이션 실행 터미널에서 node server.js를 실행하고 웹 브라우저에서 http://localhost:3000에 접속하여 애플리케이션을 실행합니다.

이렇게 Socket.io를 사용하여 실시간 비디오 채팅을 구현할 수 있습니다. Socket.io를 통해 사용자간에 실시간 비디오 스트림을 전달하고 채팅 기능을 추가할 수 있습니다. 자세한 내용은 Socket.io 공식 문서를 참조하시기 바랍니다.

참고: Socket.io 공식 문서