컨텐츠 보호를 위한 시스템
컨텐츠 제공 서버는 사용 권한 정보를 검증하여 불법 다운로드 및 복제를 방지합니다.
이 시스템은 구매한 사용자만이 컨텐츠에 접근할 수 있도록 하여, 제작자의 권리를 보호합니다.
비디오 스트리밍 서비스의 일반적인 아키텍처
- MP4 원본을 사용하지 않음
- 보안상의 이유로, 직접적인 MP4 파일 스트리밍 대신에 HLS나 DASH와 같은 스트리밍 프로토콜을 사용합니다.
- 이 방식은 비디오 콘텐츠를 여러 작은 세그먼트로 분할하여 스트리밍함으로써 보안성을 강화하고, 다양한 네트워크 속도에 맞게 콘텐츠를 더 효율적으로 전달할 수 있습니다.
- HLS와 DASH 스트리밍 프로토콜
- HLS (HTTP Live Streaming)와 DASH (Dynamic Adaptive Streaming over HTTP)는 가장 널리 사용되는 두 가지 스트리밍 프로토콜입니다.
- 이들은 다양한 디바이스와 플랫폼에서 스트리밍을 지원하기 위해 설계되었습니다. 애플 기기에서는 주로 HLS가, 다른 여러 환경에서는 HLS와 DASH가 모두 사용될 수 있습니다.
- AWS의 S3와 CloudFront를 사용한 배포
- AWS S3는 스토리지 서비스로, 여기에 비디오 파일을 저장할 수 있습니다.
- CloudFront는 AWS의 콘텐츠 전송 네트워크(CDN) 서비스로, 전 세계적으로 사용자에게 콘텐츠를 빠르게 전달하는 데 사용됩니다.
- HLS 또는 DASH로 트랜스코딩된 비디오를 S3에 업로드하고, CloudFront를 통해 전세계적으로 분산하여 스트리밍할 수 있습니다.
- 파일 확장자 m3u8과 mpd
- HLS 스트리밍은 주로 .m3u8 확장자를 사용하며, DASH 스트리밍은 .mpd 확장자를 사용합니다.
- 이들은 각각 비디오 플레이리스트와 매니페스트 파일을 나타내며, 스트리밍 중인 비디오의 다양한 품질 버전과 세그먼트 정보를 포함하고 있습니다.
- JavaScript를 이용한 스트리밍
- 사용자의 웹 브라우저에서 JavaScript를 사용하여 스트리밍 플레이어를 구현할 수 있습니다.
- 이는 사용자가 별도의 플러그인이나 애플리케이션을 설치할 필요 없이 비디오를 시청할 수 있게 해줍니다.
- Video.js와 Plyr 같은 라이브러리를 사용하면 복잡한 비디오 스트리밍 기능을 쉽고 효율적으로 구현할 수 있습니다. HLS와 DASH 스트리밍 프로토콜을 모두 지원합니다.
AWS Elemental MediaConvert
MP4 같은 단일 비디오 파일을 스트리밍 포맷으로 변환하는 과정을 자동화해주는 서비스입니다.
HLS 변환 순서 예시
-
분할(Segmentation): 비디오 파일을 여러 개의 작은 세그먼트로 나눕니다.
-
인코딩(Encoding): 세그먼트를 다양한 비트레이트와 해상도로 인코딩하여 적응형 스트리밍을 지원합니다.
-
플레이리스트 생성(Playlist Creation): HLS 포맷에서는 각 세그먼트와 품질 옵션을 포함한 m3u8 플레이리스트 파일을 생성합니다.
AWS Elemental MediaConvert를 사용하면 이러한 복잡한 과정을 사용자가 직접 다룰 필요 없이 간편하게 MP4를 HLS로 변환할 수 있습니다
HLS와 DASH 스트리밍 프로토콜을 대응하는 비디오 플레이어 개발
크로스 브라우징
크로스 브라우징은 다양한 웹 브라우저에서 웹 애플리케이션이 일관되게 작동하도록 보장하는 과정입니다. 이를 위해 다음과 같은 점들을 고려해야 합니다
-
브라우저 호환성 테스트: 다양한 브라우저(Chrome, Firefox, Safari, Edge 등)에서 플레이어가 제대로 작동하는지 테스트합니다.
-
비디오 포맷 지원: 모든 브라우저가 HLS와 DASH를 네이티브로 지원하지 않기 때문에, 이러한 포맷을 지원하는 JavaScript 라이브러리(HLS.js, Dash.js)를 사용합니다.
-
반응형 디자인: 다양한 화면 크기와 해상도에서 비디오 플레이어가 잘 보이도록 반응형 디자인을 적용합니다.
공식 문서를 활용한 간단한 예시
여러 Video.js 등 비디오 라이브러리가 있지만, Plyr 라이브러리를 사용하는 예시를 소개해드리겠습니다.
- 최신 브라우저를 지원하고 간단하게 커스텀 가능한 HTML5 플레이어입니다.
- React용 라이브러리를 제공합니다. https://github.com/chintan9/plyr-react
import { useEffect, useRef } from "react";
import "./styles.css";
import "plyr-react/dist/plyr.css";
import Hls from "hls.js";
import Plyr, { APITypes, PlyrProps, PlyrInstance } from "plyr-react";
import * as dashjs from "dashjs";
const VideoPlayer = () => {
const ref = useRef<APITypes>(null);
useEffect(() => {
const loadVideo = async () => {
const video = document.getElementById("plyr") as HTMLVideoElement;
const setupHls = () => {
const hls = new Hls();
hls.loadSource("https://content.cdn.m3u8");
hls.attachMedia(video);
// @ts-ignore
ref.current!.plyr.media = video;
hls.on(Hls.Events.MANIFEST_PARSED, function () {
(ref.current!.plyr as PlyrInstance).play();
});
};
const setupDash = () => {
const player = dashjs.MediaPlayer().create();
player.initialize(video, "https://content.cdn.mpd", true);
// @ts-ignore
ref.current!.plyr.media = video;
player.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, function () {
(ref.current!.plyr as PlyrInstance).play();
});
};
if (Hls.isSupported()) {
setupHls();
} else if (dashjs.MediaPlayer.isSupported()) {
setupDash();
} else {
console.error("No supported streaming technology found.");
}
};
loadVideo();
// Clean up video element
return () => {
if (video.current) {
video.current.pause();
video.current.src = "";
}
};
}, []);
return (
<Plyr
id="plyr"
options={{ volume: 0.1 }}
source={{} as PlyrProps["source"]}
ref={ref}
/>
);
};
- 실제 프로젝트에서는 hls 소스와 dash 소스는 props로 전달 받는 형태로 구현했습니다.
video.current.onended를 활용하여 비디오가 종료된 후 실행할 콜백 이벤트를 추가했습니다. 이를 사용하여 종료 후 맞춤 추천 비디오를 노출하거나 다음 비디오로 이동하는 기능을 구현했습니다.- 크로스 브라우징 비디오 플레이어를 통해 다양한 브라우저(Chrome, Firefox, Safari, Edge 등)에 플레이어가 정상적으로 작동하였습니다.
마무리
- 컨텐츠 보호를 위한 시스템에 대해 학습하면서 불법 다운로드를 방지하고, 컨텐츠를 합법적으로 구매한 사용자에게만 제공하는 방법을 배우며 컨텐츠 보호의 중요성을 깨달았습니다.
- 비디오 스트리밍 서비스 구축의 다양한 측면을 경험하고 이해할 수 있었습니다.
- HLS와 DASH와 같은 스트리밍 프로토콜의 중요성을 알게 되었습니다.
