HLS 스트리밍

적응형 비트레이트 스트리밍으로 네트워크 환경에 맞는 화질을 자동 선택합니다.

스트림 URL 조회

typescript

const streamInfo = await cb.video.getStreamUrl('video-id')
console.log(streamInfo.stream_url)  // master.m3u8 URL

특정 화질만 받으려면:

typescript

const hd = await cb.video.getStreamUrl('video-id', '1080p')

HLS 플레이어 연동

HLS.js (웹)

typescript

import Hls from 'hls.js'

async function playVideo(videoId: string, videoElement: HTMLVideoElement) {
    const streamInfo = await cb.video.getStreamUrl(videoId)

    if (Hls.isSupported()) {
        const hls = new Hls()
        hls.loadSource(streamInfo.stream_url)
        hls.attachMedia(videoElement)
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
            videoElement.play()
        })
    } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
        // iOS Safari 네이티브 HLS 지원
        videoElement.src = streamInfo.stream_url
        videoElement.play()
    }
}

Video.js

typescript

import videojs from 'video.js'

const streamInfo = await cb.video.getStreamUrl('video-id')

const player = videojs('my-video', {
    sources: [{
        src: streamInfo.stream_url,
        type: 'application/x-mpegURL'
    }]
})

썸네일 조회

⚠️ 현재 SDK 의 cb.video.getThumbnails(videoId) 는 동작하지 않습니다. SDK 는 /v1/public/videos/:videoId/thumbnails (복수형) 를 호출하지만, 백엔드는 /v1/public/videos/:videoId/thumbnail (단수형) 하나만 노출합니다.

당분간은 단일 썸네일 URL 을 직접 조립해 사용하세요:

typescript

const thumbnailUrl = `https://api.connectbase.world/v1/public/videos/${videoId}/thumbnail`

여러 시점의 sprite/scrubbing 이미지가 필요하면 트랜스코딩 시 추출된 자산을 cb.storage 로 직접 관리하세요.

시청 진행 보고

⚠️ 현재 SDK 의 시청 기록 / 진행 보고 메서드는 백엔드에 대응 라우트가 없습니다. cb.video.getWatchHistory, clearWatchHistory, reportWatchProgress 모두 /v1/public/watch-history 또는 /v1/public/videos/:videoId/watch-progress 를 호출하지만 백엔드에는 해당 라우트가 등록되어 있지 않아 404 가 반환됩니다.

시청 행동을 추천에 반영하려면 자체 tbl_watch_history 테이블에 cb.database 로 기록하거나, 백엔드의 추천 시스템 라우트(/v1/public/recommendations/...)를 직접 fetch 하세요.

비디오 업로드

Shorts