[html] WebRTC 화면 공유

26 Dec 2023

html

WebRTC(Web Real-Time Communication)는 실시간으로 음성, 영상 및 데이터를 브라우저와 모바일 애플리케이션 간에 통신할 수 있도록 하는 프로토콜이다. 이 기술은 브라우저에서 플러그인 없이 비디오 채팅, 화상 회의, 화면 공유 등을 가능하게 한다.

화면 공유는 WebRTC를 활용한 다양한 형태의 실시간 협업 애플리케이션에서 매우 중요하다. 이를 구현하려면 다음과 같은 단계가 필요하다.

1. getUserMedia API를 사용하여 화면 공유 권한 요청

getUserMedia API를 이용하여 사용자의 미디어 및 장치에 접근할 수 있다. 화면 공유를 구현하기 위해서는 사용자의 화면에 접근할 권한을 획들해야 한다. 아래는 getUserMedia API를 사용하여 화면 공유 권한을 요청하는 예제 코드이다.

navigator.mediaDevices.getDisplayMedia({ video: true })
  .then(stream => {
    // 화면 공유 스트림을 얻은 후에 수행할 작업을 여기에 작성
  })
  .catch(err => {
    // 에러 처리
  });

2. Peer-to-Peer 연결 설정

WebRTC에서는 Peer-to-Peer 연결을 설정하여 미디어 스트림을 공유한다. 이 과정에는 시그널링 및 ICE 연결이 포함된다. 시그널링 서버는 연결을 설정하는 데 사용되며, ICE(Interactive Connectivity Establishment)는 서로 다른 네트워크 간의 연결을 만드는 데 사용된다.

3. WebRTC API를 사용하여 화면 공유 스트림 전송

WebRTC API를 사용하여 화면 공유 스트림을 전송한다. 이때 RTCPeerConnection을 사용하여 Peer간에 미디어 스트림을 교환한다. 아래는 WebRTC API를 사용하여 화면 공유 스트림을 전송하는 예제 코드이다.

// RTCPeerConnection 설정
let pc = new RTCPeerConnection();

// 화면 공유 스트림을 추가
stream.getTracks().forEach(track => {
  pc.addTrack(track, stream);
});

// Offer 생성
pc.createOffer()
  .then(offer => {
    // Offer를 시그널링 서버로 전송
  })
  .catch(err => {
    // 에러 처리
  });

위 단계들을 따르면 WebRTC를 사용하여 화면 공유를 구현할 수 있다.

참고문헌:

Mozilla Developer Network. “MediaDevices.getUserMedia()”. https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
WebRTC 공식 문서. https://webrtc.org/start/

위 예제 코드와 단계들은 WebRTC를 활용하여 화면 공유를 구현하는데 도움이 될 수 있다.