webRTC

July 2, 2021

webRTC

webRTC란

WebRTC (Web Real-Time Communication)는 웹 브라우저 간에 플러그인의 도움 없이 서로 통신할 수 있도록 설계된 API이다.
W3C에서 제시된 초안이며, 음성 통화, 영상 통화, P2P 파일 공유 등으로 활용될 수 있다.

https://ko.wikipedia.org/wiki/WebRTC

위와 같이 webRTC 기술은 음성 , 영상 p2p 파일공유를 실시간으로 전송하는 web 기술이다.
아직도 계속 발전되가고 있으며 webRTC는 화상,음성 과 같은 기능 구현을 제공하며
p2p와 같은 클라이언트의 연결은 개발자가 직접 구현해야 한다.

p2p 연결은 여러가지 방법이 존재하며 아직 기본적으로 확립된 방법은 없으며 Stun , turn server가 존재하며 이 부분은 node.js에 peerJs를 이용하여 구현하려고 한다.

webRTC를 이용한 기능 구현
https 인증 (ssl 인증키 발급)
p2p 연결 (peerJs)
앱 배포 (heroku)

구현하는 순서로 위와 같이 있으며 webRTC는 서로가 서로를 식별하는 고유의 id가 존재해야하며 서버간 p2p 공유시 인증된 https 프로토콜을 이용하여야만 서로 공유가 가능하다. domain과 ssl인증을 받아야만 사용이 가능하다.

여기서는 무료로 호스팅 heroku를 사용하여 간단하게 webRTC를 구현해보려고 한다.

webRTC

package.json

설치한 npm 모듈

{"engines":{
    "node":"^16.3.0",
    "npm":"^7.15.1"},
"scripts":{
    "start":"node index.js"},
"dependencies":{
    "ejs":"^3.1.6",
    "express":"^4.17.1",
    "mongoose":"^5.12.15",
    "peer":"^0.6.1",
    "socket.io":"^4.1.2",
    "uuid":"^3.4.0"}}

index.js

node Server를 돌리는 메인 스크립트이다.

const express = require("express");
const app = express();
const PORT = process.env.PORT||3030;
const server = require("http").Server(app);
const io = require("socket.io")(server);
const { v4: uuidV4 } = require("uuid");
const { ExpressPeerServer } = require('peer');
const peerServer = ExpressPeerServer(server, { 
  debug : true
});

app.set("view engine", "ejs");
app.use(express.static("public"));
app.use("/peerjs", peerServer);

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) => {
    socket.join(roomId);
    socket.to(roomId).emit('uesr-connected', userId);
    
    socket.on('disconnect', ()=>{
      socket.to(roomId).emit('user-disconnected',userId);
    })
  });
});

server.listen(PORT, () => {
  console.log("listening on * : 3000");
});

script.js

클라이언트 peer , socket을 연결하고 webRtc 구현 스크립트이다.

const socket = io("/");
const videoGrid = document.getElementById("video-grid");
const myVideo = document.createElement("video");
const peer = new Peer(undefined, {
  path: "/peerjs",
  host: "/",
  port: "443",
});
myVideo.muted = true;
const peers = {};

// 1. 사용자 비디오 오디오 권한 요청
let myVideoStream;
navigator.mediaDevices
  .getUserMedia({
    video: true,
    audio: false,
  })
  .then((stream) => {
    // 내가 접속시 비디오 표시
    myVideoStream = stream;
    addVideoStream(myVideo, stream);

    // 접속시 접속한 유저들 비디오 표시
    peer.on("call", (call) => {
      console.log("접속 유저들" + call);
      call.answer(stream);
      const video = document.createElement("video");
      call.on("stream", (userVideoStream) => {
        addVideoStream(video, userVideoStream);
      });
    });

    // 다른 유저들 접속시 비디오 표시
    socket.on("uesr-connected", (userId) => {
      console.log("다른유저 접속시" + userId);
      connectToNewUser(userId, stream);
    });
  });

socket.on("user-disconnected", (userId) => {
  if (peers[userId]) peers[userId].close();
});

peer.on("open", (id) => {
  socket.emit("join-room", ROOM_ID, id);
});

// 유저 접속시 조인시 실행
const connectToNewUser = (userId, stream) => {
  const call = peer.call(userId, stream);
  const video = document.createElement("video");
  call.on("stream", (userVideoStream) => {
    addVideoStream(video, userVideoStream);
  });
  call.on("close", () => {
    video.remove();
  });

  peers[userId] = call;
}

// 비디오 생성
const addVideoStream = (video, stream) => {
  video.srcObject = stream; // 비디오 설정 셋팅??
  video.addEventListener("loadedmetadata", () => {
    video.play();
  });
  videoGrid.appendChild(video);
}

room.ejs

html 엔진중하나인 ejs를 사용하여 화면을 구성했다.

<head>
    <title>Document</title>
    <script>
        const ROOM_ID = "<%= roomId%>";
    </script>
       <link rel="stylesheet" href="style.css">

    <script defer src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
    <script src="/socket.io/socket.io.js" defer></script>
    <script src="script.js" defer></script>
    <style>
        #video-grid {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }

        video {
            width: 400px;
            height: 300px;
            object-fit: cover;
            padding: 8px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="main__left">
            <div class="main__videos">
                <div id="video-grid">

                </div>
            </div>
            <div class="main__controls">
                <div class="main__controls__block">
                    <div onclick="muteUnmute()" class="main__controls__button main__mute_button">
                        <i class="fas fa-microphone"></i>
                        <span>Mute</span>
                    </div>
                    <div onclick="playStop()" class="main__controls__button main__video_button">
                        <i class="fas fa-video"></i>
                        <span>Stop Video</span>
                    </div>
                </div>
                <div class="main__controls__block">
                    <div class="main__controls__button">
                        <i class="fas fa-shield-alt"></i>
                        <span>Security</span>
                    </div>
                    <div class="main__controls__button">
                        <i class="fas fa-user-friends"></i>
                        <span>Participants</span>
                    </div>
                    <div class="main__controls__button">
                        <i class="fas fa-comment-alt"></i>
                        <span>Chat</span>
                    </div>
                </div>
                <div class="main__controls__block">
                    <div class="main__controls__button">
                        <span class="leave_meeting">Leave Meeting</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="main__right">
            <div class="main__header">
                <h6>Chat</h6>
            </div>
            <div class="main__chat_window">
                <ul class="messages">

                </ul>

            </div>
            <div class="main__message_container">
                <input id="chat_message" type="text" placeholder="Type message here...">
            </div>
        </div>
    </div>
</body>

</html>

webRTC

webRTC

webRTC란

webRTC

Leave a comment

You may also enjoy

Jenkins

Jenkins

JPA - 타입

JPA - 프록시와 연관관계 관리