[React / Typescript] Openvidu를 활용한 WebRTC 구현

프로젝트를 진행하면서 WebRTC 기술을 사용해야 하고 이를 프론트에서 구현을 해주어야 했다. 이 과정에서 자바스크립트가 아닌 타입스크립트를 사용하였기에 테스트 코드를 찾기도 어려웠고, 전부 예시나 튜토리얼이 자바스크립트로만 진행되었기에 어려움이 많았다.

특히 타입스크립트를 활용하지면 ESLint를 적용하니 모든 곳에서 에러가 발생해서 하나하나 일일이 맞춰서 뜯어 고치는 등 오랜 시간을 소요했기에 기록을 남기고자 작성한다.

---

WebRTC

https://webrtc.github.io/webrtc-org/press/

- Web Real Time Communication의 약자로 웹이나 앱에서 별다른 소프트웨어 없이 카메라와 마이크 등을 활용하여 커뮤니케이션을 할 수 있게 해주는 기술

- NAT 우회 과정인 시그널링을 통해 실시간으로 데이터를 교환할 수 있게 해주는 기술

 

Openvidu

https://openvidu.io/

- 웹이나 앱에서 화상 통화를 쉽게 할 수 있게 해주는 플렛폼

- Kurento 기반의 중개 서버를 애플리케이션에 쉽게 추가할 수 있도록 기술을 제공

※ 구현을 위해 참고한 사이트

- Openvidu 예시 코드 github : https://github.com/etsakas/openvidu-react-hello-world

- Openvidu 공식 제공 튜토리얼 : https://docs.openvidu.io/en/stable/tutorials/openvidu-react/

 

※ OpenVidu 테스트를 위해 필요한 환경 세팅

- OpenVidu와 연결하기 위한 Docker : https://www.docker.com/

- Docker응 사용하기 위한 WSL uBuntu : https://ubuntu.com/

 

도커를 사용하기 위한 명령어(ubuntu에서 사용)

// Docker 설치
sudo apt update
sudo apt install docker.io

// Docker 서비스 설치 및 등록
sudo systemctl start docker
sudo systemctl enable docker

// 에러가 발생하면 일부 명령어를 찾아 다시 테스트 해보는 것 추천

위 세팅을 완료했다면,아무 폴더에서 Bash를 열어서 아래의 명령어를 입력하면 된다. (2.18 버전의 Openvidu를 사용했음)

docker run -p 4443:4443 --rm -e OPENVIDU_SECRET=MY_SECRET openvidu/openvidu-server-kms:2.18.0

도커와 Bash를 확인했을 때 아래와 같이 나온다면 튜토리얼을 위한 환경 세팅 성공

위와 같이 세팅을 했다면 위의 github 코드를 통해 튜토리얼을 진행하면 아래와 같이 화면을 볼 수 있다.

테스트는 로컬 환경에서 진행하므로, 같은 페이지 2개를 열어서 똑같은 세션을 입력해서 입장하면

위와 같이 2개의 내 모습을 확인할 수 있다.

---

JavaScript → TypeScript

 

 

위 튜토리얼을 진행하는데 모든 것이 자바스크립트로 이루어져 있기에 타입스크립트 환경에서 사용하기 위해 많은 것을 고칠 필요가 있었다. 타입스크립트로 제공되는 테스트코드 찾기에 실패했고, 찾더라도 ESLint 오류로 많은 것을 뜯어 고쳐야 하기에 처음부터 하나씩 맞춰서 구현하기로 했고, 이를 변환하는 것에 성공했다.

해당 변환된 코드의 상세는 아래 내 github를 참고하면 된다.

https://github.com/edder773/React-typescript-webRTC

 

실제 베포시에는 베포 서버에 연동한 Openvidu URL에 맞춰서 아래 URL의 뒤 값만 변경해주면 바로 사용할 수 있다.

해당 코드의 화면은 위 튜토리얼과 동일하게 session에 값을 사용자에게 입력 받는 형태로 구성되어 있는데, 아래 부분의 코드에 의해 값이 변하게 된다.

만약 내가 서버에 접속했을 때, 바로 sesiion에 특정 값으로 공통적으로 등록하게 만들고 싶다면 !session 부분을 코드에서 제거하고, UseEffect를 이용해서 아래처럼 값을 넣어 바로 SessionId에 값을 넣어주면 바로 입장하도록 수정할 수 있다.

활용 예시로는 다른 페이지에서 화상 회의가 필요한 페이지로 넘어오면서 Props를 통해 SessionID를 전달받아 바로 넣을 수 있게 구성하는 등으로 활용할 수 있다.

또 참고사항으로 내가 수정한 타입스크립트 코드는 3명부터 화면의 구성이 바뀌도록 만들어놔서 스타일 관련 로직은 Session에서 취향에 맞게 수정하면 된다.(다만 세션에서 사람이 나갈 때는 화면 구성이 안바뀐다..)

Publisher는 내 화면이고, Subscriber는 접속한 다른 사람들의 화면이고 혹시 내 화면이 대칭으로 뒤집어 보인다면 Mirror 옵션이 True라서 그런 것이므로 전반적 코드 수정 시 참고하면 좋을 거 같다.

음소거 / 화면 끄기 등의 기능은 일부 옵션을 주면 설정할 수 있으니 잘 찾아서 적용하면 좋을것 같다.