WebRTC API

WebRTC(Web Real-Time Communication)는 웹 브라우저 간에 별도의 플러그인 없이 실시간으로 음성, 영상, 데이터 통신을 가능하게 하는 기술입니다. 해당 문서에서는 VChatCloud의 WebRTC 기능을 사용하기 위한 JavaScript API를 설명합니다.

로컬 미디어 설정 (setRTCLocalMedia)

자신의 카메라, 마이크 등 미디어 장치를 비디오 요소에 연결하여 WebRTC 통신을 준비합니다. 이 함수는 화상 통화를 시작하기 전에 가장 먼저 호출되어야 합니다.

const localVideo = document.getElementById('local-video-element');
channel.setRTCLocalMedia(localVideo);

• 상세 설명

  • 이 함수를 호출하면 브라우저가 사용자에게 카메라 및 마이크 접근 권한을 요청할 수 있습니다.
  • 성공적으로 실행되면 지정된 HTMLVideoElement에서 자신의 비디오 화면을 볼 수 있습니다.

• 파라미터

파라미터	타입	설명
mediaElement	HTMLVideoElement	자신의 비디오 스트림을 표시할 HTML 비디오 요소입니다.

원격 미디어 설정 (setRTCRemoteMedia)

다른 참가자의 비디오 스트림을 수신하여 지정된 비디오 요소에 표시합니다.

const remoteVideo = document.getElementById('remote-video-element');
const userClientKey = '...'; // 참가자의 고유 clientKey
channel.setRTCRemoteMedia(remoteVideo, userClientKey);

• 상세 설명

  • clientKey는 다른 참가자가 채팅방에 입장했을 때 onJoinUser와 같은 이벤트를 통해 얻을 수 있습니다.
  • 각 참가자별로 별도의 비디오 요소와 clientKey를 사용하여 이 함수를 호출해야 합니다.

• 파라미터

파라미터	타입	설명
mediaElement	HTMLVideoElement	원격 참가자의 비디오 스트림을 표시할 HTML 비디오 요소입니다.
clientKey	String	비디오 스트림을 수신할 대상 참가자의 고유 clientKey입니다.

로컬 오디오 제어 (toggleRTCAudioControl)

자신의 마이크를 켜거나 끄는 기능(음소거/음소거 해제)을 제어합니다.

// 마이크 끄기 (음소거)
channel.toggleRTCAudioControl(false);

// 마이크 켜기 (음소거 해제)
channel.toggleRTCAudioControl(true);

• 상세 설명

  • false로 설정하면 자신의 오디오가 다른 참가자에게 더 이상 전송되지 않습니다.
  • true로 설정하면 오디오 전송이 다시 시작됩니다.

• 파라미터

파라미터	타입	설명
control	Boolean	true는 음소거 해제, false는 음소거를 의미합니다.

로컬 비디오 제어 (toggleRTCVideoControl)

자신의 카메라 영상 송출을 켜거나 끕니다.

// 카메라 끄기
channel.toggleRTCVideoControl(false);

// 카메라 켜기
channel.toggleRTCVideoControl(true);

• 상세 설명

  • false로 설정하면 자신의 비디오가 다른 참가자에게 더 이상 전송되지 않으며, 화면이 검게 표시될 수 있습니다.
  • true로 설정하면 비디오 전송이 다시 시작됩니다.

• 파라미터

파라미터	타입	설명
control	Boolean	true는 영상 송출 시작, false는 영상 송출 중단을 의미합니다.

미디어 소스 변경 (toggleRTCMedia)

비디오 소스를 카메라에서 화면 공유로, 또는 그 반대로 전환합니다.

// 화면 공유 시작
channel.toggleRTCMedia('display');

// 다시 카메라로 전환
channel.toggleRTCMedia('camera');

• 상세 설명

  • 'display'로 설정하면 브라우저가 어떤 화면(전체 화면, 특정 애플리케이션 창, 브라우저 탭)을 공유할지 묻는 창을 표시합니다.
  • 화면 공유 기능을 사용하면 발표나 협업 시 유용하게 활용할 수 있습니다.

• 파라미터

파라미터	타입	설명
media	String	변경할 미디어 소스를 지정합니다. 'camera' 또는 'display' 값을 사용할 수 있습니다.