SDK 개발 프로세스

Web 환경에서 Kakao i Connect Live SDK를 사용하여 일대일 통화(Live Call), 방송(Live Cast), 그룹 통화(Live Conference) 기능을 구현하는 프로세스는 다음과 같습니다.

그림Web SDK 개발 프로세스

표SDK 개발 프로세스

구분	세부 작업	필수 여부	설명
사전 작업	서비스 고유 정보 발급	`필수`	서비스 고유 정보인 Service ID와 Secret Key 값 발급
	프로젝트 생성	`필수`	웹 프론트엔드 개발 준비를 위한 프로젝트 생성
	SDK 설치	`필수`	npm 또는 스크립트를 추가하여 SDK 설치
Web SDK 개발	서비스 개발	`필수`	일대일 통화, 방송, 그룹 통화 서비스 별 개발 프로세스

안내
해당 문서는 Web 버전의 Kakao i Connect Live SDK 2.7.2 버전을 기준으로 작성되었습니다.

개발 요구 사항

Kakao i Connect Live SDK는 Internet Explorer(IE)를 제외한 WebRTC를 지원하는 모든 브라우저를 지원합니다. 브라우저별 최소 요구 사항은 다음과 같습니다.

표개발 최소 요구사항

구분	항목	최소 버전
`브라우저`	Chrome	28 이상 지원
`브라우저`	Firefox	22 이상 지원
`브라우저`	Safari	11 이상 지원
`브라우저`	Chrome Mobile	28 이상 지원

사전 작업

Kakao i Connect Live SDK를 사용하여 개발을 수행하기 전에 다음 작업이 꼭 진행되어야 합니다.

서비스 고유 정보 발급받기

Kakao i Connect Live SDK를 사용하기 위해서는 서비스 고유 ID인 Service ID와 Secret Key 값을 반드시 발급받아야 합니다. Service ID와 Secret Key는 프로젝트 생성 시에 자동 생성되며, 이들은 서비스(앱)별로 구분되어 사용량 측정 및 과금의 기준이 됩니다. 하나 이상의 애플리케이션을 만들 경우에는 앱의 개수만큼 Service ID와 Secret Key를 각각 발급받아야 합니다.

Kakao i Connect Live 홈페이지에서 [Console] 버튼을 클릭한 후, 회원가입을 진행합니다.
- 입력한 이메일 주소로 임시 비밀번호가 발송되며, 로그인 후 비밀번호 변경이 필요합니다.
[새 프로젝트 추가] 버튼을 클릭하여 새로운 프로젝트를 생성합니다.

해당 프로젝트에서 사용할 서비스 고유 정보인 Service ID와 Secret Key를 확인합니다. 표서비스 고유 정보

구분	필수 여부	항목
Service ID	`필수`	프로젝트 생성 시에 자동으로 생성되는 ID - 서비스 구분에 활용되는 유일값
Secret Key	`필수`	API 호출 시에 인증을 위한 필수값 - 보안상의 이유로 `*`로 표기되며, [보기] 아이콘을 클릭하여 확인 가능

주의
Service ID와 Secret Key 정보가 외부로 유출될 경우에는 해킹 등 악용의 소지가 발생할 수 있으므로 GitHub과 같은 코드 저장소에 노출되지 않도록 주의하시기 바랍니다.

프로젝트 생성하기

Kakao i Connect Live SDK는 브라우저 환경에서 작동하며, 일반적인 웹 프론트엔드 개발 준비가 필요합니다.

터미널을 실행하고 폴더를 생성한 후에 해당 폴더에 진입합니다.

코드예제폴더 생성
BASH
```
mkdir example
cd example
```
패키지 생성과 초기화 작업을 위해 다음 명령어를 실행합니다.

코드예제패키지 생성 및 초기화
BASH
```
npm init
```
Node.js를 이용한 간단한 웹 서버를 구축하고, 서버를 활성화합니다.

코드예제웹 서버 구축
BASH
```
npm i http-server
touch index.html
npx http-server               
# Open browser "localhost:8081"
```

SDK 설치하기

Kakao i Connect Live SDK는 1) npm를 통해 설치하거나, 2) 직접 스크립트를 추가하여 설치할 수 있습니다.

npm으로 설치

다음 명령어를 입력하여 npm에서 SDK를 설치하고 불러오기(Import)를 수행합니다.

