[webRTC] openVidu 시작하기

webRTC란?

webRTC(Web Real-Time Communication)

• 웹 브라우저가 서로 통신할 수 있도록 설계된 API
• 웹 브라우저 상에서는 어떠한 플러그인도 필요 없이 음성 채팅과 화상채팅, 데이터 교환까지도 가능하게 하는 기술
• WebRTC 기술은 P2P(Peer-to-Peer) 통신에 최적화

시그널링(Signaling)

RTCPeerConnection들이 적절하게 데이터를 교환할 수 있게 처리해 주는 과정
이를 수행하는 서버 = 시그널 서버
전이중 통신을 지원하는 websocket 으로 이를 구현하는 것이 가장 적합
세션제어메세지, 네트워크 구성, 미디어 기능 정보 교환
시그널링은 P2P 스트리밍 시작 전에 성공적으로 완료되어야 함

• 세션 제어 메세지 : 통신을 초기화하거나 닫고 오류를 보고
• 네트워크 구성 : 외부세계에 컴퓨터의 IP 주소와 포트는 무엇인지 파악
• 미디어 기능 : 브라우저와 통신하려는 브라우저에서 처리할 수 있는 코덱과 해상도는 무엇인지 파악

서버

서버는 단지 웹 브라우저를 특정하기 위한 시그널링(Signaling)과정으로만 쓰임
시그널링을 마친 뒤 실제 데이터는 P2P 혹은 중개 서버를 통해 주고받음
서버에서는 websocket(TCP) 사용 (cf. webRTC는 UDP)

openVidu란?

• 웹 또는 모바일 애플리케이션에서 화상 통화를 쉽게 추가할 수 있는 플랫폼
• Kurento기반의 중개 서버를 애플리케이션에 쉽게 추가할 수 있도록 완전한 기술스택을 제공
  Kurento : WebRTC 미디어 서버 역할을 함과 동시에 WebRTC 기술을 이용해 애플리케이션 개발을 돕는 클라이언트 API세트
  

openVidu tutorial 시작하기

• docker 다운
  실행한 docker 버전 20.10.12

• npm 다운
  실행한 npm 버전 8.1.2

openVidu tutorial 링크
https://docs.openvidu.io/en/stable/tutorials/openvidu-library-react/

1. 튜토리얼 파일 clone하기

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

여러 파일이 clone 되었을 것이다

그중 우리가 사용하고 싶은건 openvidu-library-react

2. openvidu-library-react 폴더로 이동 후 파일 실행

cd openvidu-tutorials/openvidu-library-react
npm install
npm start

3. 다른 터미널 하나 더 열고 도커 run 해주기

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

이제 join 하면 잘 될것이다!

참고

화면이 안켜진다면 chrome 권한 설정 확인해보자!

webRTC란?

• https://github.com/Heongilee/Therapist/discussions/186
• https://medium.com/@hyun.sang/webrtc-webrtc%EB%9E%80-43df68cbe511
• https://bloggeek.me/webrtc-vs-websockets/
• https://gh402.tistory.com/38
• https://velog.io/@heejinkim0812/WebRTC%EB%9E%80