WebRTC

영상/음성 통화 및 화면 공유 API입니다. cb.webrtc.connect(...) 한 메서드로 1:1 / 그룹 통화 / 라이브 송출을 모두 처리합니다.

📌 SDK 에는 별도의 createRoom / joinRoom / Room 객체가 없습니다. 룸 ID 는 외부에서 관리하고 connect() 에 전달합니다. Connect Base 콘솔의 WebRTC 채널 설정에서 룸 ID 명명 규칙을 정의할 수 있습니다.

기본 사용 흐름

typescript

// 1) 로컬 미디어 스트림 획득 (브라우저 표준 API)
const localStream = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
})

// 2) WebRTC 시그널링 서버에 연결 + 룸 입장
await cb.webrtc.connect({
  roomId: 'live:room-123',     // 룸 ID
  userId: 'user-456',          // 표시용 식별자
  isBroadcaster: true,         // 송출자 / false면 시청자
  localStream
})

WebRTCConnectOptions:

옵션	타입	설명
`roomId`	string	룸 ID (필수)
`userId`	string	표시용 사용자 식별자 (선택)
`isBroadcaster`	boolean	송출자 여부 (기본 false)
`localStream`	MediaStream	송출할 로컬 스트림 (송출자만)

이벤트 핸들러

각 onXxx 메서드는 핸들러 제거 함수를 반환합니다.

typescript

// 다른 피어가 입장
const offJoined = cb.webrtc.onPeerJoined((peerId, info) => {
  console.log('피어 입장:', peerId, info)
})

// 원격 스트림 도착 — 새 video 요소 생성
const offStream = cb.webrtc.onRemoteStream((peerId, stream) => {
  const videoEl = document.createElement('video')
  videoEl.id = `remote-${peerId}`
  videoEl.autoplay = true
  videoEl.srcObject = stream
  document.body.appendChild(videoEl)
})

// 피어 퇴장
const offLeft = cb.webrtc.onPeerLeft((peerId) => {
  document.getElementById(`remote-${peerId}`)?.remove()
})

// 연결 상태 변경
const offState = cb.webrtc.onStateChange((state) => {
  console.log('연결 상태:', state)  // 'idle' | 'connecting' | 'connected' | 'disconnected'
})

// 에러
const offError = cb.webrtc.onError((error) => {
  console.error('WebRTC 에러:', error)
})

// 핸들러 정리 (cleanup)
function cleanup() {
  offJoined()
  offStream()
  offLeft()
  offState()
  offError()
}

미디어 제어 (오디오 / 비디오 ON/OFF)

typescript

cb.webrtc.setAudioEnabled(false)  // 마이크 음소거
cb.webrtc.setAudioEnabled(true)   // 음소거 해제

cb.webrtc.setVideoEnabled(false)  // 카메라 끄기
cb.webrtc.setVideoEnabled(true)   // 카메라 켜기

화면 공유

브라우저 표준 API 로 화면 스트림을 받은 뒤 replaceLocalStream 으로 교체합니다.

typescript

const screenStream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: true
})

cb.webrtc.replaceLocalStream(screenStream)

// 다시 카메라로 전환
const cameraStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
cb.webrtc.replaceLocalStream(cameraStream)

상태 조회

typescript

cb.webrtc.getState()       // WebRTCConnectionState
cb.webrtc.getRoomId()       // 현재 룸 ID
cb.webrtc.getPeerId()       // 내 peer ID
cb.webrtc.getChannelType()  // WebRTCMode

// 모든 원격 스트림 (peerId → MediaStream)
const remoteStreams = cb.webrtc.getAllRemoteStreams()

// 특정 peer 스트림
const peerStream = cb.webrtc.getRemoteStream('peer_xxx')

종료

typescript

cb.webrtc.disconnect()

ICE 서버 조회 (고급)

기본적으로 SDK 가 자동으로 ICE 서버를 조회합니다. 직접 받으려면:

typescript

const iceServers = await cb.webrtc.getICEServers()

실시간 (Realtime)

게임 (Game)