간단하게 알아보는 openVidu v3

서론

 지금 진행 중인 프로젝트에서, WebRTC를 이용한 음성+화상을 주고받을 수 있는 원격 방을 만드는 매커니즘 구현을 담당하게 되었다. WebRTC를 실제로 구현하기 위해 공부해본 사람이라면 알겠지만, WebRTC 기술을 실적용하기 위한 각종 서버, 플랫폼 등은 아주 다양한 편이다. 어떤 것을 사용해야 프로젝트의 기한을 맞출 수 있을까 고민하던 참에, WebRTC를 기반으로 한 실시간 화상통화 구현을 도와주는 플랫폼, openVidu의 존재를 알게 되었다. WebRTC를 심도있게 공부하여 처음부터 구현하거나, low-level부터 구축해나가는 건 너무 오랜 시간이 걸릴 것 같아, openVidu를 기반으로 기능을 구현하면 좋겠다고 결론을 내렸다.

 

 그런데, 이 openVidu... 2024년 6월에 v3가 출시되었다. 튜토리얼 프로그램을 이용해보았을 때, 필요한 기능을 구현하는데에는 문제가 없을 것이라 판단해, v3를 사용해보는것도 나쁘지 않겠다는 생각이 들었다. 다만, 출시된 게 이 글이 쓰인 시점으로부터 약 1달 전이다. 때문에 한국은 물론 외국 웹에까지, openVidu v3에 대한 글은 거의 전무하다. 그런고로, 이번 글에서는 openVidu v3에 대한 공식 문서의 내용을 간단히 정리하고, Java(SpringBoot)+React를 이용한 튜토리얼을 직접 실행해보기로 했다.

WebRTC란?

 들어가기 전에, openVidu가 기반으로 하고있는 WebRTC가 무엇인지 가볍게 알아보자. WebRTC(Web Real-Time Communication)란, 웹 브라우저와 기기 간 실시간 음성, 텍스트 및 화상 통신을 가능하도록 하는 오픈 소스 프로젝트이다. 웹 브라우저를 통해 직접 P2P 통신을 하기 때문에, 통신을 이용하는 기기에서는 추가적인 플러그인이나 어플리케이션을 설치하지 않아도 통신이 가능하다고 한다. 말만 들어서는 참 간단해보이는데, 인터넷 이곳저곳을 뒤져보면... 제대로 사용하기 위해서는 아주 많은 노력과 지식이 필요한 오픈 소스라는 걸 알 수 있다. 어중간한 구현으로는 통신이 자꾸 끊기는 등, 불안정한 형태가 되어버리기도 한다는 것 같다.

 WebRTC는 서버와 peer의 형태가 어떻게 되어있느냐에 따라 Mesh, SFU, MCU같은 형식으로 나뉘고, 서버를 구축할 때에는 시그널링 서버, STUN 서버, TURN 서버 등을 만들어야 한다고 한다. 이 글에서는 플랫폼을 이용해 WebRTC를 이용하는 방법을 알아볼 예정이기에 생략하지만, 한 번 쯤은 찾아보는 걸 추천한다.

openVidu v3란?

 openVidu는 WebRTC를 기반으로 여러 화상통화 서비스를 개발하기 편하게 해주는 플랫폼이다. 그 중에서도 한 달 전에 출시된 openVidu v3는 LiveKit이라는 WebRTC infrastructure를 기반으로 하고 있으며, SFU 서버로는 mediasoup를 사용하는 플랫폼이다. (참고로, LiveKit과 mediasoup 둘 다 오픈 소스 프로젝트이다.) 특히 LiveKit은 기반으로 삼은 오픈 소스이기 때문에, LiveKit과 호환되도록 설계된 어플리케이션은 openVidu v3와 무조건 호환된다고까지 한다. 그래서인지, openVidu v3의 여러 문서를 살펴보면, 자세한 내용은 LiveKit의 API 문서를 참고하라는 멘트를 많이 볼 수 있다.

v3 vs v2

openVidu의 개발자들이 굳이굳이 v2에서 v3로 버전을 올려 프로그램을 배포한 이유가 무엇일까? 공식 포럼에 올라온 공지글을 보면, v2와 v3 사이에는 제법 많은 차이점이 있음을 알 수 있다.

