💾 WebRTC ‐ Nest.js와 React로 하는 간단 화상채팅 예제

학습하기 앞서...

예제를 하기에 앞서 먼저 WebRTC 개념정리부터 학습하는걸 강추드립니다.
로컬환경에서 다루기에 가장 어려운 점은 SSL 인증서인 것 같네요...
WebRTC 통신을 통한 화상채팅을 진행하기 위해서는 HTTPS가 필수
React, Nest, OpenVidu 3개 전부 SSL 인증서가 있어야 함
Self Signed를 통해 SSL 인증서 발급

1. OpenVidu 2.30.0 설치

3버전대가 베타 버전이기 때문에 안정적인 프로덕션 환경을 위해 2.30.0 설치

curl https://s3-eu-west-1.amazonaws.com/aws.openvidu.io/install_openvidu_latest.sh | bash

2. .env 수정

cd openvidu
vi .env

DOMAIN_OR_PUBLIC_IP=localhost
OPENVIDU_SECRET=MAFIA_GAME //아무거나 넣어도 됨
CERTIFICATE_TYPE=selfsigned
HTTPS_PORT=4443 //443 포트를 HTTPS 트래픽을 받기 때문에 관리용 포트로 다른 포트를 사용
HTTP_PORT=80

3. ssl 인증을 위한 nginx 설정

mkdir -p docker/nginx/ssl
mkdir -p docker/nginx/conf.d

4. 개발 환경용 SSL 인증서 생성

openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
  -keyout docker/nginx/ssl/nginx.key \
  -out docker/nginx/ssl/nginx.crt \
  -subj "/C=KR/ST=Seoul/L=Seoul/O=Dev/CN=localhost"

5. OpenVidu 실행/관리 명령

Docker 실행 스크립트

# OpenVidu 시작
./openvidu start

# 상태 확인
./openvidu logs

# 중지
./openvidu stop

# 재시작
./openvidu restart

6. 실행 에러 핸들링(MacOS 해당)

ARM64 환경에서 발생하는 문제

(base)  0chord@0Chord  ~/Desktop/boostcamp-membership/openvidu/openvidu  ./openvidu start
[+] Running 60/5
 ✔ openvidu-server 9 layers [⣿⣿⣿⣿⣿⣿⣿⣿⣿]      0B/0B      Pulled                                                                                                                       83.6s
 ✔ coturn 8 layers [⣿⣿⣿⣿⣿⣿⣿⣿]      0B/0B      Pulled                                                                                                                                163.6s
 ✔ kms 13 layers [⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿]      0B/0B      Pulled                                                                                                                             165.4s
 ✔ nginx 15 layers [⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿]      0B/0B      Pulled                                                                                                                         163.4s
 ✔ app 10 layers [⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿]      0B/0B      Pulled                                                                                                                                129.9s
[+] Running 8/11
 ✔ Network openvidu_default                                                                                                                                       Created             0.1s
 ✔ Container openvidu-app-1                                                                                                                                       Started             0.5s
 ⠿ Container openvidu-openvidu-server-1                                                                                                                           Starting            0.7s
 ✔ Container openvidu-coturn-1                                                                                                                                    Started             0.7s
 ⠿ Container openvidu-nginx-1                                                                                                                                     Starting            0.7s
 ⠿ Container openvidu-kms-1                                                                                                                                       Starting            0.7s
 ! openvidu-server The requested image's platform (linux/amd64) does not match the detected host platform (linux/arm64/v8) and no specific platform was requested                     0.0s
 ! kms The requested image's platform (linux/amd64) does not match the detected host platform (linux/arm64/v8) and no specific platform was requested                                 0.0s
 ! nginx The requested image's platform (linux/amd64) does not match the detected host platform (linux/arm64/v8) and no specific platform was requested                               0.0s
 ! app The requested image's platform (linux/amd64) does not match the detected host platform (linux/arm64/v8) and no specific platform was requested                                 0.0s
 ! coturn The requested image's platform (linux/amd64) does not match the detected host platform (linux/arm64/v8) and no specific platform was requested                              0.0s
Error response from daemon: Mounts denied:
The path /opt/openvidu/kms-crashes is not shared from the host and is not known to Docker.
You can configure shared paths from Docker -> Preferences... -> Resources -> File Sharing.
See https://docs.docker.com/desktop/mac for more info.

플랫폼 불일치 문제 해결

version: '3.1'

