Web SDK 개발자 가이드

Web 버전의 카카오 i 커넥트 라이브 SDK 2.0은 웹브라우저에서 카카오 i 커넥트 라이브 서비스의 개발을 지원하는 자바스크립트 라이브러리입니다. SDK에서 제공하는 메서드와 이벤트를 활용하여 화상과 음성을 교환하는 실시간 스트리밍 서비스를 쉽게 만들 수 있습니다.
SDK 개발 순서는 크게 다음으로 구분할 수 있으며, 이 과정에서 사용되는 메서드는 signIn(인증), createLocalMedia(로컬미디어 생성), createRoom(Room 생성), connect(Room 접속), publish(로컬 미디어 게시), subscribe(리모트 미디어 구독)입니다. 이때 사용되는 이벤트는 connected, remoteVideoPublished입니다.
SDK에서 제공하는 메서드에 대한 자세한 설명은 API 레퍼런스 > Web 문서를 참고하시기 바랍니다.

Web SDK 개발자 가이드 그림Web SDK

표지원 브라우저 및 플랫폼

구분	설명
지원 브라우저	Chrome, Firefox, Safari, Edge, Mobile Chrome(Android), Mobile WebView(Android, iOS), Mobile Safari
지원 플랫폼	Windows, MacOS, Linux, Android, iOS

사전 작업

카카오 i 커넥트 라이브 SDK 2.0을 사용하여 실시간 스트리밍 서비스를 개발하기 전 사전 작업을 수행해야 합니다.

서비스 인증 정보 발급받기

카카오 i 커넥트 라이브 SDK 2.0을 사용하기 위해서는 고객사에서 선정한 인증 방식에 따라 카카오 i 커넥트 라이브 콘솔에서 서비스 인증 정보를 발급받아야 합니다.
SDK 기본 인증 방식인 커넥트 라이브 내부 인증 방식의 경우, 콘솔에서 서비스 ID(serviceId)와 서비스 시크릿(serviceSecret) 발급받아야 합니다. 이 정보는 프로젝트 생성 시 자동 생성되며, 서비스 (앱)별로 구분되어 사용량 측정 및 과금의 기준이 됩니다. 따라서 하나 이상의 애플리케이션을 만들 경우에는 앱의 개수만큼 서비스 ID와 서비스 시크릿을 각각 발급받아야 합니다. 서비스 인증 정보를 발급받는 방법은 다음과 같습니다. 고급 인증 방식인 서비스 자체 인증 방식의 경우, 콘솔에서 서비스 ID(serviceId)를 발급받아야 합니다. 각 인증 방식 별 자세한 인증 프로세스는 인증 및 키 처리 문서를 참고하시기 바랍니다.

표인증 방식 구분

인증 방식 구분	설명
커넥트 라이브 내부 인증	카카오 i 커넥트 라이브 SDK 2.0의 기본 인증 방식 - 콘솔에서 서비스 ID(serviceId)와 서비스 시크릿(serviceSecret) 발급 필요 - SDK 기본 인증 방식으로 별도의 서버 및 개발 작업이 필요 없음 - 자세한 설명은 서비스 인증 정보 발급하기 참고
서비스 자체 인증	최종 사용자에게 신원 확인용 토큰을 부여하고, 권한을 부여하는 서비스 자체 인증 방식 - 콘솔에서 서비스 ID(serviceId) 발급 필요 - 수준 높은 보안 레벨을 충족하며, 별도의 서버 및 개발 작업 필요 - 자세한 설명은 서비스 인증 정보 발급하기 참고

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

안내
카카오 i 커넥트 라이브 콘솔에서는 사용자 인증 정보 관리, 워크스페이스 관리, 멤버 초대 등의 기능을 제공합니다. 콘솔 사용과 관련한 자세한 설명은 부록. 카카오 i 커넥트 라이브 콘솔 문서를 참고하시기 바랍니다.

SDK 설치하기

Web 버전의 카카오 i 커넥트 라이브 SDK 2.0은 NPM을 통한 설치, CDN를 통한 Script 태그 설치를 모두 지원합니다.

NPM으로 설치하기

SDK는 항상 최신 버전으로 설치되며, NPM을 통해 SDK를 설치하는 방법은 다음과 같습니다.

코드예제SDK 설치 Syntax

BASH

npm install @connectlive/connectlive-web-sdk

NPM으로 설치한 SDK는 다음과 같이 사용할 수 있습니다.

코드예제SDK 사용 Syntax

Javascript

