🔨 웹에서 RTSP 스트리밍 + video autoplay 삽질기

RTSP(Real Time Streaming Protocol)란?

IP 카메라(주로 CCTV와 같이 secure한 특징이 있는)에 많이 사용되는 동영상 프로토콜

 

 

목표

IP 카메라와 웹브라우저를 직접 연결해서 웹에서 영상을 나타내기

회사 업무 중 하나로 웹 브라우저에서 RTSP 프로토콜을 사용하는 비디오를 재생해야 했다.

IP 카메라가 이미 네트워크에 연결되어 있으니 어떻게든 되지 않을까? 🥹  라는 가벼운 마음으로 시작했으나 웹 브라우저에서 RTSP 비디오를 직접 재생하는 것은 불가능하다는 사실을 깨달을 수 있었다.

 

 

문제

As a rule, browsers do not support RTSP, so the video stream is converted for a browser using an intermediate server.

RTSP를 지원하는 브라우저가 없다^^

예전에는 Flash를 사용한다던가.. 어떻게든(!?) 동작하는 방법들이 있었지만 브라우저가 진화하면서 보안 문제로 불가능하게 되었다.

여기에서 말하는 보안 문제란, ipcamtalk의 설명처럼 브라우저는 Low-level TCP 소켓을 노출하지 않기 때문으로 추측되는데 프로토콜을 정확하게 모르기 때문에 일단 "안된다"는 결론을 얻었다.

 

 

 

😇 서버를 경유하기로 하고, 페이지를 만들자

서버에서 RTSP를 HLS(HTTP Live Streaming)로 변환하여 영상 주소Source를 전달, 웹에서 재생하기로 했다.

HLS는 이름에서 알 수 있듯이 HTTP 기반의 스트리밍 프로토콜이며 애플에서 만들었다. 때문에 웹 브라우저중에서는 Safari를 제외하고는 HLS를 지원하지 않는다.

그래서 Polyfill의 역할을 하는 패키지, VideoJS를 사용하여 페이지를 구현해야 한다.

 

예제1. VideoJS를 사용해서 HLS 스트리밍 예시

예제2. VideoJS React

React Functional Component 작성방식을 참고했다.

 

 

autoplay 삽질

예제2와 video options를 참고해서 autoplay: true를 설정했는데 안된다;

라이브러리의 문서 설명에서 권장하는 방법을 따라가보기로 했다.

 

tl;dr for VideoJS autoplay best practice

• Never assume autoplay will work.
• Using the muted attribute/option will improve the chances that autoplay will succeed.
• Prefer programmatic autoplay via the player.play() method, avoiding the autoplay attribute/option.

비디오 옵션으로는 autoplay.mute한 뒤, player가 재생할 수 있는 상태canplay가 되면 player.play()를 실행시키니 원하는대로 동작한다.

const videoJsOptions = {
  autoplay: "muted",
  responsive: true,
  fluid: true,
  sources: [
  {
    src:
      "https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8",
    type: "application/x-mpegURL"
  }]
};

const handlePlayerReady = (player) => {
playerRef.current = player;
  player.on("canplay", () => {
    player.play();
  });
};

(결과 예제를 첨부하고 싶었는데 codesandbox에서 안되는 원인을 찾는중이다ㅠㅠ)

 

 

Autoplay Availability

MDN을 보면 autoplay가 실행되기 위한 조건들이 있다. 아래 조건들 중 적어도 한 가지를 만족시켜야 autoplay가 동작할 것이라 기대라도 할 수 있다..^^

VideoJS가 말하는 권장 방식도 결국 이 조건들에 기반하는 것으로 보인다.

내 경우는 첫번째로 나와있는, 시작은 muted이거나 volume 값이 0인 상태로 설정한 후 재생시키는 방법이다.

• The audio is muted or its volume is set to 0
• The user has interacted with the site (by clicking, tapping, pressing keys, etc.)
• If the site has been allowlisted; this may happen either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface features
• If the autoplay feature policy is used to grant autoplay support to an iframe and its document.

 

마무리

일을 하면서 만나게 된 문제였지만 글을 쓰기 위해 RTSP가 웹 브라우저에서 안되는 이유가 무엇인지, Autoplay의 MDN 스펙 등을 한번이라도 더 찾아볼 수 있었다. 굉장히 사소하다고 생각한 옵션 하나에도 스펙이 정해져있으니.. 앞으로는 문제가 생기면 js autoplay not working 보다 mdn autoplay 를 먼저 검색해봐야겠다.

회사에서 남은 작업동안만큼은 내가 넷플릭스 개발자라고 최면을 걸어서 멋진 영상 스트리밍 페이지를 만들고싶다😜

 

참고

• https://qodbtn.tistory.com/392
• https://flashphoner.com/7-ways-to-stream-rtsp-on-the-page/#:~:text=As%20a%20rule%2C%20browsers%20do,browser%20using%20an%20intermediate%20server.