services:

    openvidu-server:
        image: openvidu/openvidu-server:2.30.0
        restart: on-failure
        platform: linux/amd64
        network_mode: host
        entrypoint: ['/usr/local/bin/entrypoint.sh']
        volumes:
            - ./coturn:/run/secrets/coturn
            - /var/run/docker.sock:/var/run/docker.sock
            - ${OPENVIDU_RECORDING_PATH}:${OPENVIDU_RECORDING_PATH}
            - ${OPENVIDU_RECORDING_CUSTOM_LAYOUT}:${OPENVIDU_RECORDING_CUSTOM_LAYOUT}
            - ${OPENVIDU_CDR_PATH}:${OPENVIDU_CDR_PATH}
        env_file:
            - .env
        environment:
            - SERVER_SSL_ENABLED=false
            - SERVER_PORT=5443
            - KMS_URIS=["ws://localhost:8888/kurento"]
            - COTURN_IP=${COTURN_IP:-auto-ipv4}
            - COTURN_PORT=${COTURN_PORT:-3478}
        logging:
            options:
                max-size: "${DOCKER_LOGS_MAX_SIZE:-100M}"

    kms:
        image: ${KMS_IMAGE:-kurento/kurento-media-server:7.0.1}
        restart: always
        platform: linux/amd64
        network_mode: host
        ulimits:
          core: -1
        volumes:
            - /opt/openvidu/kms-crashes:/opt/openvidu/kms-crashes
            - ${OPENVIDU_RECORDING_PATH}:${OPENVIDU_RECORDING_PATH}
            - /opt/openvidu/kurento-logs:/opt/openvidu/kurento-logs
        environment:
            - KMS_MIN_PORT=40000
            - KMS_MAX_PORT=57000
            - GST_DEBUG=${KMS_DOCKER_ENV_GST_DEBUG:-}
            - KURENTO_LOG_FILE_SIZE=${KMS_DOCKER_ENV_KURENTO_LOG_FILE_SIZE:-100}
            - KURENTO_LOGS_PATH=/opt/openvidu/kurento-logs
        logging:
            options:
                max-size: "${DOCKER_LOGS_MAX_SIZE:-100M}"

    coturn:
        image: openvidu/openvidu-coturn:2.30.0
        restart: on-failure
        platform: linux/amd64
        ports:
            - "${COTURN_PORT:-3478}:${COTURN_PORT:-3478}/tcp"
            - "${COTURN_PORT:-3478}:${COTURN_PORT:-3478}/udp"
        env_file:
            - .env
        volumes:
            - ./coturn:/run/secrets/coturn
        command:
            - --log-file=stdout
            - --listening-port=${COTURN_PORT:-3478}
            - --fingerprint
            - --min-port=${COTURN_MIN_PORT:-57001}
            - --max-port=${COTURN_MAX_PORT:-65535}
            - --realm=openvidu
            - --verbose
            - --use-auth-secret
            - --static-auth-secret=$${COTURN_SHARED_SECRET_KEY}
        logging:
            options:
                max-size: "${DOCKER_LOGS_MAX_SIZE:-100M}"

    nginx:
        image: openvidu/openvidu-proxy:2.30.0
        restart: always
        platform: linux/amd64
        network_mode: host
        volumes:
            - ./certificates:/etc/letsencrypt
            - ./owncert:/owncert
            - ./custom-nginx-vhosts:/etc/nginx/vhost.d/
            - ./custom-nginx-locations:/custom-nginx-locations
            - ${OPENVIDU_RECORDING_CUSTOM_LAYOUT}:/opt/openvidu/custom-layout
        environment:
            - DOMAIN_OR_PUBLIC_IP=${DOMAIN_OR_PUBLIC_IP}
            - CERTIFICATE_TYPE=${CERTIFICATE_TYPE}
            - LETSENCRYPT_EMAIL=${LETSENCRYPT_EMAIL}
            - PROXY_HTTP_PORT=${HTTP_PORT:-}
            - PROXY_HTTPS_PORT=${HTTPS_PORT:-}
            - PROXY_HTTPS_PROTOCOLS=${HTTPS_PROTOCOLS:-}
            - PROXY_HTTPS_CIPHERS=${HTTPS_CIPHERS:-}
            - PROXY_HTTPS_HSTS=${HTTPS_HSTS:-}
            - ALLOWED_ACCESS_TO_DASHBOARD=${ALLOWED_ACCESS_TO_DASHBOARD:-}
            - ALLOWED_ACCESS_TO_RESTAPI=${ALLOWED_ACCESS_TO_RESTAPI:-}
            - PROXY_MODE=CE
            - WITH_APP=true
            - SUPPORT_DEPRECATED_API=${SUPPORT_DEPRECATED_API:-false}
            - REDIRECT_WWW=${REDIRECT_WWW:-false}
            - WORKER_CONNECTIONS=${WORKER_CONNECTIONS:-10240}
            - PUBLIC_IP=${PROXY_PUBLIC_IP:-auto-ipv4}
        logging:
            options:
                max-size: "${DOCKER_LOGS_MAX_SIZE:-100M}"