import ConnectLive from '@connectlive/connectlive-web-sdk';

CDN으로 설치하기

Script 태그를 통해 설치된 SDK는 ConnectLive 전역 변수를 통해 사용할 수 있습니다. 특정 버전을 설치할 경우, Changelog를 참고하여 작성합니다.

코드예제CDN 설치 Syntax

HTML

//최신 버전
<script src="https://cdn.jsdelivr.net/npm/@connectlive/connectlive-web-sdk/dist/connectlive-web-sdk.min.js"></script>

//특정 버전
<script src="https://cdn.jsdelivr.net/npm/@connectlive/connectlive-web-sdk@{특정 버전}/dist/connectlive-web-sdk.min.js"></script>

표특정 버전 설치 Parameters

파라미터	타입	필수여부	설명
특정 버전	String	`필수`	특정 버전 설치 시, Changelog를 참고하여 작성

서비스 개발 순서

카카오 i 커넥트 라이브 SDK 2.0을 사용하여 간단한 실시간 화상회의 서비스를 구현하는 개발 순서는 다음과 같습니다. 서비스 개발은 사전 작업을 모두 완료해야 진행할 수 있습니다.

안내
서비스 구현과 관련한 개발 샘플 및 구현 예제는 부록. 개발 샘플 문서를 참고하시기 바랍니다.

Step 1. HTML 문서 작성하기

index.html 문서를 작성하고 아래 내용을 복사하여 붙여 넣기 합니다.

코드예제HTML 문서 작성 Syntax

HTML

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>ConnectLive 화상회의</title>
				<script src="https://cdn.jsdelivr.net/npm/@connectlive/connectlive-web-sdk/dist/connectlive-web-sdk.min.js"></script>
    </head>
    <body>
        <div class="local-container"></div>
        <div class="remote-container"></div>
    </body>
</html>

Step 2. 서비스 인증하기

Room에 연결하기 위해서는 인증이 필요하며, 콘솔에서 발급받은 서비스 인증 정보를 signIn() 메서드의 인자로 전달하여 서비스를 인증합니다. 서비스 인증 정보 발급에 대한 자세한 설명은 서비스 인증 정보 발급받기를 참고하시기 바랍니다.
SDK 인증 방식은 커넥트 라이브 내부 인증과 서비스 자체 인증으로 구분됩니다. 각 인증 방식에 대한 자세한 설명은 signIn()(커넥트 라이브 내부 인증)과 signIn()(서비스 자체 인증)을 참고하시기 바랍니다.

코드예제signIn_커넥트 라이브 내부 인증 Syntax

Javascript

// 커넥트 라이브 내부 인증
ConnectLive.signIn({
    serviceId: '{서비스 ID}',
    serviceSecret: '{서비스 시크릿}'
}).then(()=>{
    alert('인증에 성공했습니다.');
}).catch(()=>{
    alert('인증에 실패했습니다.');
});

코드예제signIn_서비스 자체 인증 Syntax

Javascript

// 서비스 자체 인증
await ConnectLive.signIn({
	serviceId: '{서비스 ID}',
	token: '{서비스에서 발급한 토큰}'
});

안내
인증 방식별 인증 프로세스와 키 처리에 대한 자세한 설명은 인증 및 키 처리 문서를 참고하시기 바랍니다.

Step 3. Local Media(로컬 미디어) 생성하기

createLocalMedia() 메서드를 사용하여 로컬 마이크와 카메라에 접근할 수 있습니다. 이를 통해 실시간 스트리밍 서비스에 이용할 수 있는 LocalMedia 객체가 생성됩니다. constraints 파라미터는 audio(오디오)와 video(비디오) 객체를 가지고 있으며, 서비스에 맞게 객체를 설정할 수 있습니다. 자세한 설명은 getUserMedia() 메서드를 참고하시기 바랍니다.
LocalMedia 객체를 비디오를 화면에 추가하는 3가지 방법이 있습니다. 첫 번째 방법과 두 번째 방법은 attach() 메서드를 사용하는 방법이며, 세 번째 방법은 MediaStream을 직접 가져오는 방법입니다. 다음은 attach() 메서드를 사용하여 화면에 비디오를 추가하는 예제입니다.

코드예제attach()로 Local Media 생성 Syntax

Javascript

ConnectLive.createLocalMedia({
    audio: true,
    video: true
}).then((localMedia)=>{
    // 방법 1. attach() 메서드 사용하기
    const video = localMedia.video.attach();
    document.querySelector('.local-container').appendChild(video);

    // 방법 2. attach() 메서드 사용하기
    // localMedia.video.attach(document.getElementById('video-tag-id'));

    // 방법 3. MediaStream을 직접 가져오기
    // document.getElementById('video-tag-id').srcObject = localMedia.video.getMediaStream();
});

