Gaudio Lab
Contact us

Blog

윌슨의 개발지식- 웹스트리밍

Gaudio Lab
  • Developer
  • Tech

윌슨의 개발지식

웹 스트리밍

웹 생태계

웹 생태계 용어부터 정리하고 갈까요?

  • 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. 디코딩된 데이터를 비디오 버퍼에 추가할 수 있다.

여기서 1번의 경우는 브라우저마다 디코딩할 수 있는 코덱이 다 다르다.

2번의 경우는 3가지 경우를 생각해 볼 수 있다.

  1. 표준 단체인 Mozilla의 API인 MSE(Media Source Extensions)를 사용 *MSE의 개념에 대해서는 여기 참고
  2. 브라우저 독자적인 API를 사용
  3. 없음
본문 이미지

팁들

  • W3C에서 standard 다음의 4가지 스테이지를 거쳐서 완성된다. Working Draft (WD), Candidate Recommendation (CR), Proposed Recommendation (PR), and W3C Recommendation (REC)

유용한 툴

참고자료

Demystifying HTML5 Video Player – Eyevinn Technology – Medium https://medium.com/@eyevinntechnology/demystifying-html5-video-player-e480846328f0