Docker 파일 공유 설정
- Docker Desktop에서 Settings 클릭
- Resource > File Sharing 선택

/opt/openvidu
/opt/openvidu/kms-crashes

Applay&Restart 클릭
OpenVidu 재시작

./openvidu stop
docker system prune -a
./openvidu start

6. Volume 에러 처리

(base)  0chord@0Chord  ~/Desktop/boostcamp-membership/openvidu/openvidu  ./openvidu start
[+] Running 60/5
 ✔ openvidu-server 9 layers [⣿⣿⣿⣿⣿⣿⣿⣿⣿]      0B/0B      Pulled                                                                                                                      169.9s
 ✔ kms 13 layers [⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿]      0B/0B      Pulled                                                                                                                             150.7s
 ✔ nginx 15 layers [⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿]      0B/0B      Pulled                                                                                                                          94.7s
 ✔ app 10 layers [⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿]      0B/0B      Pulled                                                                                                                                 35.4s
 ✔ coturn 8 layers [⣿⣿⣿⣿⣿⣿⣿⣿]      0B/0B      Pulled                                                                                                                                110.7s
[+] Running 4/7
 ✔ Network openvidu_default                                                                                                                           C...                            0.1s
 ✔ Container openvidu-coturn-1                                                                                                                        Started                         2.1s
 ⠿ Container openvidu-kms-1                                                                                                                           S...                            2.1s
 ✔ Container openvidu-app-1                                                                                                                           S...                            1.7s
 ⠿ Container openvidu-openvidu-server-1                                                                                                               Starting                        2.1s
 ⠿ Container openvidu-nginx-1                                                                                                                         Starting                        2.1s
 ! app The requested image's platform (linux/amd64) does not match the detected host platform (linux/arm64/v8) and no specific platform was requested                                 0.0s
Error response from daemon: error while creating mount source path '/host_mnt/opt/openvidu/recordings': mkdir /host_mnt/opt/openvidu: operation not permitted

기존 설정 제거

./openvidu stop
docker-compose down -v
docker system prune -a

볼륨 디렉토리 생성

sudo mkdir -p /opt/openvidu
sudo mkdir -p /opt/openvidu/recordings
sudo mkdir -p /opt/openvidu/kms-crashes

sudo chmod -R 777 /opt/openvidu

docker-compose.yml 수정

version: '3.1'