Step 4. Room 객체 선언 및 접속하기

상대방과의 통신하기 위해서는 같은 Room에 들어가야 하며, 이를 위해 Room 객체를 선언해야 합니다. Room에 접속할 때는 connect() 메서드를 사용하며, Room의 고유한 id 값인 roomId를 인자로 사용합니다. roomId는 영문 대소문자, 숫자, - 으로 구성이 가능하며, 길이는 32자로 제한됩니다.

코드예제Room 객체 선언 및 접속 Syntax

Javascript

const room = ConnectLive.createRoom();
room.connect('{roomId}');

Step 5. 로컬 오디오와 비디오 공유하기

createLocalMedia()로 생성한 나 자신의 미디어인 LocalMedia 객체를 Room에 참여한 리모트 참여자들과 공유할 수 있습니다. LocalMedia 객체를 Room에 공유할 시 publish() 메서드를 사용합니다.

코드예제LocalMedia 객체 공유 Syntax

Javascript

room.publish([ localMedia ]).then(()=>{
	// 공유 성공
})

Step 6. 상대방 비디오 구독하기

상대방의 비디오를 구독하기 위해서는 subscribe() 메서드와 관련 이벤트를 사용해야 합니다. subscribe() 메서드의 인자에는 구독을 원하는 비디오 아이디(videoId)를 배열 형태로 전달하면 됩니다.

코드예제상대방 비디오 구독 Syntax

Javascript

room.subscribe([...videoIds])

이때 비디오 아이디(videoId)는 connected 이벤트 또는 remoteVideoPublished 이벤트에서 획득할 수 있습니다. connected 이벤트는 처음 룸에 접속하면 호출되는 이벤트로 이미 룸에 참여하고 있는 참여자 정보를 전달합니다. remoteVideoPublished 이벤트는 리모트 참여자가 자신의 비디오를 공유하면 호출되는 이벤트로, 비디오를 공유한 참여자와 비디오에 대한 정보를 알 수 있습니다.

코드예제connected 이벤트에서 비디오 아이디 획득 Syntax

Javascript

room.on('connected', (param)=>{
    //기존 참여자 배열을 순회하며 비디오 구독 및 엘리먼트 생성
    param.participants.forEach((participant) => {
				//구독하지 않은 비디오 가져오기
        const unsubscribeVideos = participant.getUnsubscribedVideos();
				//해당 비디오 구독하기
        room.subscribe([unsubscribeVideos[0].videoId]).then((remoteVideos)=>{
						//비디오를 화면에 추가하기
            const video = remoteVideos[0].attach();
            document.querySelector('.remote-container').appendChild(video);
        });
    });
});

코드예제remoteVideoPublished 이벤트에서 비디오 아이디 획득 Syntax

Javascript

room.on('remoteVideoPublished', (param)=>{
		//리모트 참여자가 공유한 비디오 구독하기
    room.subscribe([param.remoteVideo.videoId]).then((remoteVideos)=>{
				//비디오를 화면에 추가하기
        const video = remoteVideos[0].attach();
        document.querySelector('.remote-container').appendChild(video);
    });
});

Step 7. 종료하기

SDK에서 종료는 Room과의 연결을 중단하는 것, Local Media(로컬 미디어)를 중단하는 것, 인증을 중단하는 것 총 세 가지로 구분됩니다. room.disconnect() 메서드만 호출했다면, room.connect() 메서드를 통해 다시 Room에 접속한 후 미디어를 공유할 수 있습니다. localMedia.stop() 메서드를 통해 로컬 미디어를 중단했다면, 이는 재사용이 불가능하며 createLocalMedia() 메서드를 통해 다시 localMedia 객체를 생성해야 합니다.

코드예제SDK 종료 Syntax

Javascript

//Room과 연결을 중단
room.disconnect();

//로컬 미디어를 중단
localMedia.stop();

//인증 중단
ConnectLive.signOut()

주요 이벤트

Web 버전의 카카오 i 커넥트 라이브 SDK 2.0에서 제공하는 모든 이벤트는 Room 문서의 Event에서 확인할 수 있습니다. 주요 이벤트는 다음과 같습니다.

connected

