Callback

Web 버전의 Kakao i Connect Live SDK에서 제공하는 Callback 메서드는 다음과 같습니다.

공통

일대일 통화, 방송, 그룹 통화에서 공통적으로 사용되는 Callback 메서드는 다음과 같습니다.

onInit()

onInit() Callback 메서드는 SDK가 Kakao i Connect Live 서버에 정상적으로 접속하여 방송 또는 통신 인프라를 사용할 준비가 완료되었을 때 호출됩니다. onInit() 메서드는 일반적인 경우에는 사용되지 않으며, 디버깅(Debugging) 용도로만 사용됩니다.

코드예제onInit() Syntax

const listener = {
  onInit() {
  ...   // 서비스에 맞게 구현
  }
}

onClose()

onClose() Callback 메서드는 사용자 또는 상대방이 명시적으로 close() 메서드를 호출하거나, 네트워크 이상 등으로 연결이 종료될 때 호출됩니다. onClose() Callback이 호출되면 Remon 클래스에서 사용했던 모든 자원들의 연결이 해제됩니다.

코드예제onClose() Syntax

const listener = {
  onClose() {
  ...   // 서비스에 맞게 구현
  } 
}

onError()

onError() Callback 메서드는 Remon 클래스 동작 중 에러가 발생했을 때 호출됩니다.

코드예제onError() Syntax

const listener = {
  onError(error) {
  ...   // 서비스에 맞게 구현
  }
}

onStat()

사용자는 간혹 자신 또는 상대방의 네트워크 문제로 인하여 통화 품질이 안 좋거나 끊어진 상황에서도 네트워크 문제가 아닌 서비스 문제라고 생각하고 불만을 제기할 수 있습니다. 해당 경우에는 사용자에게 서비스 문제가 아닌 네트워크 문제임을 사전에 알려주거나 또는 다양한 UI 처리를 통해 정확한 안내를 하는 것이 좋습니다.

네트워크 상황 등에 따른 미디어 품질 문제를 정확하게 파악하기 위해서는 onState(report) Callback 메서드를 통해 통화 또는 방송 상태를 알 수 있는 report를 수신할 수 있습니다. report는 사용자가 remon 클래스 생성 시에 설정한 statInterval 간격을 기준으로 제공됩니다. 해당 report는 네트워크 상황과 같은 미디어 품질을 나타내기 때문에 사용자에게 로딩 UI 처리 등을 안내하는 경우에 유용하게 사용할 수 있습니다. report에 들어오는 값은 현재 통화 품질(음성 또는 영상)에 대해 다음과 같이 총 다섯 단계로 구분되어 표시됩니다. 현재 이러한 통화 품질 정보는 5초에 한 번씩 받을 수 있으며, result에서 받을 수 있는 여러 정보 중 result.rating은 네트워크 상황에 따른 통합적인 통화 품질 정보를 의미합니다.

코드예제onStat() Syntax

const listener = {
 onStat(result){
   const stat = `State: l.cand: ${result.localCandidate} /r.cand: ${result.remoteCandidate} /l.res: ${result.localFrameWidth} x ${result.localFrameHeight} /r.res: ${result.remoteFrameWidth} ${result.remoteFrameHeight} /l.rate: ${result.localFrameRate} /r.rate: ${result.remoteFrameRate} / Health: ${result.rating}`
   console.log(stat)
 }
}

방송

방송 서비스에서 제공하는 Callback 메서드는 다음과 같습니다.

onCreate()

onCreate() Callback 메서드는 방송 Caster에게만 사용되며, Caster는 create() 메서드를 통해 방송을 정상적으로 생성하고 송출합니다. onCreate() 메서드는 고유 구분자인 Channel ID를 생성하며, Viewer는 해당 Channel ID를 사용하여 방송에 접속할 수 있습니다.

코드예제onCreate() Syntax

const listener = {
  onCreate(channelId) {
  ...   // 서비스에 맞게 구현
  }
}

const cast = new Remon({ listener })
cast.createCast()

onJoin()

onJoin() Callback 메서드는 방송에 Viewer에게만 사용하며, Viewer가 join() 메서드의 Channel ID를 통해 연결이 완료되어 미디어 시청이 가능한 상태가 되면 호출됩니다.

코드예제onJoin() Syntax

const listener = {
  onJoin(channelId) {
  ...   // 서비스에 맞게 구현
  }
}

const cast = new Remon({ listener })
cast.joinCast('{CHANNEL_ID}')

통화

통화 서비스에서 제공하는 Callback 메서드는 다음과 같습니다.

onConnect()

onConnect() Callback 메서드는 통화에서만 사용됩니다. 채널을 생성하여 통화를 요청하는 Caller와 해당 채널에 접속하여 요청에 응답하는 Callee의 동작이 다른 경우가 많기 때문에, 개발자는 Caller 또는 Callee 여부에 대한 상태를 관리에 주의해야 합니다.

• Caller는 connect() 메서드를 통해 채널을 새로 만들고, 상대방의 입장을 기다립니다.
• Callee는 connect() 메서드를 통해 이미 만들어진 채널에 Channel ID 정보를 가지고 접속합니다.
  • Callee가 정상적으로 채널에 연결되면 onConnect() 메서드가 호출되지만, 곧바로 발생하는 onComplete() 메서드를 사용하는 것을 권장합니다.