npm 명령어를 통해 SDK를 설치합니다.

코드예제SDK 설치
BASH
```
npm i @remotemonster/sdk
```
해당 프로젝트 내에서 SDK 설치 파일을 사용하기 위해 ES6 모듈 패턴으로 SDK를 불러온 후 사용할 수 있습니다.

코드예제SDK 설치 파일 사용
BASH
```
import Remon from '@remotemonster/sdk'
```

직접 스크립트 추가

JSDelivr CDN을 통해 직접 스크립트를 추가하여 SDK를 설치합니다.

코드예제직접 스크립트 추가
HTML
```

<script src="https://cdn.jsdelivr.net/npm/@remotemonster/sdk/remon.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/@remotemonster/sdk@{버전명}/remon.min.js"></script> 
```
안내
2022년 3월 기준으로 SDK 최신 버전은 2.7.2 입니다.
- 특정 SDK 버전을 사용해야 할 경우에는 카카오엔터프라이즈 담당자에게 문의하시기 바랍니다.

Web SDK 개발

사전 작업을 완료하면, 본격적으로 SDK 개발을 시작할 수 있습니다.

일대일 통화

Remon 클래스를 통해 일대일 통화 기능을 쉽고 빠르게 구현할 수 있습니다. 일대일 통화 기능은 항상 두 명만 참여할 수 있으며, 일대일 통화방의 이름은 해당 Channel ID로 생성됩니다.

그림Web 일대일 통화 서비스 개발 프로세스

표일대일 통화 개발 프로세스

프로세스	필수 여부	행위자	설명
View 등록	`필수`	`All`	통화 중 자신과 상대방을 확인할 수 있는 View(뷰)를 등록
SDK 초기화	`필수`	`All`	서비스 고유 정보, View, Media에 대한 Config 객체 설정
Callback 구현	`선택`	`All`	이벤트 상태 확인을 위해 Callback 메서드
Remon 객체 생성	`필수`	`All`	설정된 Config 객체와 Callback 메서드로 Remon 객체 생성
채널 목록 조회 구현	`선택`	`Callee`	통화방에 입장하기 위해 채널 목록 조회 - Caller와 Callee가 채널 목록을 통해 Channel ID 공유
통화 걸기 구현	`필수`	`Caller`	connectCall() 메서드를 이용하여 Caller가 통화를 시도하는 걸기 기능
통화 받기 구현	`필수`	`Callee`	connectCall() 메서드를 이용하여 Callee가 통화 받는 기능
통화 종료 구현	`필수`	`All`	close() 메서드를 이용하여 통화 종료 기능 구현

일대일 통화 중 자신의 화면을 볼 수 있는 Local View와 상대방의 화면을 볼 수 있는 Remote View를 등록합니다.
a. Local View에 자신의 화면을 담습니다. Local View에는 비디오 자동 재생을 위해 autoplay 옵션과 함께 자신의 음성이 증폭하여 자신에게 들리는 하울링(Howling) 현상을 막기 위해 muted 옵션을 반드시 명시해야 합니다.

코드예제일대일 통화 Local View 등록
HTML
```

<video id="localVideo" autoplay muted></video>
```
b. Remote View에 상대방의 화면을 담습니다. Remote View에서 비디오 자동 재생을 위해 autoplay 옵션을 명시해야 합니다.

코드예제일대일 통화 Remote View 등록
HTML
```

<video id="remoteVideo" autoplay></video>
```

서비스 고유 정보, View, Media에 대한 Config 객체를 설정합니다.

코드예제일대일 통화 Config 객체 설정

JavaScript

const config = {
   credential: {
      serviceId: '{SERVICE_ID}', // 콘솔에서 획득한 Service ID
      key: '{SERVICE_KEY}'               // 콘솔에서 획득한 Service Key
   },
   view: {
      local: '#localVideo', // 로컬(자신) 비디오 태그 지정
      remote: '#remoteVideo', // 리모트(상대방) 비디오 태그 지정
   },
   media: {
      video: true, // true로 설정 시 비디오를 사용함
      audio: true // true로 설정 시 오디오를 사용함
   }
}

안내
자세한 서비스 고유 정보(Service ID와 Service Key) 발급 방법은 서비스 고유 정보 발급받기를 참고하시기 바랍니다.

