SDK 연동Legacy API (Deprecated)
Legacy API (Deprecated)
TapKit v1.x의 클래스 기반 API (Deprecated)
Legacy API (Deprecated)
DEPRECATED
이 API는 v2.0부터 deprecated되었으며 v3.0에서 완전히 제거될 예정입니다.
새로운 프로젝트는 Web Component API를 사용하세요. 기존 프로젝트는 마이그레이션 가이드를 참조하세요.
빠른 시작
CDN
<script src="https://files.edutap.ai/tap-sdk/loader.js"></script>
<tap-button></tap-button>
<script>
const sdk = new TapKit({ apiKey: 'your-api-key' });
await sdk.init({
course: { userId: 'user-123', courseId: 'course-456', clipId: 'clip-789' }
});
</script>npm
npm install @coxwave/tap-kitimport TapKit from '@coxwave/tap-kit';
const sdk = new TapKit({ apiKey: 'your-api-key' });
await sdk.init({
course: { userId: 'user-123', courseId: 'course-456', clipId: 'clip-789' }
});API 요약
라이프사이클
| API | 설명 |
|---|---|
new TapKit(config) | SDK 인스턴스 생성 |
init(params) | 초기화, Promise<cleanup> 반환 |
destroy() | SDK 정리 및 DOM 제거 |
ready | 초기화 완료 Promise |
속성
| API | 설명 |
|---|---|
isOpen | 채팅 열림 상태 (boolean) |
isInitialized | 초기화 완료 여부 (boolean) |
이벤트 (sdk.events)
| API | 설명 |
|---|---|
seekTimeline({ clipPlayHead, clipId }) | 타임라인 이동 요청 |
onTimelineSeek(callback) | 타임라인 seek 이벤트 구독 |
onAlarmFadeIn(handler) | 알람 표시 이벤트 구독 |
비디오 (sdk.video)
| API | 설명 |
|---|---|
bind(config, clipId) | 비디오 플레이어 바인딩 |
unbind() | 비디오 바인딩 해제 |
핵심 API
new TapKit(config)
const sdk = new TapKit({ apiKey: 'your-api-key' });init(params)
await sdk.init({
buttonId: 'my-button', // 선택: 커스텀 버튼 ID
course: {
userId: 'user-123', // 필수
courseId: 'course-456', // 필수
clipId: 'clip-789', // 필수
clipPlayHead: 0 // 선택: 초기 재생 위치
},
container: {
floatingConfig: {
position: { top: '64px', right: '32px' },
width: '360px',
height: 'calc(100% - 128px)',
borderRadius: '18px'
}
}
});destroy()
sdk.destroy();비디오 동기화
TapKit을 제대로 활용하려면 비디오 플레이어 동기화가 필수입니다!
video.bind(config, clipId)
비디오 플레이어를 TapKit과 연결하여 양방향 동기화를 활성화합니다.
// HTML5 Video
const video = document.querySelector('video');
sdk.video.bind(video, 'clip-789');
// 커스텀 플레이어 (YouTube 등)
sdk.video.bind({
getCurrentTime: () => player.getCurrentTime(),
setCurrentTime: (time) => player.seekTo(time, true),
}, 'clip-789');video.unbind()
sdk.video.unbind();이벤트 API
events.seekTimeline(params)
플레이어 재생 위치를 SDK에 전송합니다.
sdk.events.seekTimeline({
clipId: 'clip-789',
clipPlayHead: 125.5
});events.onTimelineSeek(handler)
SDK가 특정 시간으로 이동을 요청할 때 호출됩니다.
const unsubscribe = sdk.events.onTimelineSeek((clipPlayHead, clipId) => {
player.seek(clipPlayHead);
});
// 구독 해제
unsubscribe();events.onAlarmFadeIn(handler)
알림이 표시될 때 호출됩니다.
const unsubscribe = sdk.events.onAlarmFadeIn((alarm) => {
console.log('알림:', alarm.message);
});완전한 예제
// 1. SDK 생성
const sdk = new TapKit({ apiKey: 'your-api-key' });
// 2. 초기화
await sdk.init({
course: { userId: 'user-123', courseId: 'course-456', clipId: 'clip-789' },
container: {
floatingConfig: { position: { top: '64px', right: '32px' }, width: '360px' }
}
});
// 3. 비디오 동기화
const video = document.querySelector('video');
sdk.video.bind(video, 'clip-789');
// 4. 이벤트 리스닝
sdk.events.onTimelineSeek((time, clipId) => {
video.currentTime = time;
});
// 5. 정리 (필요 시)
sdk.destroy();마이그레이션
새로운 Web Component API로 마이그레이션하면:
- 더 간결한 코드
- 표준 Web Components 사용
- React/Vue 통합 용이
- CSS 기반 스타일링
// Legacy API
const sdk = new TapKit({ apiKey: 'your-api-key' });
await sdk.init({ course: { ... } });
// 새로운 API
const kit = document.querySelector('tap-kit');
kit.apiKey = 'your-api-key';자세한 마이그레이션 방법은 마이그레이션 가이드를 참조하세요.