웹 생태계
웹 생태계 용어부터 정리하고 갈까요?
- WebAPI
Mozilla Foundation이 웹 앱과 웹 컨텐츠가 기기의 하드웨어 접근하고 기기의 데이터 저장소에 접근할 수 있도록 해주는 기기호환과 접근 API 스펙.*Web Audio API와는 일련의 관계도 없는 듯… - polyfill
HTML에서 제공하는 API 중 특정 브라우저에서 아직 지원하지 않는 기능을 워크어라운드로 API를 구현하는 써드파티 라이브러리 - active x control
한 마디로, 웹 브라우저를 통해 사용자 PC에 프로그램을 깔고, 그 웹사이트에 접속했을 때 그 프로그램을 실행해서 컨트롤 하는 기능 - hls.js (참고)
HTML 5의 video 엘레멘트와 호환해서 HTTP Live Streaming을 지원하는 Javascript 라이브러리. 따라서 따로 비디오 플레이어가 필요없다. - fragmented mp4 (참고)
MP4 컨테이너 자체는 헤더에 길이를 명시하고 있기 때문에 스트리밍할 수 있는 포멧이 아니다. 이를 해결하기 위해 만들어진 포맷.
미디어 스트리밍(Streaming)이란?
클라이언트(ex, 브라우저) 로컬드라이브에 파일을 다운로드 하지 않고, Viewer 또는 Listener에게 미디어를 전달하는 방식. 따라서, Progressive Download는 Streaming이 아니다.
프로그레시브 다운로드(Progressive Download)란?
말 그대로 미디어 파일을 다운 받으면서 플레이하는 방식을 말한다.
이 때, 유저의 로컬에 파일이 다운로드되기 때문에, 유료 디지털 컨텐츠에 대한 보안이 되지 않는다.
Progressive Download의 한계를 정리해 보면,
- 디지털 컨텐츠 보안
- Adaptive Bitrate Streaming 미지원
- Seeking 미지원
그런데 Seeking 미지원 문제를 해결하기 위해서 Pseudo Streaming이 사용된다.
스트리밍 포맷(Streaming Format)
스트리밍 포맷은 아래 3가지 구성요소로 결정된다.
- Protocol
- Transport, a.k.a. Transport Container
- Codec
예로, 이에 따르면 HLS 스트리밍 포맷이란,
- Protocol: HTTP
- Transport: MPEG-TS
- Codec
- Video: h264
- Audio: aac and mp3
브라우저에서 스트리밍 미디어 컨텐츠를 재생하려면?
브라우저에서 스트리밍 미디어 컨텐츠를 재생하려면 다음이 필요하다.
- 해당 브라우저용 미디어 스트리밍 플레이어
- 미디어 스트리밍 서버
해당 브라우저에서 미디어 스트리밍 플레이어를 구현하기 위한 핵심은 다음과 같다.
- 외부에서 전송되는 미디어 스트리밍 데이터를 디코딩할 수 있다.
- 디코딩된 데이터를 비디오 버퍼에 추가할 수 있다.
여기서 1번의 경우는 브라우저마다 디코딩할 수 있는 코덱이 다 다르다.
2번의 경우는 3가지 경우를 생각해 볼 수 있다.
- 표준 단체인 Mozilla의 API인 MSE(Media Source Extensions)를 사용 *MSE의 개념에 대해서는 여기 참고
- 브라우저 독자적인 API를 사용
- 없음
팁들
- W3C에서 standard 다음의 4가지 스테이지를 거쳐서 완성된다.
Working Draft (WD), Candidate Recommendation (CR), Proposed Recommendation (PR), and W3C Recommendation (REC)
유용한 툴
- HTML5test – How well does your browser support HTML5? https://html5test.com/
- ECMAScript 6 compatibility table https://kangax.github.io/compat-table/es6/
- Can I use… Support tables for HTML5, CSS3, etc https://caniuse.com/#feat=audio-api
참고자료
Demystifying HTML5 Video Player – Eyevinn Technology – Medium https://medium.com/@eyevinntechnology/demystifying-html5-video-player-e480846328f0