표일대일 통화 Config 객체

구분	타입	필수 여부	설명
	Object	`필수`	인증 정보를 명시
serviceId	String	`필수`	콘솔에서 획득한 Service ID - 서비스 구분에 활용
key	String	`필수`	콘솔에서 획득한 Secret Key - API 호출 시 필요
	Object	`필수`	자신과 상대방의 비디오 엘리먼트를 지정 - CSS 선택자 사용 가능
local	String	`필수`	자신의 화면을 보여주는 엘리먼트
remote	String	`필수`	상대방의 화면을 보여주는 엘리먼트
	Object	`필수`	사용할 미디어의 사용 여부를 설정
video	Boolean	`필수`	카메라 사용 여부 설정 - getUserMedia의 Constraints를 그대로 사용 가능
			`true`: 카메라를 사용
			`false`: 카메라를 사용하지 않음
audio	Boolean	`필수`	오디오 사용 여부 설정 - getUserMedia의 Constraints를 그대로 사용 가능
			`true`: 오디오를 사용
			`false`: 오디오를 사용하지 않음

SDK 초기화 또는 통화 시작/종료와 같은 이벤트가 발생했거나 특정 시점에 도달했을 때, 시스템에서 호출할 수 있는 Callback 메서드를 구현합니다. 코드예제일대일 통화 Callback 메서드

Javascript

const listener = {
   onInit(token) {
         ...   // UI 처리등 Remon 클래스가 초기화 되었을 때 처리하여야 할 작업
   },
   
   onConnect(channelId) {
         ...   // Caller가 통화 생성 후 대기 중
   },

   onComplete() {
         ...   // Caller와 Callee가 정상적으로 연결되어 통화 시작
   },
   
   onClose() {
      ...   // 종료
   }
}

Remon 객체 생성 및 초기화를 진행합니다. 코드예제Remon 객체 생성 및 초기화
Javascript
```
const remonCall = new Remon({ config, listener })
```

랜덤 채팅 등과 같은 서비스에서 전체 통화 목록 정보를 조회할 수 있도록 통화 목록 조회 기능을 구현합니다. 코드예제일대일 통화 목록 조회

Javascript

const remonCall = new Remon()
const calls = await remonCall.fetchCalls()
calls.forEach((call)=>{
   if(call.status === 'WAIT'){
            ...   // 통화 대기중 상태로, Caller는 입장했으나 Callee가 입장하지 않은 상태
   } else if (call.status === 'COMPLETED') {
            ...   // 통화 연결이 완료된 상태로 발신자와 Callee가 모두 입장하여 통화가 연결된 상태
   }
})

표call.status Elements

파라미터	타입	필수 여부	설명
	Method	`선택`	통화 목록을 조회
COMPLETED	String	`선택`	통화 연결이 완료된 경우 - Caller와 Callee가 모두 입장하여 통화가 성사된 경우
WAIT	String	`선택`	통화 연결이 대기 중인 경우 - Caller가 입장하여 Callee의 입장을 기다리는 경우

connectCall() 메서드에 Channel ID를 파라미터로 전달하여 해당 체널에서 통화 걸기를 시도하는 기능을 구현합니다.

필요 시, onConnect() Callback 메서드를 구현하여 통화 연결 완료에 대한 이벤트를 추적할 수 있습니다.
채널이 생성되면 Caller는 해당 채널에 연결을 기다리는 대기 상태가 되며, Callee가 해당 Channel ID로 연결을 시도하면 일대일 통화가 시작됩니다.

표Channel ID 정의 및 생성 규칙

구분	설명
Channel ID	채널을 식별하는 수단 - Caller가 채널에 연결한 시각부터 Caller 또는 Callee 중 어느 한 쪽이 연결을 해제한 시각까지 유효 - 개발자가 직접 지정해서 사용 가능하며, 미지정 시에는 임의로 생성됨 - 과금은 Caller와 Callee가 실제 연결되어 통화가 이루어진 시간을 기준으로 책정
Channel ID	생성 규칙 - 영문 기준 최소 4자 ~ 최대 1,024자 까지 허용 - 특수문자(`:`, `;`, `*`, `$`, `'` 등)와 한글 사용 금지

코드예제일대일 통화 걸기

Javascript

