AWS MediaConvert로 숏츠 플랫폼 HLS 스트리밍 구현

// S3 업로드 완료 시 Lambda 함수 트리거
const handleVideoUpload = async (event) => {
    const bucket = event.Records[0].s3.bucket.name;
    const key = decodeURIComponent(event.Records[0].s3.object.key.replace(/\+/g, ' '));

    // MediaConvert 작업 생성
    const jobParams = {
        Role: process.env.MEDIACONVERT_ROLE,
        Settings: {
            Inputs: [{
                FileInput: `s3://${bucket}/${key}`,
                VideoSelector: {},
                AudioSelectors: {
                    "Audio Selector 1": {
                        DefaultSelection: "DEFAULT"
                    }
                }
            }],
            OutputGroups: generateHLSOutputGroups(key)
        }
    };

    await mediaConvert.createJob(jobParams).promise();
};
javascript

// HLS.js 최적화 설정
// 참고: https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
const HLS_DEFAULT_OPTION = {
    autoStartLoad: true,           // 자동으로 세그먼트 로딩 시작
    startPosition: 0,              // 재생 시작 위치 (초)
    startFragPrefetch: true,       // 첫 번째 세그먼트 미리 가져오기
    maxBufferLength: 5,            // 최대 버퍼 길이 (초) - 메모리 사용량 제어
    maxBufferSize: 50 * 1000,      // 최대 버퍼 크기 (바이트) - 50KB
    maxMaxBufferLength: 3,         // 버퍼 길이 상한선 (초)
    maxBufferHole: 0.1,            // 버퍼 홀 허용 크기 (초)
    lowLatencyMode: true,          // 저지연 모드 활성화
    initialLiveManifestSize: 1,    // 초기 라이브 매니페스트 크기
    autoLevelEnabled: true,        // 자동 품질 조정 활성화
    startLevel: 1
};
javascript

const loadHls = () => {
    return new Promise((resolve) => {
        if (Hls.isSupported()) {
            hls.stopLoad();
            hls.loadSource(url);
            hls.attachMedia(shortsVideo);
            hls.startLoad(0);

            shortsVideo.onloadedmetadata = () => {
                resolve();
            };
        } else {
            shortsVideo.src = url;
            resolve();
        }
    });
};
javascript

const isLastSlide = newIndex === (this.splide.length - 1);
if (isLastSlide && (!this.isLastPage || this.allCategoryMode)) {
    await this.setSlides();
}
javascript

// 키보드, 마우스 휠, 터치 제스처 통합 지원
document.addEventListener('keydown', this.handleKeydown.bind(this));
document.addEventListener('wheel', this.handleWheel);
this.shortsList.addEventListener('touchstart', this.handleDragStart.bind(this));
this.shortsList.addEventListener('touchend', this.handleDragEnd.bind(this));
javascript

playVideo(isMuted, biReq = true) {
    shortsVideo.muted = isMuted;
    if (isMuted) {
        shortsVideo.play().catch((e) => {
            console.log('play error', e);
        });
    } else {
        shortsVideo.play()
            .then(() => {
                shortsAudio.classList.remove('muted');
            })
            .catch(() => {
                shortsVideo.muted = true;
                shortsVideo.play();
                shortsAudio.classList.add('muted');
            });
    }
}
javascript

const optimizeInitialLoading = (file) => {
    let thumbnail = file[0].thumbnail;
    if (CommonUtil.checkUndefinedText(thumbnail)) {
        const shortsLink = file[0].encoded_url;
        thumbnail = shortsLink.substring(0, shortsLink.lastIndexOf('/') + 1) + THUMBNAIL_FILE_NAME;
    }

    // 썸네일을 먼저 보여줘서 바로 시각적 피드백을 제공해요
    // 실제 로딩 시간은 줄지 않지만 UX적으로 빨라 보이는 효과가 있어요
    const videoElement = document.querySelector('.shorts-video');
    videoElement.poster = thumbnail;

    // 백그라운드에서 비디오를 로드해요
    setTimeout(() => {
        loadHls();
    }, 100);
};
javascript

const adaptiveInitialLoading = () => {
    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

    if (connection) {
        let initialLevel = 1;

        // 네트워크 타입에 따라서 초기 품질을 설정해요
        // 인도 지역의 3G 환경을 고려해서 더 보수적으로 설정
        switch(connection.effectiveType) {
            case 'slow-2g':
            case '2g':
                initialLevel = 0; // 480p
                break;
            case '3g':
                initialLevel = 0; // 인도 3G는 480p로 시작
                break;
            case '4g':
                initialLevel = 1; // 720p
                break;
            default:
                initialLevel = 0; // 안전하게 480p로 시작
        }

        HLS_DEFAULT_OPTION.startLevel = initialLevel;

        // 대역폭에 따라서 버퍼를 최적화해요
        // 인도 네트워크 환경에 맞춰 버퍼 크기 조정
        if (connection.downlink) {
            if (connection.downlink < 1.5) {
                HLS_DEFAULT_OPTION.maxBufferLength = 2; // 더 작은 버퍼
            } else if (connection.downlink > 10) {
                HLS_DEFAULT_OPTION.maxBufferLength = 6; // 보수적 버퍼
            }
        }
    }

    HLS_DEFAULT_OPTION.autoLevelEnabled = true;
};
javascript

const preloadNextVideo = () => {
    const nextIndex = this.activeIndex + 1;
    if (nextIndex < this.posts.length) {
        const nextVideoUrl = this.posts[nextIndex].file[0].encoded_url;

        const preloadVideo = document.createElement('video');
        preloadVideo.preload = 'metadata';
        preloadVideo.src = nextVideoUrl;

        preloadVideo.addEventListener('loadedmetadata', () => {
            this.preloadedVideos[nextIndex] = preloadVideo;
        });
    }
};
javascript

const cleanupVideoResources = () => {
    if (hls) {
        hls.stopLoad();
        hls.detachMedia();
        hls.destroy();
        hls = null;
    }

    if (shortsVideo) {
        shortsVideo.pause();
        shortsVideo.removeAttribute('src');
        shortsVideo.load();
    }

    Object.keys(this.preloadedVideos).forEach(key => {
        const video = this.preloadedVideos[key];
        video.pause();
        video.removeAttribute('src');
        video.load();
        delete this.preloadedVideos[key];
    });
};

window.addEventListener('beforeunload', cleanupVideoResources);
javascript

sendBiData(status, idx = this.activeIndex, isLeave = false, leaveAction = '') {
    if (status === 'start') {
        this.bi_start_time_obj = {
            id: this.posts[this.activeIndex].post_id,
            start_time: new Date().getTime()
        };
    }

    biAssistance.sendShortFormBiData({
        status: status,
        duration: this.bi_total_play_time,
        current_play_time: this.bi_video_current_time,
        element_id_number: idx + 1,
        start_time_stamp: this.bi_start_time_obj.start_time,
        is_leave: isLeave,
        leave_action: leaveAction,
        is_mobile: Config.instance.DEVICE.isMobile
    }, this.posts[idx]);
}
javascript