1. SFU 서버의 변경 : v2는 Kurento라는 SFU 서버를 기반으로 하고 있다. Kurento도 openVidu 개발자들이 제작한 SFU였고, 그 위에 openVidu라는 플랫폼을 개발해 사용을 용이하게 만든 것이라고 한다. 그런데, 적어도 이들이 판단하기에, Kurento는 낡은 프로그램이 되었고, 명백한 성능의 한계를 가지게 되었다. 그래서 v3에서는, 내부 서버를 Kurento에서 mediasoup로 변경하기로 했다고 한다.
2. LiveKit의 적용 : v2는 LiveKit이 적용되어있지 않지만, v3에는 적용되어 있다. 그 덕에, v3는 LiveKit을 기반으로 설계된 서버와 클라이언트라면 그대로 사용할 수 있다(는 것 같다). 찾아보니 LiveKit은 chatGPT로 유명한 openAI에서도 사용하고 있는 오픈 소스라고 한다.

 여러모로 v3는 v2보다 요즘 대세를 따르기 위해 새롭게 개편된 플랫폼이라는 점을 알 수 있다. 다만, 아직 지원되지 않는 기능이 있으니 유의해야 한다. 2024년 7월 말을 기준으로, 이하의 기능은 아직 지원하지 않고 있다.

• IP Cameras
• Speech To Text

 이 외의 자세한 내용은 위에서 링크했던 공지글 원문을 참고하길 바란다.

구조

 openVidu v3를 기반으로 구축된 어플리케이션은 3가지 부분으로 나눌 수 있다.

• openVidu deployment : openVidu에서 제공하는, 실시간 화상/음성 통화 기능을 구현하기 위해 필요한 모든 infrastructure에 해당한다. LiveKit 서버와 mediasoup 서버를 기반으로 하고 있으며, 사용자는 이 deployment에 무엇이 들었는지 알 필요가 없다. (원문에서는 'be treated as a black box'라는 표현이 쓰였다.) 

   하지만 아예 신경을 안 쓸 수는 없는 게, docker 기반으로 deployment를 사용할 때 각종 포트를 먹어치우는 돼지가 된다. (컨테이너가 한 9개정도 올라간다.) 실제로 프로젝트를 배포하려면, 포트 충돌은 조심해야하지 않을까 싶다...

• Application client : 흔히 말하는 프론트엔드 부분이다. LiveKit client SDK를 기반으로 server와 deployment와 통신을 한다. 화상통화 방에 입장하기 위해서는, server에서 발급해준 토큰이 필요하다.
• Application server : 흔히 말하는 백엔드 부분이다. 클라이언트와 비슷하게, LiveKit server SDK를 기반으로 deployment와 통신을 한다. openVidu v3를 통해 화상통화를 구현하려고 한다면, server는 최소한 다음 두 가지 기능을 구비하고 있어야 한다 : 토큰 발급, 룸 참여. 

튜토리얼 체험해보기

 백문이 불여일견이다. 이론도 이론이지만, 직접 돌아가는 웹 화상통화 튜토리얼을 구동해보면 좀 더 감이 오지 않을까? 싶어, 공식 문서의 튜토리얼을 실습하는 법을 간단히 정리해보기로 했다.

 위에서 정리했듯, openVidu v3를 이용한 서비스는 3가지 구성요소가 필요하다. 그 3가지를 차근차근 구축해보자.

Deployment 가져오기

 openVidu v3의 핵심, deployment를 띄워두어야 프로그램이 동작할 수 있다. 공식 홈페이지를 보면 deployment에는 다양한 종류가 있는데, 여기에서는 간단한 테스트를 하는 것이니 local deployment 방식을 사용할 예정이다. local deployment를 위해서는, 자신의 컴퓨터에 docker가 깔려있어야 하니 없다면 먼저 깔아두고 시작하자.

 참고로 여기에서는 window 11을 기준으로 설명한다. 튜토리얼 원문은 여기!

 튜토리얼을 보면 community와 pro 버전이 따로 설명되어있을텐데, 우선은 community를 기준으로 설명한다. pro는 유료버전이기 때문이다. 이 글이 쓰인 시점에선 openVidu v3가 beta 버전이기 때문에, pro까지 무료로 사용할 수 있긴 하지만... 언젠가는 유료가 될 테니까.

 

 일단은, deployment를 위한 파일들이 담긴 git repository를 가져온다.

git clone https://github.com/OpenVidu/openvidu-local-deployment

 

 클론한 폴더 내에서 community 폴더에 들어간 후, window용 bat을 실행하자. 이 bat 파일은 환경변수에 대한 정보가 담긴 .env 파일 내의 LAN_PRIVATE_IP, 그러니까 현재 기기의 private ip 설정을 따오는 작업을 수행한다.

cd openvidu-local-deployment/community
.\configure_lan_private_ip_windows.bat

 

 이후 이 내부의 compose 파일을 기반으로 하여 docker compose를 하면 끝이다. 만약 백그라운드로 실행하고 싶다면, 맨 뒤에 -d 옵션을 붙여주자.