// <video id="localVideo" autoplay muted></video>
// <video id="remoteVideo" autoplay></video>
let myChid

const config = {
   credential: {
      serviceId: '{SERVICE_ID}', // 콘솔에서 획득한 Service ID 
      key: '{SERVICE_KEY}'// 콘솔에서 획득한 Service Key
   },
   view: {
      local: '#localVideo',
      remote: '#remoteVideo'
   },
   media: {
      video: true, //true로 설정 시, 비디오를 사용함
      audio: true //true로 설정 시, 오디오를 사용함
      }
}

const listener = {
   onConnect(channelId) {
      ... // Caller가 통화 생성 후 대기 중
      myChannelId = channelId
   },
   onComplete() { 
      ... // Caller와 Callee가 정상적으로 연결되어 통화 시작
   }
}

const caller = new Remon({ listener, config })
caller.connectCall() // Channel ID 생성 규칙에 따라 생성할 수 있으며, 미 지정 시 자동 생성됨

connectCall() 메서드에 일대일 통화를 원하는 Channel ID를 입력하여 Caller와의 통화를 연결합니다.

필요 시, onComplete() Callback 메서드를 구현하여 일대일 통화가 정상적으로 연결되었는지 추적할 수 있습니다.

코드예제일대일 통화 받기

Javascript

// <video id="localVideo" autoplay muted></video>
// <video id="remoteVideo" autoplay></video>
const config = {
credential: {
   serviceId: '{SERVICE_ID}', // 콘솔에서 획득한 Service ID 
   key: '{SERVICE_KEY}'// 콘솔에서 획득한 Service Key
},
view: {
   local: '#localVideo',
   remote: '#remoteVideo'
},
   media: {
      video: true,
      audio: true
   }
}

const listener = {
onComplete() {
   ... // Caller와 Callee가 정상적으로 연결되어 통화 시작 
}
}

const callee = new Remon({ listener, config })
callee.connectCall('{CHANNEL_ID}') // Caller가 정한 Channel ID를 입력

close() 메서드를 사용하여 통화 종료 기능을 구현합니다. close() 메서드 호출 시 모든 통신 자원과 미디어 스트림 자원이 해제됩니다.
- 필요 시, onClose() Callback 메서드를 구현하여 통화가 정상적으로 종료되었는지 추적할 수 있습니다.
코드예제일대일 통화 종료
Javascript
```
   const remonCall = new Remon()
   remonCall.close()
```

방송

Remon 클래스를 통해 방송 서비스를 쉽고 빠르게 구현할 수 있습니다.

그림Web 방송 서비스 개발 프로세스

표방송 서비스 개발 프로세스

프로세스	필수 여부	행위자	설명
View 등록	`필수`	`All`	통화 중 자신과 상대방을 확인할 수 있는 View(뷰)를 등록
SDK 초기화	`필수`	`All`	서비스 고유 정보, View, Media에 대한 Config 객체 설정
Callback 구현	`선택`	`All`	이벤트 상태 확인을 위해 Callback 메서드
Remon 객체 생성	`필수`	`All`	설정된 Config 객체와 Callback 메서드로 Remon 객체 생성
방송 생성 및 송출 구현	`필수`	`All`	create() 메서드를 이용하여 방송을 생성하고 송출
방송 목록 조회 구현	`필수`	`Viewer`	fetchCasts() 메서드를 이용하여 생성된 방송 목록을 조회
방송 시청 구현	`필수`	`Viewer`	join() 메서드를 이용하여 방송 시청
방송 종료 구현	`필수`	`All`	close() 메서드를 이용하여 방송 송출 및 시청을 종료

방송 중 자신의 화면을 볼 수 있는 Local View와 상대방의 화면을 볼 수 있는 Remote View를 등록합니다.
a. Local View에 자신의 화면을 담습니다. Local View에서는 비디오 자동 재생을 위해 autoplay 옵션과 함께 자신의 음성이 다시 자신에게 들리는 하울링(Howling) 현상을 막기위해 muted 옵션을 반드시 명시해야 합니다. 코드예제방송 Local View 등록
HTML
```

<video id="localVideo" autoplay muted></video>
```
b. Remote View에 상대방의 화면을 담습니다. Remote View에서 비디오 자동 재생을 위해 autoplay 옵션을 명시해야 합니다. 코드예제방송 Remote View 등록
HTML
```

<video id="remoteVideo" autoplay></video>
```

