ko
ko
가우딘, 전체보기

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

윌슨의 개발지식

웹 스트리밍

웹 생태계

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

  • 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. 외부에서 전송되는 미디어 스트리밍 데이터를 디코딩할 수 있다.
  1. 디코딩된 데이터를 비디오 버퍼에 추가할 수 있다.

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

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

  1. 표준 단체인 Mozilla의 API인 MSE(Media Source Extensions)를 사용 *MSE의 개념에 대해서는 여기 참고
  1. 브라우저 독자적인 API를 사용
  1. 없음
브라우저에서 스트리밍 미디어 컨텐츠를 재생하려면?

팁들

  • 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

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google
Spotify
Consent to display content from Spotify
Sound Cloud
Consent to display content from Sound