코드예제onConnect() Syntax

const listener = {
 onConnect(channelId) {
  if (isCaller) {
     ...   // 서비스에 맞게 구현
     }
  }
}

const call = new Remon({ listener })
call.connectCall('{CHANNEL_ID}')

onComplete()

onComplete() Callback 메서드는 통화에서만 사용되며, Caller와 Callee가 연결이 완료되어 미디어 전송이 가능한 상태가 되면 호출됩니다.

코드예제onComplete() Syntax

const listener = {
  onComplete() {
  ...   // 서비스에 맞게 구현
  }
}

Config

Kakao i Connect Live SDK는 Remon 객체에 직접 설정 정보를 지정할 수 있습니다. 이러한 설정 정보를 별도의 객체에 생성해 두고, Remon 객체를 생성할 때마다 해당 설정값을 사용하고자 하거나 또는 다른 화면에서 설정값을 방송 또는 통신 화면으로 전달해야하는 경우에 Config 값을 사용할 수 있습니다.

View 설정

영상이 표출될 View를 지정하는 설정입니다. View 설정을 하지 않으면 영상이 보이지 않습니다.

코드예제View 지정

<video id="remoteVideo" autoplay controls></video>
<video id="localVideo" autoplay controls muted></video>
<script>
  const config = {
     view: {
     remote: '#remoteVideo', local: '#localVideo'
     }
  }
</script>

영상 활성 여부 설정

자신과 상대방 영상을 활성화 또는 비활성으로 설정할 수 있습니다. 비활성으로 설정 시, 영상은 빈 프레임으로 출력되어 검은색 화면으로 표시됩니다.

코드예제영상 활성 여부 설정

remon.pauseLocalVideo(bool)       // true로 설정 시 자신의 영상을 검은색으로 표시
remon.pauseRemoteVideo(bool)    // true로 설정 시 상대방의 영상을 검은색으로 표시 

음성 활성 여부 설정

자신 또는 상대방 음성을 활성화 또는 비활성으로 설정할 수 있습니다. 비활성으로 설정 시 음소거(mute)가 적용됩니다.

코드예제음성 활성 여부 설정

remon.muteLocalAudio(bool)        // true로 설정 시 자신의 음성을 음소거
remon.muteRemoteAudio(bool)     // true로 설정 시 상대방의 음성을 음소거

Media

음성 방송/통화 설정

비디오를 사용하지 않고, 음성 방송 또는 음성 통화 서비스를 만들 수 있습니다.

코드예제음성 방송/통화 설정

// 비디오를 사용하지 않고 음성만 사용 시 
const config = {
 media: {
   audio: true,
   video: false // false로 설정 시 비디오를 사용하지 않음
 }
}

// 비디오와 오디오를 모두 사용 시
const config = {
 media: {
   audio: true,
   video: true
 }
}

비디오 옵션 설정

WebRTC는 기본적으로 네트워크나 단말의 상태에 따라 해상도와 Frame Rate 등을 유연하게 변화시키면서 품질을 유지합니다. 따라서 해상도를 특정값으로 설정하더라도 설정된 해상도가 정확하게 유지되지 않을 수 있습니다. 이러한 경우에는 코덱 등의 옵션을 변경하여 해상도를 최적으로 설정할 수 있습니다.

코드예제비디오 옵션 설정

const config = {
 media: {
   video: {
     width: {max: '640', min: '640'},
     height: {max: '480', min: '480'},
     codec: 'H264',
     frameRate: {max:15, min:15},
     facingMode: 'user',
     maxBandwidth: '3000'
   }
 }
}

오디오 타입 설정

오디오 출력 시 주변 소음을 제거하는 기능과 관련한 작동 유형을 설정할 수 있습니다.

코드예제오디오 타입 설정

let config = {
   media: {},
   rtc: {audioType: "music"}
};

오디오 추가 설정

오디오에 다양한 세부 항목을 추가로 설정할 수 있습니다. 오디오 추가 설정 항목은 방송 또는 통화 환경과 목적에 따라 최적의 설정이 다를 수 있으므로, 설정 항목들을 적절히 조합하여 사용하시기 바랍니다.

코드예제오디오 추가 설정

let config = {
 media: {
   audio: {
     channelCount: 2,
     maxBandwidth: 128,
     autoGainControl: false,
     echoCancellation: false,
     noiseSuppression: false,
   }
 },
 rtc: {
   audioType: "music"
 }
};

Debug

Debug(디버그) 레벨을 설정하여 WebRTC의 세부적인 로그를 출력할 수 있습니다. 해당 레벨 모드는 RemonConfig를 사용하여 통화 또는 방송을 생성하는 경우에만 가능합니다. VERBOSE 로그 레벨로 갈수록 더욱 자세한 내용을 확인할 수 있습니다.

코드예제Debug Syntax

const config = {
 dev:{
   logLevel: 'INFO' // SILENT, ERROR, WARN, INFO, DEBUG, VERBOSE 순으로 로그 레벨을 설정
 }
}