서비스 고유 정보, View, Media에 대한 Config 객체를 설정합니다.

코드예제방송 Config 객체 설정

Javascript

   const config = {
   credential: {
      serviceId: '{SERVICE_ID}',  // 콘솔에서 획득한 Service ID
      key: '{SERVICE_KEY}'        // 콘솔에서 획득한 Service Key
   },
   view: {
      local: 'localVideoTag'     // 로컬 비디오 태그 지정
   },
   media: {
      sendonly: true,               //방송을 송출하는 사람을 true로 지정
      recvonly: true,               //방송을 수신하는 사람은 true로 지정
   }
}

안내
자세한 서비스 고유 정보(Service ID와 Service Key) 발급 방법은 서비스 고유 정보 발급받기를 참고하시기 바랍니다.

표방송 Config 객체

구분	타입	필수 여부	설명
	Object	`필수`	인증 정보를 명시
serviceId	String	`필수`	콘솔에서 획득한 Service ID - 서비스 구분에 활용
key	String	`필수`	콘솔에서 획득한 Secret Key - API 호출 시 필요
	Object	`필수`	자신과 상대방의 비디오 엘리먼트를 지정 - CSS 선택자 사용 가능
local	String	`필수`	자신의 화면을 보여주는 엘리먼트
remote	String	`필수`	상대방의 화면을 보여주는 엘리먼트
	Object	`필수`	사용할 미디어의 사용 여부를 설정
sendonly	Boolean	`필수`	방송 송출 여부 설정
			`true`: 방송을 송출
			`false`: 방송을 송출하지 않음
recvonly	Boolean	`필수`	방송 수신 여부 설정
			`true`: 방송을 수신
			`false`: 방송을 수신하지 않음

SDK 초기화 또는 통화 시작/종료와 같은 이벤트가 발생했거나 특정 시점에 도달했을 때, 시스템에서 호출할 수 있는 Callback 메서드를 구현합니다.
코드예제방송 Callback 메서드

Javascript

const listener = {
onInit(token) {
            ...   // UI 처리등 Remon 클래스가 초기화 되었을 때 처리하여야 할 작업
},

onCreate(channelId) {
            ...   // 방송 송출을 시작하면 호출
},

onJoin(channelId) {
            ...   // 방송 수신을 시작하면 호출
},

onClose() {
            ...   // 종료
}
}

Remon 클래스의 createCast() 메서드에 Channel ID를 전달하여 지정된 채널방에서 방송을 생성하고 송출하는 기능을 구현합니다. 채널방은 해당 Channel ID 명칭으로 생성됩니다.

Channel ID는 채널을 식별하는 고유한 값으로 생성 규칙을 참고하여 개발자가 직접 지정할 수 있으며, 만약 지정하지 않는다면 임의로 생성됩니다.

Channel ID는 Caster가 명시적으로 채널을 생성하는 시각부터 채널을 종료하는 시각까지 유효합니다. Caster가 영상을 송출하지 않고 채널을 생성만 해도 유효합니다. 유효한 채널이 생성되면 Viewer는 해당 채널에 입장할 수 있습니다.

표Channel ID

구분	설명
Channel ID	채널을 식별하는 수단 - Caller가 채널에 연결한 시각부터 Caller 또는 Callee 중 어느 한 쪽이 연결을 해제한 시각까지 유효 - 개발자가 직접 지정해서 사용 가능하며, 미지정 시에는 임의로 생성됨 - 과금은 Caller와 Callee가 실제 연결되어 통화가 이루어진 시간을 기준으로 책정
Channel ID	생성 규칙 - 영문 기준 최소 4자 ~ 최대 1,024자 까지 허용 - 특수문자(`:`, `;`, `*`, `$`, `'` 등)와 한글 사용 금지

코드예제방송 생성

Javascript

<video id="localVideo" autoplay muted></video>
let myChannelId

const config = {
  credential: {
    serviceId: '{SERVICE_ID}', // 콘솔에서 획득한 Service ID 
    key: '{SERVICE_KEY}'// 콘솔에서 획득한 Service Key
  },
  view: {
    local: '#localVideo'
  },
  media: {
    sendonly: true
  }
}

