Home

Published

- 7 min read

브라우저에서 HEVC 영상 스트리밍하기 #1

video
img of 브라우저에서 HEVC 영상 스트리밍하기 #1

브라우저가 지원해주는 코덱과 브라우저 API를 활용하는 개발자라면 뒤로가기 버튼을 누를것, 아쉽게도 당신에게 도움이 되는 내용은 없다.

Overview

우리 회사는 녹화기 제조업체이고 내가 속한 팀은 Windows desktop application & Windows service를 개발한다. 분야가 다르다보니 웹에 관심있는 사람들은 아쉽게도 별로 없다. 따라서 웹에서 영상을 스트리밍할 수 있는 방법은 없었다. 내 임무는 웹 위에서 비디오 스트리밍을 구현하는 것이었다.

결론: C++ & Emscripten으로 만든 웹 어셈블리 디코더, Go로 만든 미디어 서버, Streaming API와 Web Worker를 사용하는 Video/Canvas Video Player 라이브러리를 만들었고 현재는 ClearKey DRM을 지원하기 위해 고민 중이다.

우리 회사가 지원하는 프로토콜과 코덱

일단 우리 영상은 다음 프로토콜로 받을 수 있다.

  1. 자사 프로토콜
  2. RTP

코덱은 다음과 같다.

  1. HEVC(주류)
  2. AVC

브라우저가 지원하는 프로토콜과 코덱

브라우저가 지원하는 프로토콜은 다음과 같다.

  1. RTP(솔루션이 WebRTC 하나 뿐이지만 아주 많은 화상회의 솔루션 회사들이 사용하고 있고 트래픽이 적을때 한정으로 이미 업계에서 검증된 방식)
  2. HTTP/1과 HTTP/2(HLS, DASH 등 많은 솔루션이 존재하고 유명 VOD & Streaming 서비스 회사들이 사용하고 있고 ABR도 가능. 이미 업계에서 검증된 방식)
  3. WebSocket(중국 보안 서비스 회사들이 주로 사용한다, 중국한정으로 검증된 방식)
  4. HTTP/3(MOQT가 Facebook 주도하에 표준 제안되었으나 아직 정식으로 받아들여지진 않았음)

코덱은 벤더마다 다르다

브라우저는 허용된 코덱만 디코딩이 가능하며 허용되는 코덱 리스트는 벤더사마다 다르다. 우리 어플리케이션은 Chromium을 사용하며 Chromium은 우리가 전송하는 HEVC영상을 디코딩할 수 없다(라이센스 이슈).

해결방법

브라우저가 해석할 수 있는 형식으로 영상을 제공해주어야 한다. 방법은 두 가지.

  1. 트랜스코딩: 브라우저가 해석할 수 있는 코덱으로 바꾸기, 그 후 비지니스 사례에서 검증된 프로토콜로 전달
  2. 브라우저 사이드 디코딩: 브라우저가 받을 수 있는 프로토콜로 받기, 그 후 브라우저가 해석하게 두지 말고 내가 직접 해석하기

트랜스 코딩

장점

  1. 브라우저의 지원을 받을 수 있고 영상 암호화(DRM)가 가능하다.
  2. 다른 회사랑 협업할때 편하다.

단점

  1. 컴퓨팅 리소스를 많이 먹는다.
  2. 지연시간이 발생한다.
  3. 서버가 늘어난다.

여담: 영상 암호화는 장점인가?

https, wss썼으니 암호화한거 아니냐? 아니다. 그건 패킷을 암호화한거고 영상 자체를 암호화를 안하면 다운로드 및 유출 방법은 얼마든지 있다(적어도 나는 할줄안다).

영상을 다루는 프론트 개발자라면 알고있을텐데(그리고 알려지길 원하지 않을텐데) 영상 유출이 매출에 직접적인 타격을 받는 회사가 아니면 보통 DRM을 안한다(물론, 경우에 따라 기술적으로 불가능한 케이스도 있음).

심지어는 굉장히 민감한 영상을 다루는 성인물 컨텐츠 회사들(놀랍게도 전세계 매출 1위 회사 포함), 국내 교통공사, 경찰서 웹페이지에 스트리밍하는 영상들 DRM 안쓴다. 내가 직접 영상 유출가능한지 재현해서 확인했다.

왜 그럴까? 곰곰히 생각해봤는데 다른건 몰라도 확실한 것은 영상 암호화를 장점으로 받아들이는 사람들은 컨텐츠 공급자(영상을 올리는 사람들) 뿐이라는 것이다. 조사를 해보니 내 추리를 증명하는 유력한 증거도 있었다. DRM을 요구하는 주체가 보통 영화사…

위의 사례 & 내 개인적 경험으로 보아 컨텐츠 공급자가 아니면 영상 암호화를 장점으로 생각하지 않는다.

직접 디코딩

장점

  1. 컴퓨팅 리소스를 안먹는다.
  2. 트랜스코딩에 따른 지연시간이 사라진다.

단점

  1. 비표준이다.
  2. 브라우저 API들이 인코딩된 영상을 받도록 되어있다.
  3. DRM 불가능.
  4. 다른회사와의 협업때마다 고통스러움
  5. VOD 구현이 까다로움(브라우저 지원없이 직접 구현)

결론

브라우저 사이드 디코딩을 한다. 우린 이제 RTSP 세상으로 간다, 꽉잡아.

다음편에 계속