services:

    openvidu-server:
        image: openvidu/openvidu-server:2.30.0
        restart: on-failure
        platform: linux/amd64
        network_mode: host
        entrypoint: ['/usr/local/bin/entrypoint.sh']
        volumes:
            - ./recordings:/opt/openvidu/recordings
            - ./kms-crashes:/opt/openvidu/kms-crashes
            - ./coturn:/run/secrets/coturn
            - /var/run/docker.sock:/var/run/docker.sock
            - ${OPENVIDU_RECORDING_PATH}:${OPENVIDU_RECORDING_PATH}
            - ${OPENVIDU_RECORDING_CUSTOM_LAYOUT}:${OPENVIDU_RECORDING_CUSTOM_LAYOUT}
            - ${OPENVIDU_CDR_PATH}:${OPENVIDU_CDR_PATH}
        env_file:
            - .env
        environment:
            - SERVER_SSL_ENABLED=false
            - SERVER_PORT=5443
            - KMS_URIS=["ws://localhost:8888/kurento"]
            - COTURN_IP=${COTURN_IP:-auto-ipv4}
            - COTURN_PORT=${COTURN_PORT:-3478}
        logging:
            options:
                max-size: "${DOCKER_LOGS_MAX_SIZE:-100M}"

    kms:
        image: ${KMS_IMAGE:-kurento/kurento-media-server:7.0.1}
        restart: always
        platform: linux/amd64
        network_mode: host
        ulimits:
          core: -1
        volumes:
            - ./recordings:/opt/openvidu/recordings
            - ./kms-crashes:/opt/openvidu/kms-crashes
            - /opt/openvidu/kms-crashes:/opt/openvidu/kms-crashes
            - ${OPENVIDU_RECORDING_PATH}:${OPENVIDU_RECORDING_PATH}
            - /opt/openvidu/kurento-logs:/opt/openvidu/kurento-logs
        environment:
            - KMS_MIN_PORT=40000
            - KMS_MAX_PORT=57000
            - GST_DEBUG=${KMS_DOCKER_ENV_GST_DEBUG:-}
            - KURENTO_LOG_FILE_SIZE=${KMS_DOCKER_ENV_KURENTO_LOG_FILE_SIZE:-100}
            - KURENTO_LOGS_PATH=/opt/openvidu/kurento-logs
        logging:
            options:
                max-size: "${DOCKER_LOGS_MAX_SIZE:-100M}"

    coturn:
        image: openvidu/openvidu-coturn:2.30.0
        restart: on-failure
        platform: linux/amd64
        ports:
            - "${COTURN_PORT:-3478}:${COTURN_PORT:-3478}/tcp"
            - "${COTURN_PORT:-3478}:${COTURN_PORT:-3478}/udp"
        env_file:
            - .env
        volumes:
            - ./coturn:/run/secrets/coturn
        command:
            - --log-file=stdout
            - --listening-port=${COTURN_PORT:-3478}
            - --fingerprint
            - --min-port=${COTURN_MIN_PORT:-57001}
            - --max-port=${COTURN_MAX_PORT:-65535}
            - --realm=openvidu
            - --verbose
            - --use-auth-secret
            - --static-auth-secret=$${COTURN_SHARED_SECRET_KEY}
        logging:
            options:
                max-size: "${DOCKER_LOGS_MAX_SIZE:-100M}"

    nginx:
        image: openvidu/openvidu-proxy:2.30.0
        restart: always
        platform: linux/amd64
        network_mode: host
        volumes:
            - ./certificates:/etc/letsencrypt
            - ./owncert:/owncert
            - ./custom-nginx-vhosts:/etc/nginx/vhost.d/
            - ./custom-nginx-locations:/custom-nginx-locations
            - ${OPENVIDU_RECORDING_CUSTOM_LAYOUT}:/opt/openvidu/custom-layout
        environment:
            - DOMAIN_OR_PUBLIC_IP=${DOMAIN_OR_PUBLIC_IP}
            - CERTIFICATE_TYPE=${CERTIFICATE_TYPE}
            - LETSENCRYPT_EMAIL=${LETSENCRYPT_EMAIL}
            - PROXY_HTTP_PORT=${HTTP_PORT:-}
            - PROXY_HTTPS_PORT=${HTTPS_PORT:-}
            - PROXY_HTTPS_PROTOCOLS=${HTTPS_PROTOCOLS:-}
            - PROXY_HTTPS_CIPHERS=${HTTPS_CIPHERS:-}
            - PROXY_HTTPS_HSTS=${HTTPS_HSTS:-}
            - ALLOWED_ACCESS_TO_DASHBOARD=${ALLOWED_ACCESS_TO_DASHBOARD:-}
            - ALLOWED_ACCESS_TO_RESTAPI=${ALLOWED_ACCESS_TO_RESTAPI:-}
            - PROXY_MODE=CE
            - WITH_APP=true
            - SUPPORT_DEPRECATED_API=${SUPPORT_DEPRECATED_API:-false}
            - REDIRECT_WWW=${REDIRECT_WWW:-false}
            - WORKER_CONNECTIONS=${WORKER_CONNECTIONS:-10240}
            - PUBLIC_IP=${PROXY_PUBLIC_IP:-auto-ipv4}
        logging:
            options:
                max-size: "${DOCKER_LOGS_MAX_SIZE:-100M}"

재시작

7. Nginx 재설정

nginx 파일 수정

vi custom-nginx-vhosts/default.conf

# custom-nginx-vhosts/default.conf 내용
upstream openvidu {
    server openvidu-server:5443;
}

server {
    listen 4443 ssl;
    server_name localhost;

    ssl_certificate         /etc/letsencrypt/live/localhost/fullchain.pem;
    ssl_certificate_key     /etc/letsencrypt/live/localhost/privkey.pem;
    ssl_session_cache       shared:SSL:10m;
    ssl_session_timeout     10m;

    location / {
        proxy_pass          http://openvidu;
        proxy_set_header    Host $host;
        proxy_set_header    X-Real-IP $remote_addr;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header    X-Forwarded-Proto $scheme;

        proxy_http_version  1.1;
        proxy_set_header    Upgrade $http_upgrade;
        proxy_set_header    Connection "upgrade";

        proxy_connect_timeout   300;
        proxy_send_timeout      300;
        proxy_read_timeout      300;
    }

    location /dashboard {
        proxy_pass          http://openvidu/dashboard;
        proxy_set_header    Host $host;
        proxy_set_header    X-Real-IP $remote_addr;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header    X-Forwarded-Proto $scheme;
    }
}

인증서 생성 및 배치

mkdir -p certificates/live/localhost

openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
    -keyout certificates/live/localhost/privkey.pem \
    -out certificates/live/localhost/fullchain.pem \
    -subj "/CN=localhost"

chmod -R 755 certificates

Docker-compose 재설정

version: '3.1'

