hlsjsを最速で手元で動かしてみる

HLSとはHTTP Live StreamingというApple社が開発している通信プロトコルです。今回はHLSを使ってストリーミングデータを受信し扱うためのhls.jsについて紹介します。

必要なもの

ffmpeg
npm or yarn

Vite環境の作成

Viteは高速なフロントエンドツールです。詳細は省きますが簡単にTypescript環境が準備できます。任意のディレクトリで以下のコマンドを実行してください。

yarn create vite --template vanilla-ts

hls.jsの導入

hls.jsの登場です。プロジェクト内で以下のコマンドを実行してください。

yarn add hls.js

ストリーミングするコードを書く

src/main.tsの中身を以下に書き換えます。

import Hls from "hls.js";

if (Hls.isSupported()) {
  const video = document.querySelector<HTMLVideoElement>('#video')!;
  const hls = new Hls();
 
  hls.loadSource(
    '/output.m3u8'
  );
  hls.attachMedia(video);
  hls.on(Hls.Events.MANIFEST_PARSED, () => video.play());
}

つづいてプロジェクト直下にあるindex.htmlにvideoタグを配置します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <video id="video"></video>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

ストリームの生成

ストリームの生成には任意の動画が必要になります。今回はNHKの公式アーカイブから動画を拝借します。今回は焼き肉の動画を用いました。

動画のダウンロードが終わったら、プロジェクト直下にpublicフォルダを作成してください。

mkdir public

publicフォルダ中に動画ファイル(.mp4)を移動してください。

publicに移動し、ffmpegを使ってセグメントファイル・インデックスファイルを生成します。

cd public
ffmpeg -i yakiniku.mp4 output.m3u8

動作確認

開発サーバーを立ち上げます。

yarn dev

localhost:3000が起動します。

再生されました！！

その他の記事

公開日 2023/04/11

Thanks you for reading.