영상채팅 API

영상채팅을 구현할 때 필요한 VChatCloud JavaScript SDK의 주요 API들을 소개해요. 각 함수의 사용법과 예제 코드를 통해 쉽게 따라할 수 있도록 설명했습니다.

내 영상 설정하기 (setRTCLocalMedia)

내 카메라와 마이크를 연결해서 영상채팅을 시작할 준비를 해요. 영상채팅을 시작하기 전에 가장 먼저 호출해야 하는 함수예요.

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

이 함수를 호출하면 브라우저가 카메라와 마이크 사용 권한을 요청해요. 허용하면 지정한 video 태그에서 내 모습을 볼 수 있어요.

파라미터

파라미터	타입	설명
mediaElement	HTMLVideoElement	내 영상을 보여줄 HTML video 요소

상대방 영상 보기 (setRTCRemoteMedia)

다른 사람의 영상을 받아서 화면에 보여줘요.

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

clientKey는 다른 사람이 영상채팅방에 들어올 때 onJoinUser 같은 이벤트로 받을 수 있어요. 참가자마다 각각 다른 video 요소와 clientKey를 사용해서 호출해야 해요.

파라미터

파라미터	타입	설명
mediaElement	HTMLVideoElement	상대방 영상을 보여줄 HTML video 요소
clientKey	String	영상을 받을 상대방의 고유 ID

마이크 켜고 끄기 (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'는 화면 공유로 바꿔요