services:

    openvidu-server:
        image: openvidu/openvidu-server:2.30.0
        restart: on-failure
        platform: linux/amd64
        ports:
            - "5443:5443"
        entrypoint: ['/usr/local/bin/entrypoint.sh']
        networks:
            - openvidu_network
        volumes:
            - ./recordings:/opt/openvidu/recordings
            - ./kms-crashes:/opt/openvidu/kms-crashes
            - ./coturn:/run/secrets/coturn
            - /var/run/docker.sock:/var/run/docker.sock
            - ${OPENVIDU_RECORDING_PATH}:${OPENVIDU_RECORDING_PATH}
            - ${OPENVIDU_RECORDING_CUSTOM_LAYOUT}:${OPENVIDU_RECORDING_CUSTOM_LAYOUT}
            - ${OPENVIDU_CDR_PATH}:${OPENVIDU_CDR_PATH}
        env_file:
            - .env
        environment:
            - SERVER_SSL_ENABLED=false
            - SERVER_PORT=5443
            - KMS_URIS=["ws://kms:8888/kurento"]
            - COTURN_IP=${COTURN_IP:-auto-ipv4}
            - COTURN_PORT=${COTURN_PORT:-3478}
        logging:
            options:
                max-size: "${DOCKER_LOGS_MAX_SIZE:-100M}"

    kms:
        image: ${KMS_IMAGE:-kurento/kurento-media-server:7.0.1}
        restart: always
        platform: linux/amd64
        ports:
            - "8888:8888"
        networks:
            - openvidu_network
        ulimits:
          core: -1
        volumes:
            - ./recordings:/opt/openvidu/recordings
            - ./kms-crashes:/opt/openvidu/kms-crashes
            - /opt/openvidu/kms-crashes:/opt/openvidu/kms-crashes
            - ${OPENVIDU_RECORDING_PATH}:${OPENVIDU_RECORDING_PATH}
            - /opt/openvidu/kurento-logs:/opt/openvidu/kurento-logs
        environment:
            - KMS_MIN_PORT=40000
            - KMS_MAX_PORT=57000
            - GST_DEBUG=${KMS_DOCKER_ENV_GST_DEBUG:-}
            - KURENTO_LOG_FILE_SIZE=${KMS_DOCKER_ENV_KURENTO_LOG_FILE_SIZE:-100}
            - KURENTO_LOGS_PATH=/opt/openvidu/kurento-logs
        logging:
            options:
                max-size: "${DOCKER_LOGS_MAX_SIZE:-100M}"

    coturn:
        image: openvidu/openvidu-coturn:2.30.0
        restart: on-failure
        platform: linux/amd64
        networks:
            - openvidu_network
        ports:
            - "${COTURN_PORT:-3478}:${COTURN_PORT:-3478}/tcp"
            - "${COTURN_PORT:-3478}:${COTURN_PORT:-3478}/udp"
        env_file:
            - .env
        volumes:
            - ./coturn:/run/secrets/coturn
        command:
            - --log-file=stdout
            - --listening-port=${COTURN_PORT:-3478}
            - --fingerprint
            - --min-port=${COTURN_MIN_PORT:-57001}
            - --max-port=${COTURN_MAX_PORT:-65535}
            - --realm=openvidu
            - --verbose
            - --use-auth-secret
            - --static-auth-secret=$${COTURN_SHARED_SECRET_KEY}
        logging:
            options:
                max-size: "${DOCKER_LOGS_MAX_SIZE:-100M}"

    nginx:
        image: openvidu/openvidu-proxy:2.30.0
        restart: always
        platform: linux/amd64
        networks:
            - openvidu_network
        depends_on:
            - openvidu-server
        ports:
            - "80:80"
            - "443:443"
            - "4443:4443"
        volumes:
            - ./certificates:/etc/letsencrypt
            - ./owncert:/owncert
            - ./custom-nginx-vhosts:/etc/nginx/vhost.d/
            - ./custom-nginx-locations:/custom-nginx-locations
            - ${OPENVIDU_RECORDING_CUSTOM_LAYOUT}:/opt/openvidu/custom-layout
            - ./docker/nginx/ssl:/etc/nginx/ssl
        environment:
            - DOMAIN_OR_PUBLIC_IP=${DOMAIN_OR_PUBLIC_IP}
            - CERTIFICATE_TYPE=${CERTIFICATE_TYPE}
            - LETSENCRYPT_EMAIL=${LETSENCRYPT_EMAIL}
            - PROXY_HTTP_PORT=${HTTP_PORT:-}
            - PROXY_HTTPS_PORT=${HTTPS_PORT:-}
            - PROXY_HTTPS_PROTOCOLS=${HTTPS_PROTOCOLS:-}
            - PROXY_HTTPS_CIPHERS=${HTTPS_CIPHERS:-}
            - PROXY_HTTPS_HSTS=${HTTPS_HSTS:-}
            - ALLOWED_ACCESS_TO_DASHBOARD=${ALLOWED_ACCESS_TO_DASHBOARD:-}
            - ALLOWED_ACCESS_TO_RESTAPI=${ALLOWED_ACCESS_TO_RESTAPI:-}
            - PROXY_MODE=CE
            - WITH_APP=true
            - SUPPORT_DEPRECATED_API=${SUPPORT_DEPRECATED_API:-false}
            - REDIRECT_WWW=${REDIRECT_WWW:-false}
            - WORKER_CONNECTIONS=${WORKER_CONNECTIONS:-10240}
            - PUBLIC_IP=${PROXY_PUBLIC_IP:-auto-ipv4}
        logging:
            options:
                max-size: "${DOCKER_LOGS_MAX_SIZE:-100M}"