connected는 참여자가 Room과의 연결이 완료되었을 때 발생하는 이벤트입니다. 해당 이벤트는 이미 룸에 참여하고 있는 Remote Participant(리모트 참여자) 목록을 인자로 전달합니다. 만약 기존 참여자들의 비디오를 한 번에 구독하고 싶다면, Promise.allSettled를 이용할 수 있습니다.

코드예제connected Syntax

Javascript

const remoteParticipants = [];
room.on('connected', async (param)=>{
	let remoteVideoIds = [];
  param.remoteParticipants.forEach(participant => {
    const unsubscribedVideos = participant.getUnsubscribedVideos();
    if (unsubscribedVideos.length) {
      const videoIds = unsubscribedVideos.map(video => video.getVideoId());
      remoteVideoIds = remoteVideoIds.concat(videoIds);
    }
  });

	const results = await Promise.allSettled(remoteVideoIds.map(videoId => room.subscribe([videoId])));
  results.forEach((result)=>{
    if (result.status === 'rejected') {
			// 구독을 하나라도 실패하면 실패에 관한 처리를 수행
      return;
    }
    
		remoteParticipants.push({
      remoteParticipant: room.getParticipant(result.value[0].participantId), //remoteParticipant 객체
      videos: result.value //remoteParticipant가 공유한 비디오 배열(예를 들어, 카메라와 화면 공유)
    });
  });
});

participantEntered

새로운 Remote Participant(리모트 참여자)가 Room에 입장했을 때 호출됩니다. 이곳에서 새로운 Remote Participant(리모트 참여자) 목록을 만들어 화면에 표시할 수 있습니다.

코드예제participantEntered Syntax

Javascript

const remoteParticipants = [];
room.on('participantEntered', (param)=>{
	//param.remoteParticipant
	remoteParticipants.push({
		remoteParticipant: param.remoteParticipant
	});
});

participantLeft

Remote Participant(리모트 참여자)가 Room에서 퇴장하여 Room과 연결이 끊겼을 때 호출됩니다. 해당 이벤트는 Remote Participant(리모트 참여자) 정상 종료와 비정상 종료를 구분하지 않습니다. 정상 종료의 경우 이벤트는 바로 호출이 되며 비정상 종료의 경우 수 초 후에 이벤트가 호출됩니다. 이곳에서 기존 Remote Participant(리모트 참여자) 목록에서 해당 참여자를 제거할 수 있습니다.

코드예제participantLeft Syntax

Javascript

const remoteParticipants = [];
room.on('participantLeft', (param)=>{
	//param.remoteParticipantId
	const index = this.remoteParticipants.findIndex(item => item.participant.id === param.remoteParticipantId);
  remoteParticipants.splice(index, 1);
});

remoteVideoPublished

Remote Participant(리모트 참여자)가 비디오를 공유했을 때 호출됩니다. 해당 이벤트에서는 remoteVideo와 remoteParticipant 두 객체를 인자로 전달받아 어떤 비디오를 어떤 Remote Participant(리모트 참여자가) 공유했는지 알 수 있습니다.

코드예제remoteVideoPublished Syntax

Javascript

room.on('remoteVideoPublished', (param)=>{
	//param.remoteVideo
	//param.remoteParticipant
});

에러 처리 및 디버깅

Web 버전의 카카오 i 커넥트 라이브 SDK 2.0의 에러 처리는 Promise 패턴의 에러 핸들링과 에러 이벤트 등록을 통한 에러 핸들링으로 나뉩니다. 에러 타입은 다음과 같이 IErrorException, IServerError, IClientError, Error 네 가지로 구분됩니다. 클라이언트 관련 에러 코드 및 설명은 Error Code 문서를 참고하시기 바랍니다.

표에러 타입

에러 타입	설명
	IServerError, IClientError의 부모 타입
IServerError	서버에서 발생한 에러 코드와 메시지를 담고 있는 에러 타입
IClientError	클라이언트에서 발생한 에러코드와 메시지를 담고 있는 에러 타입
Error	클라이언트에서 발생한 에러 - 별도의 코드와 메시지를 전달하지 않음

서버 에러(IServerError)와 클라이언트 에러(IClientError)를 구분하여 처리하고 싶다면 다음과 같이 할 수 있습니다.

코드예제에러 구분 처리 Syntax

Javascript

if(err instanceof IServerError) {
	console.log('서버 에러');
} else if (err instanceof IClientError) {
	console.log('클라이언트 에러');	
}

Promise 에러 핸들링

