[React] Openvidu Tutorial 따라하기

목적: Openvidu를 이용한 WebRTC 비디오 공유 연습
기술스택 : Python, React, Docker

Docker 컨테이너로 Openvidu 환경 세팅

$ docker run -p 4443:4443 --rm -e OPENVIDU_SECRET=MY_SECRET openvidu/openvidu-dev:2.25.0

잘 돌아간다.

Python Server 실행

1. Openvidu가 제공하는 Tutorial repo를 clone한다.

$ git clone https://github.com/OpenVidu/openvidu-tutorials.git -b v2.25.0

2. 연습을 위해 익숙한 언어로 서버환경을 셋팅하기 위해 파이썬 선택했다.

$ cd openvidu-tutorials/openvidu-basic-python

3. 가상환경 설정 및 활성화

$ python3 -m venv venv

$ . venv/bin/activate

4. Requirements 설치

$ pip install -r requirements.txt

5. 서버 실행

$ python3 app.py

로컬 서버도 잘 실행된다.

Mac에서 Address already in use 오류

 * Serving Flask app 'app' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
Address already in use
Port 5000 is in use by another program. Either identify and stop that program, or start the server with a different port.
On macOS, try disabling the 'AirPlay Receiver' service from System Preferences -> Sharing.

서버가 바로 실행되지 않고 위와 같은 오류가 발생했는데, 오류 내용을 읽어보면 기본적으로 5000 port로 서버를 열려고 시도해보니 이미 다른 프로그램이 사용중이라는 뜻으로 보인다.
알고보니 macOS 몬터레이 이후 5000번 port로 Airplay 연결을 한다고...
프로세스를 종료하는 등 다른 해결방법이 있지만, Airplay를 매일 사용하는 입장에서 괜히 관련 건드리기는 싫어서 서버 포트를 임의로 8000번으로 지정해주었다.

# app.py

...

if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=8000)

더 많은 해결방법 - https://algoroot.tistory.com/44

React Server 실행

1. React 서버 실행을 위해 아래 폴더로 이동한다.

$ cd openvidu-tutorials/openvidu-react

2. 패키지 설치 및 서버 실행

$ npm install

$ npm start

error:03000086:digital envelope routines::initialization error 오류

...

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

React script가 OpenSSL 3 규격이 맞지 않아서 생기는 문제로, package.json 수정으로 간단히 해결할 수 있다.

// package.json
...

  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",

...

아까 서버 포트를 8000번으로 바꿔줬으므로, 서버 URL도 수정해준다.

// App.js
...

const APPLICATION_SERVER_URL = "http://localhost:8000/";

...

잘 켜진다.

영상도 잘 들어오긴 하지만,
다중접속이 잘 안되는걸 보니 조금 문제가 있는 듯 하다.
이 부분은 차차 해결하는걸로..

출처

https://docs.openvidu.io/en/stable/tutorials/openvidu-react/