const listener = {
  onCreate(channelId) {
  // 방송 송출을 시작하면 호출
    myChannelId = channelId
  }
}

const caster = new Remon({ listener, config })
caster.createCast('{CHANNEL_ID}') // CHANNEL_ID는 선택 입력값, 생성 규칙에 따라 생성(미 지정 시 자동 생성됨)

Viewer가 전체 방송 목록 정보를 조회할 수 있도록 fetchCasts() 메서드를 사용하여 방송 목록 조회 기능을 구현합니다.
- 방송이 만들어지면 고유한 Channel ID의 식별값을 가진 채널 생성이 생성되며, Viewer는 해당 Channel ID를 통해 방송에 접근할 수 있습니다.
  
  코드예제전체 방송 목록 조회
  Javascript
  const remonCast = new Remon() const casts = await remonCast.fetchCasts(); casts.forEach((cast)=>{ ... // 전체 방송 목록 조회 기능 구현 });

Remon 클래스의 joinCast(channelId) 메서드를 사용하여 방송을 시청하는 기능을 구현합니다.

사용자는 주로 Channel ID 정보를 사용하여 방송을 선택하게 됩니다.

코드예제방송 시청

Javascript

<video id="remoteVideo" autoplay></video>
let myChannelId

const config = {
  credential: {
    serviceId: '{SERVICE_ID}', 
    key: '{SERVICE_KEY}'
  },
  view: {
    local: '#remoteVideo'
  },
  media: {
    recvonly: true
  }
}

const listener = {
  onJoin(channelId) {
   ... // 방송 수신을 시작하면 호출
  }
}

const viewer = new Remon({ listener, config })
viewer.joinCast('{CHANNEL_ID}') // Caster가 생성한 Channel ID

close() 메서드를 사용하여 방송 송출 또는 시청을 종료하는 기능을 구현합니다. close() 메서드 호출 시, 모든 통신 자원과 미디어 스트림 자원이 해제됩니다.

코드예제방송 종료
Javascript
```
const remonCast = new Remon()
remonCast.close()
```

그룹 통화

Remon 클래스를 사용하여 다수의 참여자가 통화에 참여하는 그룹 통화 서비스를 쉽고 빠르게 구현할 수 있습니다. 참여자는 애플리케이션을 이용하는 ‘나’와 나를 제외한 ‘참여자’로 구분됩니다. ‘나’는 통화 연결을 수행하며, ‘참여자’들의 입장과 퇴장 알림을 이벤트로 수신합니다. 그룹 통화 서비스의 개발 방법은 다음과 같습니다.

그림Web 그룹 통화 서비스 개발 프로세스

안내
그룹 통화 샘플은 ConferenceCall Test 화면에서 확인하실 수 있습니다.

표그룹 통화 개발 프로세스

프로세스	필수 여부	행위자	설명
View 등록	`필수`	`All`	통화 중 자신과 상대방을 확인할 수 있는 View(뷰)를 등록
SDK 초기화	`필수`	`All`	서비스 고유 정보, View, Media에 대한 Config 객체 설정
Callback 구현	`선택`	`All`	이벤트 상태 확인을 위해 Callback 메서드
Remon 객체 생성	`필수`	`All`	설정된 Config 객체와 Callback 메서드로 Remon 객체 생성
그룹 통화방 개설	`필수`	`Caller`	그룹 통화방 개설
참여자 목록 조회 구현	`선택`	`All`	개설된 그룹 통화방(Room Name)의 참여자 목록 조회 기능
참여자와 연결 구현	`필수`	`All`	각 참여자와의 연결을 위해 참여자별로 joinCast() 메서드를 호출
입장과 퇴장 이벤트 수신 구현	`필수`	`All`	onRoomEvent() Callback 메서드를 호출

그룹 통화 중 자신과 상대방의 화면을 볼 수 있는 View를 등록합니다.
서비스 고유 정보에 대한 Config 객체를 설정합니다. 코드예제그룹 통화 Config 객체
Javascript
```
const config = {
credential: {
      serviceId: '{SERVICE_ID}', // 콘솔에서 획득한 Service ID
      key: '{SERVICE_KEY}'   // 콘솔에서 획득한 Service Key
   }
}
```
안내
자세한 서비스 고유 정보(Service ID와 Service Key) 발급 방법은 서비스 고유 정보 발급받기를 참고하시기 바랍니다.
SDK 초기화 또는 방송 시작/종료와 같은 이벤트가 발생했거나 특정 시점에 도달했을 때, 시스템에서 호출할 수 있는 Callback 메서드를 구현합니다.
Remon 객체 생성 및 초기화를 진행합니다. 코드예제그룹 통화 Remon 객체
Javascript
```
const remon = new Remon({ config, listener });
```

Room Name으로 그룹 통화방을 개설합니다.

그룹 통화방이 개설되면, Local View(나의 화면)가 그룹 통화방으로 송출됩니다.

코드예제그룹 통화방 개설

Javascript

remon.createRoom("{Room Name}"); // 그룹 통화방의 이름

표Room Name

구분	설명
Room Name	그룹 통화방을 식별하는 ID 값 - channel ID와는 비슷하지만 그룹 통화에서는 Room Name으로 사용 필요
Room Name	생성 규칙 - 영문 기준 최소 4자 ~ 최대 1,024자 까지 허용 - 특수문자(`:`, `;`, `*`, `$`, `'` 등)와 한글 사용 금지

필요 시, 개설된 그룹 통화방(Room Name)에 참여하고 있는 참여자 목록 조회 기능을 구현합니다.
- 참여자 목록은 사용자 자신인 ‘나’를 포함합니다. 만약 그룹 통화방에 나를 포함하여 총 3명이 있으면 세 개 항목이 조회됩니다.
코드예제그룹 통화 참여자 목록 조회
Javascript
```
var searchResult= await remon.fetchRooms("{Room Name}"); // 참여자 목록을 담은 배열을 리턴하며, 각 항목은 ID 속성을 가짐
searchResult.forEach( ({id}, i) => {
// 참여자별 ID에 대한  처리
};
```

각 참여자와의 연결을 위해 참여자별로 Remon 객체를 생성하고, joinCast() 메서드를 호출합니다.

비디오 태그는 참여자별로 각각 지정해야 합니다.

코드예제그룹 통화 참여자 연결

Javascript

searchResult.forEach( ({id}, i) => {
   const newVideo = document.createElement('video');
   newVideo.id = id;
   newVideo.autoplay = true;

... //원하는 위치에 비디오를 추가
   otherVideos.appendChild(newVideo);

... //config에 비디오 태그를 지정
   config.view.remote = `#${newVideo.id}`;
const remon = new Remon({ config });
remon.joinCast(id);
}

그룹 통화 중 수시로 발생하는 참여자들의 입장과 퇴장 이벤트를 수신하기 위해 onRoomEvent() Callback 메서드를 구현합니다.

새로운 참여자가 입장하면 joinCast() 메서드를 사용하여 연결을 수행하는 join 부분이 실행되고, 기존 참여자가 퇴장하면 해당 참여자의 비디오 태그를 제거하는 leave 부분이 실행됩니다.

코드예제그룹 통화 입장과 퇴장

Javascript

const listener= {
   onRoomEvent(evt){
      console.log('event type: '+ evt.event); // join(새로운 참여자 입장 시) 또는 leave(기존 참여자 퇴장 시)
      console.log('channel id: '+ evt.channel.id); // 입장 또는 퇴장한 참여자의 ID
         if(evt.event === 'join') {
            const newVideo = document.createElement('video');
            newVideo.id = id;
            newVideo.autoplay = true;

            //원하는 위치에 비디오를 추가
            otherVideos.appendChild(newVideo);

            //config에 비디오 태그를 지정
            config.view.remote = `#${newVideo.id}`;
            const remon = new Remon({ config });
            remon.joinCast(evt.channel.id);
         }
         else if(evt.event === 'leave') {
            //퇴장 시 참여자 비디오 태그 삭제 
            let video = document.getElementById(evt.channel.id);
            otherVideos.removeChild(video);
         }
   }
}

kakaoIdocumentation

Kakao i Connect Live::Kakao i Connect Live 1.0::Connect Live SDK::Web SDK

페이지 이동경로

SDK 개발 프로세스

개발 요구 사항

사전 작업

서비스 고유 정보 발급받기

프로젝트 생성하기

SDK 설치하기

npm으로 설치

직접 스크립트 추가

Web SDK 개발

일대일 통화

방송

그룹 통화

관련 문서