Promise에는 두 가지 패턴이 있습니다. async/await를 사용하는 패턴과 then/catch를 사용하는 패턴입니다. Room에 접속하는 connect() 메서드를 예시로 한 Promise 에러 핸들링은 다음과 같이 처리됩니다.

코드예제Promise 에러 핸들링 Syntax

Javascript

try{
	await room.connect({Room 아이디});
	console.log('Room 접속 성공');
} catch (err) {
	console.log(err);
}

room.connect({Room 아이디}).then(()=>{
	console.log('Room 접속 성공');
}).catch((err)=>{
	console.log(err);
});

Promise로 에러를 핸들링할 수 있는 메서드는 다음과 같습니다.

표인증

메서드	설명
ConnectLive.signIn	- 서버 에러 발생 가능 - 클라이언트 에러 1103 발생 가능

표미디어

메서드	설명
ConnectLive.createLocalMedia	클라이언트 에러 1203, 1205, 1206 발생 가능
ConnectLive.createLocalScreen	클라이언트 에러 1204, 1205, 1206 발생 가능
localMedia.switchCamera	클라이언트 에러 1203, 1206 발생 가능
localMedia.switchMic	클라이언트 에러 1203, 1205 발생 가능
localScreen.switchDisplay	클라이언트 에러 1204, 1205, 1206 발생 가능
localAudio.setAlwaysOn	서버 에러 발생 가능
localAudio.setEnabled	서버 에러 발생 가능
localVideo.setEnabled	서버 에러 발생 가능
remoteVideo.setPaused	서버 에러 발생 가능
remoteVideo.setQuality	- 서버 에러 발생 가능 - 클라이언트 에러 1207 발생 가능

표Room

메서드	설명
room.connect	- 서버 에러 발생 가능 - 클라이언트 에러 1301, 1401, 1402 발생 가능
room.disconnect	서버 에러 발생 가능
room.publish	- 서버 에러 발생 가능 - 클라이언트 에러 1324, 1442 발생 가능
room.unpublish	- 서버 에러 발생 가능 - 클라이언트 에러 1446 발생 가능
room.subscribe	- 서버 에러 발생 가능 - 클라이언트 에러 1448, 1321, 1322, 1323 발생 가능
room.unsubscribe	서버 에러 발생 가능
room.sendUserMessage	서버 에러 발생 가능

에러 이벤트 핸들링

필요시, on 메서드로 에러 이벤트를 등록할 수 있습니다. 등록 가능한 이벤트는 다음과 같습니다.

코드예제에러 이벤트 등록 Syntax

Javascript

ConnectLive.on('tokenRefreshWarning', (err)=>{
	console.log(err);
});
 
ConnectLive.on('tokenRefreshError', (err)=>{
	console.log(err);
});

room.on('error', (err)=>{
	console.log(err);
});

표등록 가능한 에러 이벤트

에러 이벤트	설명
tokenRefreshWarning	토큰 갱신은 설정된 시간의 90% 시점부터 10분 간격으로 성공할 때까지 호출되며, 토큰을 갱신하려 할 때 에러가 발생하면 tokenRefreshWarning가 호출됨 - 서버 에러 발생 가능
tokenRefreshError	토큰 갱신 시간을 완전히 지나면 최종적으로 tokenRefreshError가 호출됨 - 이 경우 서비스를 지속할 수 없으므로, 연결 중단 메시지를 사용자에게 보여주거나 서비스를 초기화면으로 이동하는 등의 복구 작업 필요 - 서버 에러 발생 가능
error	Room에 접속한 상태에서 에러가 발생하면 호출됨 - Room과 연결이 중단되었을 경우 호출되는 에러이며, 복구할 수 없음 - 해당 에러를 구현하여 연결 중단 메시지를 사용자에게 보여주거나 서비스를 초기화면으로 이동하는 등의 복구 작업 필요 - 서버 에러 발생 가능(connect 후 세션 생성에 실패 시) - 클라이언트 에러 1411 발생 가능

에러 코드

전체 에러 코드는 다음과 같습니다.

표전체 에러 코드 목록