networks:
    openvidu_network:
        driver: bridge

컨테이너 재시작

./openvidu stop
docker-compose down
docker system prune -a
./openvidu start

8. OpenVidu 대시보드 접속

9. nest 연동

NestJS 프로젝트 생성

nest new openvidu-server
cd openvidu-server

npm install openvidu-node-client @nestjs/config dotenv

.env 설정

OPENVIDU_URL=https://localhost:4443
OPENVIDU_SECRET=MAFIA_GAME
NODE_TLS_REJECT_UNAUTHORIZED=0

OpenVidu 모듈 생성

OpenViduService 구현

import {Injectable} from "@nestjs/common";
import {OpenVidu, Session} from "openvidu-node-client";
import {ConfigService} from "@nestjs/config";

@Injectable()
export class OpenViduService {
  private openVidu: OpenVidu;

  constructor(private readonly configService: ConfigService) {

    this.openVidu = new OpenVidu(
      this.configService.get('OPENVIDU_URL'),
      this.configService.get('OPENVIDU_SECRET')
    )
  }

  async createSession(sessionId: string): Promise<Session> {
    try {
      const sessions = this.openVidu.activeSessions;
      const existingSession = sessions.find(s => s.sessionId === sessionId);

      if (existingSession) {
        return existingSession;
      }
      return await this.openVidu.createSession({customSessionId: sessionId});
    } catch (error){
      throw error;
    }
  }

  async createConnection(sessionId: string, metadata?: string): Promise<string> {
    try {
      const session = await this.openVidu.activeSessions.find(
        s => s.sessionId === sessionId
      );
      if (!session) {
        throw new Error('No session exists with that sessionId');
      }

      const connection = await session.createConnection({
        data: metadata,
      });
      return connection.token;
    } catch (error){
      throw error;
    }
  }

  getSession(sessionId: string): Session{
    const sessions = this.openVidu.activeSessions;
    const session = sessions.find(s => s.sessionId === sessionId);
    if (!session) {
      throw new Error('No session exists with that sessionId');
    }
    return session;
  }

  listSessions() {
    return this.openVidu.activeSessions;
  }
}

OpenViduController 구현

import { Controller, Post, Body, Get, Param, HttpException, HttpStatus } from '@nestjs/common';
import { OpenViduService } from './openvidu.service';

@Controller('api/sessions')
export class OpenViduController {
  constructor(private readonly openViduService: OpenViduService) {}

  @Post()
  async createSession(@Body() body: { sessionId: string }) {
    try {
      const session = await this.openViduService.createSession(body.sessionId);
      return {sessionId:session.sessionId};
    } catch (error) {
      throw new HttpException(error.message, HttpStatus.INTERNAL_SERVER_ERROR);
    }
  }

  @Post(':sessionId/connections')
  async createConnection(
    @Param('sessionId') sessionId: string,
    @Body() body: { metadata?: string }
  ) {
    try {
      const token = await this.openViduService.createConnection(
        sessionId,
        body.metadata
      );
      return { token };
    } catch (error) {
      throw new HttpException(error.message, HttpStatus.INTERNAL_SERVER_ERROR);
    }
  }

  @Get(':sessionId')
  async getSession(@Param('sessionId') sessionId: string) {
    try {
      const session = await this.openViduService.getSession(sessionId);
      return {
        sessionId: session.sessionId,
        connections: session.activeConnections.length
      };
    } catch (error) {
      throw new HttpException(error.message, HttpStatus.NOT_FOUND);
    }
  }

  @Get()
  async listSessions() {
    try {
      const sessions = this.openViduService.listSessions();
      return sessions.map(session => ({
        sessionId: session.sessionId,
        connections: session.activeConnections.length
      }));
    } catch (error) {
      throw new HttpException(error.message, HttpStatus.INTERNAL_SERVER_ERROR);
    }
  }
}

OpenViduModule 구현

