[WebRTC] 웹 화면공유, 화상회의

메타버스플랫폼내의 화상회의나 화면공유에대한 방법을 찾다가 알게되었고 유용한것 같아서 작성하게 되었다.

WebRTC

정의

WebRTC(Web Real-Time Communication)은 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술입니다. WebRTC를 구성하는 일련의 표준들은 플러그인이나 제 3자 소프트웨어 설치 없이 종단 간 데이터 공유와 화상 회의를 가능하게 합니다.

 

웹 브라우저 기반의 통신 방식인 WebRTC는 구글이 오픈 소스화한 프로젝트에서 기원하였다. 그 뒤로 국제 인터넷 표준화 기구가 프로토콜 표준화 작업을, W3C가 API 정의를 진행하였다.

 

간단하게 말하면 웹 브라우저 상에서 어떠한 플러그인도 없이 화상채팅과 화면공유및 데이터교환을 가능하게 하는기술이다.

 

WEB RTC 통신원리

WebRTC Architecture

JSEP architecture

WebRTC에는 세가지 API가 구현되어 있다

- MediaStream (aka getUserMedia)

    사용자의 카메라와 마이크 같은 곳의 데이터 스트림에 접근
- RTCPeerConnection

    암호화 및 대역폭 관리를 하는 기능을 가지고 있고, 오디오 또는 비디오 연결을 담당함
- RTCDataChannel

    일반적인 데이터 P2P통신

 

 

아직 어떠한 기술인지 감이 오지않는다면 바로 밑의 사이트를 들어가서 체험해보자

WebRTC Screen Sharing | Plugin-free

1. 사이트를들어가서 Share Your Screen 버튼을 누르고 창을선택한다.  (Streamer 입장)

   - 사이트를 들어갈때 #7882385487995857 과같은 무작위 해시코드가 붙게되는데 이것으로 방 번호를 구별한다.

 

2. 다른사람은 해당사이트 전체링크를 알기만하면 들어와서 공유된화면을 볼 수 있다. (최대10인)

    (시청자입장)

 

 

설명문서

1. https://developer.mozilla.org/ko/docs/Web/API/WebRTC_API

 

2. https://www.html5rocks.com/ko/tutorials/webrtc/basics/#simpleRTCPeerConnectionExample

 

 

예제 사이트(demo)

  - Screen-sharing (화면공유)

1. https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/

2. https://webrtclab.herokuapp.com/screen-share/

 

 - Camera

1. https://webcamtoy.com/app/

2. http://idevelop.ro/ascii-camera/

 - Audio

1. http://webaudiodemos.appspot.com/