docker compose up

 

 여러 이미지가 pull되고, 정상적으로 실행이 끝났다면 아래와 같은 메시지를 볼 수 있을 것이다.

설정 다 됐으니 이용하라는 아주 기쁜(!) 메시지이다.

 이 메시지를 보았다면, 이제 deployment와 통신할 수 있는 환경이 구축된 것이다! 웹을 통해 Developer UI에 접속하면, 개발에 필요한 각종 정보가 정리되어있다. deployment의 서비스에 접근할 수 있는 포트와 Developer UI 페이지의 포트가 동일해서, 제법 직관적이라는 느낌이다.

가린건 local ip다.

Application Server 가져오기

 deployment도 실행시켰으니, 다음으로는 server를 실행시켜보자. 여기에서는 Java-SpringBoot를 기반으로 서버를 실행시켜보겠다.

 우선은 서버 예시가 담긴 git repository를 가져오자.

git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git

 

 이후 openvidu-livekit-tutorials/application-server/java 경로에 있는 파일을 기반으로, SpringBoot 프로젝트를 실행시켜주면 된다. 공식 문서에서는 mvn이라는 명령어를 통해 프로젝트를 바로 실행시켰는데, 나는 그냥 intellij에서 프로젝트를 열어 실행시켰다.

 프로젝트 내부를 보면, 기본 Application 파일 외에는 심플한 Controller밖에 없다. 위의 createToken은 룸 입장을 위한 토큰 발급을 해주는 API이고, 아래는 webhook라는 걸 수령하는 부분이다.(참고로 webhook는 화상 방에서 발생하는 이벤트를 알려주는 통신이다.)

Application Client 가져오기

 마지막으로, 서비스의 앞단이 되어줄 client를 가져오자. 여기에서는 React를 기반으로 client를 사용해보겠다.

 위에서 clone한 프로젝트의 내부에, openvidu-livekit-tutorials/application-client/openvidu-react 루트로 가 보면 React 프로젝트가 구성되어있다. 필요한 의존성을 다운받은 후, 실행하기만 하면 모든 작업은 완료된다.

npm install
npm run

 

 서버 쪽 프로그램은 상당히 간단했지만, 이 쪽은 조금 복잡하다. 나도 아직 다 파악하지는 못한지라, 자세한 설명은 다음에 기회가 되면 해보는 걸로 하겠다. 간단하게만 소개하자면 다음과 같다.

• AudioComponent.tsx, VideoComponent.tsx : 각각 오디오/비디오 송출에 관여하는 부분이다.
• App.tsx : openVidu v3를 이용하기 위한 매인 매커니즘을 관리하고, 화면을 구성하는 부분이다.

 무사히 실행했다면, 페이지로 들어가보자. 페이지에 들어가면, 참가자의 이름과 방의 이름을 적는 칸이 있다. 방의 이름은 단순히 이름으로서의 기능만 하는 게 아니고, openVidu v3에서 각각의 방을 구분할 때 사용하는 고유한 값이다.

openVidu는 신인가?

 통신 테스트를 위해 두 개의 탭을 띄운 후, 같은 이름의 방으로 접속해보면, 정상적으로 같은 방에 접속되는 것을 볼 수 있다. 다운로드하고 실행시키기만 했는데, 화상통화 기능이 바로 구현된 것이다!

마안약에 카메라가 안 된다면

 이 튜토리얼대로 따라했는데, 카메라가 정상 송출되지 않고 화면에 커다란 'x'자가 뜬 사람이 있을수도 있다. 나도 이 튜토리얼을 다시 할 때 그런 문제가 발생했었다. 호환성이나 프로그램 오류인 줄 알고 엄청 겁먹었지만, 다행히도 별 문제가 아니었다. 튜토리얼 프로그램에서는 사용할 카메라를 자동으로 가져오는데, 나의 경우에는 그렇게 가져온 카메라가 'mirametrix virtual camera'라는, 실제 카메라가 아닌 무언가였다. 그것을 비활성화하니 정상적으로 출력이 되었다. 나와 같은 경우일 수도 있으니, 한 번 확인해보길 추천한다.

마치며

 지금까지 openVidu v3에 대해 알아보고, 3가지 구성요소를 통해 실제 화상통화 기능을 사용해보는 법을 알아보았다. openVidu v3를 이용하기 위해 작성해야하는 코드는 대부분 Client 쪽에 몰려있는지라, 더 많은 공부가 필요할 것 같다. 여유가 된다면, Client쪽에서 openVidu를 이용하는 법에 대해 조금 더 알아보는 포스팅을 작성해보는 것도 좋을 것 같다.