import {OpenViduService} from "./openvidu.service";
import {ConfigModule} from "@nestjs/config";
import {OpenViduController} from "./openvidu.controller";

@Module({
  imports: [ConfigModule],
  controllers: [OpenViduController],
  providers: [OpenViduService],
  exports: [OpenViduService],
})
export class OpenViduModule {}

AppModule 구현

import { Module } from '@nestjs/common';
import {ConfigModule} from "@nestjs/config";
import {OpenViduModule} from "./openvidu/openvidu.module";

@Module({
  imports: [ConfigModule.forRoot({
    isGlobal: true,
  }),
  OpenViduModule]
})
export class AppModule {}

ssl 인증서 설정

WebRTC 통신을 하려면 Nest 서버도 SSL 인증서가 있어야 하므로 로컬환경에서는 개발용으로 인증서 생성

mkdir -p ssl
cd ssl

openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
  -keyout localhost.key \
  -out localhost.crt \
  -subj "/CN=localhost"

Nest.js HTTPS 설정

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as fs from "fs";
import * as path from "path";
import {cwd} from 'process';
async function bootstrap() {

  const __dirname = path.resolve(cwd());

  const httpsOptions = {
    key: await fs.readFileSync(path.join(__dirname, './ssl/localhost.key')),
    cert: await fs.readFileSync(path.join(__dirname, './ssl/localhost.crt')),
  };

  const app = await NestFactory.create(AppModule,{
    httpsOptions
  });
  app.enableCors({
    origin: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Accept','Authorization'],
    credentials: true,
  });
  await app.listen(3333);
}
bootstrap();

10. React 연동

React 프로젝트 생성

npx create-react-app openvidu-react --template typescript
cd openvidu-react

# 필요한 패키지 설치
npm install openvidu-browser axios styled-components @types/styled-components

SSL 설정

mkdir ssl
cd ssl

openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
  -keyout localhost.key \
  -out localhost.crt \
  -subj "/CN=localhost"

.env 파일 생성 (프로젝트 루트)

cd ../
npm i dotenv

vi .env

HTTPS=true
SSL_CRT_FILE=ssl/localhost.crt
SSL_KEY_FILE=ssl/localhost.key
REACT_APP_API_URL=https://localhost:3333
NODE_TLS_REJECT_UNAUTHORIZED=0
REACT_APP_OPENVIDU_URL=https://localhost:4443
REACT_APP_OPENVIDU_SERVER_SECRET=MAFIA_GAME

src/types/vides.ts 생성

export interface StreamManager {
    stream: {
        getMediaStream: () => MediaStream;
    };
}

export interface Publisher extends StreamManager {
    publishAudio: (value: boolean) => void;
    publishVideo: (value: boolean) => void;
}

export interface Subscriber extends StreamManager {}

src/components/VideoPlayer.tsx 생성

import React, { useRef, useEffect } from 'react';
import styled from 'styled-components';

const VideoContainer = styled.div`
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
`;

const Video = styled.video`
  width: 100%;
  height: 100%;
  object-fit: cover;
`;

const NoVideo = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  background-color: #333;
`;

const MuteIndicator = styled.div`
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    padding: 5px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
`;

interface VideoPlayerProps {
  streamManager: any;
  muted: boolean;
  audioEnabled?: boolean;
  videoEnabled?: boolean;
}

const VideoPlayer: React.FC<VideoPlayerProps> = ({
                                                   streamManager,
                                                   muted,
                                                   audioEnabled = true,
                                                   videoEnabled = true
                                                 }) => {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    if (videoRef.current && streamManager) {
      streamManager.addVideoElement(videoRef.current);
    }
  }, [streamManager]);

  return (
    <VideoContainer>
      {videoEnabled ? (
        <Video
          ref={videoRef}
          autoPlay
          playsInline
          muted={muted}
        />
      ) : (
        <NoVideo>Video Off</NoVideo>
      )}
      {!audioEnabled && (
        <MuteIndicator>🔇</MuteIndicator>
      )}
    </VideoContainer>
  );
};

export default VideoPlayer;

src/components/VideoRoom.tsx 생성

import React, { useState, useEffect, useCallback } from 'react';
import { OpenVidu } from 'openvidu-browser';
import axios from 'axios';
import styled from 'styled-components';
import VideoPlayer from './VideoPlayer';
import { Publisher, Subscriber } from '../types/video';

const Container = styled.div`
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
`;

const VideoGrid = styled.div`
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
    flex: 1;
`;

const Controls = styled.div`
    display: flex;
    justify-content: center;
    padding: 20px;
    gap: 10px;
`;

const Button = styled.button`
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    
    &:hover {
        background-color: #0056b3;
    }