코드	메시지	설명
1103	인증을 위한 서비스 정보가 입력되지 않았습니다.	signIn() 메서드 사용 시 인증 정보가 모두 입력되지 않았을 때 발생할 수 있음
1203	getUserMedia 실패(native 원본 메시지)	getUserMedia를 통해 미디어 스트림을 얻지 못했다면 발생할 수 있음
1204	getDisplayMedia 실패(native 원본 메시지)	getDisplayMedia를 통해 미디어 스트림을 얻지 못할 시 발생할 수 있음
1205	오디오 트랙을 획득했지만 종료 상태입니다.	오디오 트랙을 얻기 위해 createLocalMedia 호출할 때 발생할 수 있음
1206	비디오 트랙을 획득했지만 종료 상태입니다.	비디오 트랙을 얻기 위해 createLocalMedia 호출할 때 발생할 수 있음
1207	비디오 품질 변경 인자는 'l', 'm', 'h' 중 하나여야 합니다.	비디오 품질 변경 인자가 잘못되었을 때 발생할 수 있음
1301	입력한 룸 id가 지원하지 않는 길이, 문자를 포함합니다.(32자 이하, 영문자/숫자/`-` 만 가능)	connect() 메서드 호출 시 room id를 검증하지 못했을 때 발생할 수 있음
1321	이미 구독 중인 스트림입니다.	subscribe() 메서드 호출 시 이미 구독 중인 비디오라면 발생할 수 있음
1322	리시버 개수는 maxReceiverCount를 초과할 수 없습니다.	리시버 개수가 초과되면 발생할 수 있음
1323	빈 streamIds이 전달되었습니다.	빈 sreamIds 전달 시 발생할 수 있음
1324	빈 배열이 전달되었습니다.	빈 배열이 전달 시 발생할 수 있음
1401	PeerConnection 생성이 실패했습니다.	connect() 메서드 호출 시 발생할 수 있음
1402	데이터 채널 생성이 실패했습니다.	connect() 메서드 호출 시 발생할 수 있음
1411	PeerConnection 연결 상태가 failed입니다.	연결이 끊기면 발생 - 해당 에러가 발생하면 room 객체의 error 이벤트를 호출함
1442	스트림 추가 에러(native 원본 메시지)	스트림 추가 에러
1446	스트림 제거 에러(native 원본 메시지)	스트림 제거 에러
1448	리시버 추가 에러(native 원본 메시지)	리시버 추가 에러
1901	ConnectLive로부터 직접 객체를 선언할 수 없습니다.	Web SDK는 new ConnectLive()로 객체를 선언할 수 없음
1904	HTTP 세션에 오류가 발생했습니다.	모든 서버와의 통신 과정에서 통신에 실패하면 발생

안내
클라이언트 관련 에러 코드 및 설명은 Error Code 문서를 참고하시기 바랍니다.

디버그 로그

Web SDK는 개발자 도구의 콘솔에 로그를 출력합니다. 로그는 trace, debug, info, error, off가 존재합니다.
로그의 순서는 trace > debug > info > error > off 순이며, 로그 레벨을 trace로 지정했을 경우에 debug, info, error를 모두 출력합니다. 만약 로그 레벨을 info로 설정할 경우엔 info와 error만 출력합니다.

표로그 유형

로그	설명
trace	가장 높은 수준의 로그이며 기본 로그 레벨 - 서버와의 요청/응답 정보를 포함
debug	trace 다음 수준의 로그 - 클라이언트에서 생성한 객체, Offer, Answer 등의 생성 정보를 포함
info	debug 다음 수준의 로그 - SDK 내부 메서드의 호출 정보를 포함
error	가장 낮은 수준의 로그 - 에러가 발생하면 로그를 남김
off	로그를 출력하지 않음

로그 레벨 조정

로그 레벨은 다음과 같이 조절할 수 있습니다. 해당 로그는 클라이언트 로그로, 로그 레벨을 off로 설정해 로그를 출력하지 않더라도 서버 측에서는 여전히 로그를 수신하여 통계 데이터를 수집합니다.

코드예제로그 레벨 조절 Syntax

Javascript

ConnectLive.logger.setLevel('error');

kakaoIdocumentation

Kakao i Connect Live::Kakao i Connect Live 2.0::개발자 가이드::Web

페이지 이동경로

Web SDK 개발자 가이드

사전 작업

서비스 인증 정보 발급받기

SDK 설치하기

NPM으로 설치하기

CDN으로 설치하기

서비스 개발 순서

Step 1. HTML 문서 작성하기

Step 2. 서비스 인증하기

Step 3. Local Media(로컬 미디어) 생성하기

Step 4. Room 객체 선언 및 접속하기

Step 5. 로컬 오디오와 비디오 공유하기

Step 6. 상대방 비디오 구독하기

Step 7. 종료하기

주요 이벤트

connected

participantEntered

participantLeft

remoteVideoPublished

에러 처리 및 디버깅

Promise 에러 핸들링

에러 이벤트 핸들링

에러 코드

디버그 로그

로그 레벨 조정