tomatoaiu の Tech Blog

プログラミングやツールについてのまとめブログ

【GStreamer】テスト動画をhlsで配信してブラウザで視聴する

GStreamer node.js JavaScript 開発環境構築

はじめに

GStreamerのテスト動画をHTTP Live Streaming (HLS)形式にして配信し、Google Chromeからアクセスして視聴したいと思います。HLSの動画を視聴するためにhttp-serverでWebサーバーを立ててNode.jsを利用したWebページを作成したいと思います。

環境

今回利用する環境のバージョンについてです。

  • Node.js v14.5.0
  • npm v6.14.6
  • GStreamer v1.16.2
  • gst-launch-1.0 v 1.16.2

HLS形式の動画を視聴するための流れ

HTTP Live Streaming (HLS)形式の動画を視聴するためのWebページを作成する
↓
GStreamerのテスト動画をHTTP Live Streaming (HLS)にする
↓
Webサーバで動画ファイルとWebページを配信
↓
ブラウザでアクセス

環境構築

まずは、環境を作成するためのプロジェクトフォルダを作成します。そして、cdコマンドでその中に移動します。

mkdir hls-sample
cd hls-sample

Node.jsを利用できるようにプロジェクトフォルダを初期化します。これによりpackage.jsonが出来上がります。

npm init -y

HTTP Live Streaming (HLS)形式の映像をWebページで視聴するために、hls.jsを利用します。

npm i hls.js

hls.jsを利用するためにモジュールを読み込むことができて、JavaScriptファイルをバンドルすることができるParcelを利用します。

npm i -D parcel-bundler

GStreamerで動画をHLS形式に変換したときに生成されるファイルをWebサーバで配信する必要があるのでhttp-serverを利用します。

npm i -D http-server

サンプルコード作成

srcフォルダを作成して、その中にindex.htmlとindex.jsを作成します。

mkdir src
touch src/index.html
touch src/index.js

現在のディレクトリについてです。

├── package-lock.json
├── package.json
└── src
    ├── index.html
    └── index.js

src/index.html

hlsを視聴するためのWebページになります。<video id="video"></video>が動画を表示するタグになります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video id="video"></video>
    <script src="./index.js"></script>
</body>
</html>

src/index.js

hlsを視聴するため処理部分です。hls.loadSource("http://localhost:8080/playlist.m3u8");この部分で今回hlsを視聴するためのurlを指定します。

import Hls from "hls.js";

if (Hls.isSupported()) {
  const video = document.getElementById("video");
  const hls = new Hls();

  hls.attachMedia(video);
  hls.on(Hls.Events.MEDIA_ATTACHED, function () {
    console.log("video and hls.js are now bound together !");
    hls.loadSource("http://localhost:8080/playlist.m3u8");
    hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
      console.log(
        "manifest loaded, found " + data.levels.length + " quality level"
      );
    });
  });
}

ビルド

以下のコマンドで、Parcelを利用して先ほど作成したソースコードをビルドします。

npx parcel build src/index.html --public-url ./

これにより、distフォルダが作成され、その中にhlsを視聴するためのWebページが作成されます。

├── dist ← new
│   ├── index.html ← new
│   ├── src.86cc6b09.js ← new
│   └── src.86cc6b09.js.map ← new
├── package-lock.json
├── package.json
└── src
    ├── index.html
    └── index.js

また、--public-url ./オプションを設定することで、http-serverでビルドしたソースコードのJavaScriptファイルを読み込むことができるようになります。

テスト動画をHLS形式にする

動画はvideotestsrcを利用します。それをhlsに変換します。それらを実行するために以下のコマンドを実行します。

gst-launch-1.0 videotestsrc is-live=true ! x264enc ! mpegtsmux ! hlssink max-files=5

コマンドを実行するとplaylist.m3u8というファイルがプロジェクトフォルダの直下に作成されます。また、segment00000.tsというようなファイルも作成されます。これは、GStreamerの先ほどのコマンドの指定max-files=5で最大5つのファイルが連番で作成されます。

├── dist
│   ├── index.html
│   ├── src.86cc6b09.js
│   └── src.86cc6b09.js.map
├── package-lock.json
├── package.json
├── playlist.m3u8 ← new
├── segment00000.ts ← new
├── segment00001.ts ← new
├── segment00002.ts ← new
├── segment00003.ts ← new
├── segment00004.ts ← new
└── src
    ├── index.html
    └── index.js

Webサーバで配信

ここまでで一通りの準備ができたので、あとはWebページとhlsのストリームをWebサーバにて配信するだけです。

http-serverを利用してWebサーバを立てます。

npx http-server --cors -o dist

-o distを指定することでdistフォルダをルートにブラウザで開いてくれます。正しく動作すると以下のようにブラウザで見ることができます。

完成イメージ
完成イメージ

サンプルコード

作成したコードはgithubに保存しています。
https://github.com/tomatoaiu/hls-sample

おわりに

無事にテスト動画をHLS形式に変換して、ブラウザで視聴することができました。これをするために、GStreamer, Parcel, hls.js, http-serverを利用しました。それらを使うことで手軽にHLSをテストする環境ができました。

参考文献