`;

const APPLICATION_SERVER_URL = 'https://localhost:3333/';

const VideoRoom: React.FC = () => {
    const [session, setSession] = useState<any>(undefined);
    const [publisher, setPublisher] = useState<Publisher | undefined>(undefined);
    const [subscribers, setSubscribers] = useState<Subscriber[]>([]);
    const [audioEnabled, setAudioEnabled] = useState(true);
    const [videoEnabled, setVideoEnabled] = useState(true);

    const joinSession = useCallback(async () => {
        try {
            const OV = new OpenVidu();
            const session = OV.initSession();

            session.on('streamCreated', (event) => {
                const subscriber = session.subscribe(event.stream, undefined);
                setSubscribers((subs) => [...subs, subscriber]);
            });

            session.on('streamDestroyed', (event) => {
                setSubscribers((subs) =>
                    subs.filter((sub) => sub !== event.stream.streamManager)
                );
            });

            setSession(session);

            const response = await axios.post(
                `${APPLICATION_SERVER_URL}api/sessions`,
                { sessionId: 'SessionA' },
                {
                    headers: { 'Content-Type': 'application/json' },
                }
            );

            const token = await axios.post(
                `${APPLICATION_SERVER_URL}api/sessions/${response.data.sessionId}/connections`,
                {},
                {
                    headers: { 'Content-Type': 'application/json' },
                }
            );

            await session.connect(token.data.token);

            const publisher = await OV.initPublisherAsync(undefined, {
                audioSource: undefined,
                videoSource: undefined,
                publishAudio: true,
                publishVideo: true,
                resolution: '640x480',
                frameRate: 30,
                insertMode: 'APPEND',
                mirror: false,
            });

            await session.publish(publisher);
            setPublisher(publisher);

        } catch (error) {
            console.error('Error joining session:', error);
        }
    }, []);

    const leaveSession = useCallback(() => {
        if (session) {
            session.disconnect();
            setSession(undefined);
            setPublisher(undefined);
            setSubscribers([]);
        }
    }, [session]);

    const toggleAudio = useCallback(() => {
        if (publisher) {
            publisher.publishAudio(!audioEnabled);
            setAudioEnabled(!audioEnabled);
        }
    }, [publisher, audioEnabled]);

    const toggleVideo = useCallback(() => {
        if (publisher) {
            publisher.publishVideo(!videoEnabled);
            setVideoEnabled(!videoEnabled);
        }
    }, [publisher, videoEnabled]);

    useEffect(() => {
        return () => {
            leaveSession();
        };
    }, [leaveSession]);

    return (
        <Container>
            {session === undefined ? (
                <Button onClick={joinSession}>Join Session</Button>
            ) : (
                <>
                    <VideoGrid>
                        {publisher && <VideoPlayer streamManager={publisher} />}
                        {subscribers.map((sub, i) => (
                            <VideoPlayer key={i} streamManager={sub} />
                        ))}
                    </VideoGrid>
                    <Controls>
                        <Button onClick={toggleAudio}>
                            {audioEnabled ? 'Mute' : 'Unmute'}
                        </Button>
                        <Button onClick={toggleVideo}>
                            {videoEnabled ? 'Stop Video' : 'Start Video'}
                        </Button>
                        <Button onClick={leaveSession}>Leave Session</Button>
                    </Controls>
                </>
            )}
        </Container>
    );
};

export default VideoRoom;

src/App.tsx 수정

import React from 'react';
import VideoRoom from './components/VideoRoom';
import styled from 'styled-components';

const AppContainer = styled.div`
    width: 100%;
    height: 100vh;
`;

function App() {
    return (
        <AppContainer>
            <VideoRoom />
        </AppContainer>
    );
}

export default App;

package.json scripts 수정

{
  "scripts": {
    "start": "HTTPS=true SSL_CRT_FILE=ssl/localhost.crt SSL_KEY_FILE=ssl/localhost.key react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

실행

npm start

web12-MafiaCamp

MafiaCamp

📔소개

🎯프로젝트 규칙

💻프로젝트 기획

🍀기술 스택

📚그룹 회고

🌈개발 일지

🗒️개발 일지

🍀문제 해결 경험

🔧트러블 슈팅

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

💾 WebRTC ‐ Nest.js와 React로 하는 간단 화상채팅 예제

학습하기 앞서...

1. OpenVidu 2.30.0 설치

2. .env 수정

3. ssl 인증을 위한 nginx 설정

4. 개발 환경용 SSL 인증서 생성

5. OpenVidu 실행/관리 명령

6. 실행 에러 핸들링(MacOS 해당)

6. Volume 에러 처리

7. Nginx 재설정

8. OpenVidu 대시보드 접속

9. nest 연동

10. React 연동

MafiaCamp

Clone this wiki locally