NodeJS HLS 스트리밍 예제

NodeJS 프레임워크, HLS 파일 스트리밍

2009년 애플은 HTTP 라이브 스트리밍(HTTP Live Streaming, HLS)을 출시하였다. HLS 는 HTTP 기반 적응 비트레이트 스트리밍 통신 프로토콜이다. 이 프로토콜은 다양한 미디어 플레이어, 웹 브라우저, 모바일 기기, 스트리밍 미디어 서버에서 지원되고 있다. NodeJS 프레임워크에서 HLS 스트리밍하는 예제를 만들어보자.

HLS 파일 스트리밍

테스트를 위해 사용한 HLS 규격의 콘텐츠 파일의 구조이다. playlist 는 비디오 콘텐츠의 갯수, 길이 등의 meta data 를 기술한다. 각 비디오 파일은 ts 확장자로 저장된다.

~/Videos$ tree
.
├── 20221130_095025
│   ├── playlist.m3u8
│   ├── segment-000.ts
…
│   └── segment-033.ts
└── 20221130_105945
    ├── playlist.m3u8
    ├── segment-000.ts
    ├── segment-001.ts
    ├── segment-002.ts
    ├── segment-003.ts
    └── segment-004.ts

HLS Player 백엔드 코드

express 웹서버를 생성하여 클라이언트에게 player.html 를 렌더링한다. hls -server npm 패키지를 사용하여 hls 인스턴스 객체를 생성한다. hls 인스턴스는 playlist 를 읽어서 ts segment 파일을 스트리밍한다.

const fs = require('fs');
const app = require('express')();
const hls = require('hls-server');

app.get('/', (req, res) => {
  return res.status(200).sendFile(`${__dirname}/public/player.html`);
});

const server = app.listen(8888);

new hls(server, {
  provider: {
    exists: (req, cb) => {
      fs.access(__dirname + req.url, fs.constants.F_OK, function (err) {
        if (err) {
          console.error("file is not exist : " + __dirname + req.url);
          return cb(null, false);
        }
        cb(null, true);
      });
    },
    getManifestStream: (req, cb) => {
      const stream = fs.createReadStream(__dirname + req.url);
      cb(null, stream);
    },
    getSegmentStream: (req, cb) => {
      const stream = fs.createReadStream(__dirname + req.url);
      cb(null, stream);
    }
  }
});

HLS Player HTML5 코드

player.html 는 클라이언트가 보는 페이지 이다. video 디렉토리에 있는 playlist 로 hls 인스턴스를 생성하여 스트리밍을 수행한다. 대부분의 미디어 제어의 코드는 hls -server 패키지에서 동작하기 때문에 어플리케이션에서는 API 호출해주는 부분만 있다.

<!DOCTYPE html>
<html>
  <head>
    <title>HLS Player</title>
  </head>
  <body>
    <video id="video" width="1280" height="720" controls></video>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script>
    const video = document.getElementById('video');
    const videoSrc = 'video/playlist.m3u8';

    if (Hls.isSupported()) {
      alert("Hls supported")
      const hls = new Hls();
      hls.loadSource(videoSrc);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        video.play();
      });            
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      alert("Hls not supported");
      video.src = videoSrc;
      video.addEventListener('loadedmetadata', () => {
        video.play();
      });
    }
    </script>
  </body>
</html>

위 코드로 구현한 server 의 전체소스는 makepluscode 의 github 에 공유하였다.

https://github.com/makepluscode/Recorder/tree/main/test/server

GitHub - makepluscode/Recorder: a simple camera recoder for windows by using gtk and gstreamer

a simple camera recoder for windows by using gtk and gstreamer - GitHub - makepluscode/Recorder: a simple camera recoder for windows by using gtk and gstreamer

github.com

참고자료

본 예제에서 사용한 npm 패키지

https://github.com/t-mullen/hls-server

GitHub - t-mullen/hls-server: Middleware for serving HTTP Live Streaming (HLS) compatible media streams.

Middleware for serving HTTP Live Streaming (HLS) compatible media streams. - GitHub - t-mullen/hls-server: Middleware for serving HTTP Live Streaming (HLS) compatible media streams.