HLSによる社内向け動画配信

2022-01-20

HLSによる社内向け動画配信

記事をシェアする

[！] この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

当社では、社内向けの動画配信を実施しています。事前収録した動画を配信していますが、この度、生配信の可能性が出たため、検証を行いました。大衆向けの配信では、YouTubeやFacebookまたはInstagramなどのサービスを利用するのが一般的だと思いますが、今回は、外部サービスを利用しない配信方法で検証しました。

HLSとは

HLS（HTTP Live Streaming）は、現在、もっとも一般的に使用されている動画配信プロトコルです。Appleが開発し、RFCとして標準化 ⧉されています。

HLSでは、以下の2種類のファイルをWebサーバーで公開することにより、配信を実現しています。

メディアセグメント：動画等を指定時間（例えば10秒）ごとに分割したファイル。TS（MPEG-2 Transport Stream）形式などが用いられる
再生リスト：メディアセグメントを順に再生するための情報を記載したファイル（M3U8形式）

検証環境

今回の検証では、以下のものを用意しました。

ソフトウェア

以下のオープンソースソフトウェアを使用します。

nginx ⧉：Webサーバー
OBS Studio ⧉：動画を録画・配信するソフト
HLS.js ⧉：Webブラウザー内で動画を再生させるためのJavaScriptライブラリー

ハードウェア

配信用マシン：Windows 10上でOBS Studioを動作させます
Webサーバー用マシン：Windows Server 2012 R2上でnginxを動作させます（CPU：仮想4コア、メモリ：8 GB）
視聴用マシン：Webブラウザーで配信を視聴するのに使用します
Webカメラ：USBで配信用マシンに接続します

設定

以下の設定を行いました。なお、nginxについては一般的なWebサーバーとして使用しますので、設定方法は割愛します。

OBS Studio

ここでは、HLS独自の設定（YouTube配信等と異なる設定）をご紹介します。

［設定］ウィンドウを開き、以下のとおり設定します。

［出力］タブ
- 出力モード：詳細
  - 録画
    - 録画ファイルのパス：<Webサーバー用マシンのnginxを配置したフォルダー>/html
    - 録画フォーマット：m3u8
［詳細設定］タブ
- 録画
  - ファイル名書式設定：xxx

ソース等の設定については割愛します。

HTML

HLS.jsのサンプル ⧉を参考に、以下のような内容をindex.htmlとして保存し、nginxのhtmlフォルダーに配置します。

1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>HLS Test</title>
6
</head>
7
<body>
8
<h1>HLS Test</h1>
9
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
10
<!-- Or if you want a more recent alpha version -->
11
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@alpha"></script> -->
12
<video autoplay controls id="video" height="540" width="960"></video>
13
<script>
14
  var video = document.getElementById('video');
15
  var videoSrc = 'xxx.m3u8';
16
  if (Hls.isSupported()) {
17
    var hls = new Hls();
18
    hls.loadSource(videoSrc);
19
    hls.attachMedia(video);
20
  }
21
  // HLS.js is not supported on platforms that do not have Media Source
22
  // Extensions (MSE) enabled.
23
  //
24
  // When the browser has built-in HLS support (check using `canPlayType`),
25
  // we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
26
  // element through the `src` property. This is using the built-in support
27
  // of the plain video element, without using HLS.js.
28
  //
29
  // Note: it would be more normal to wait on the 'canplay' event below however
30
  // on Safari (where you are most likely to find built-in HLS support) the
31
  // video.src URL must be on the user-driven white-list before a 'canplay'
32
  // event will be emitted; the last video event that can be reliably
33
  // listened-for when the URL is not on the white-list is 'loadedmetadata'.
34
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
35
    video.src = videoSrc;
36
  }
37
</script>
38
</body>
39
</html>

配信実施

OBS Studioの［録画開始］をクリックすることで、配信できました。視聴用マシンのWebブラウザーでindex.htmlのURLを指定することで、配信を視聴できました。

負荷試験

視聴者が多数いることを想定し、以下のようにJMeterを使用した負荷試験を行いました。JMeter自体のインストール方法は割愛します。

HLS Pluginのインストール

JMeter Plugins Manager ⧉をダウンロードし、JMeterのlib\extフォルダーに格納
JMeterのbinフォルダーに、以下の内容でsetenv.batというファイルを作成
```
1
set JMETER_LANGUAGE=-Duser.language="ja"
```
プロキシ環境下の場合は、JMeterのbinフォルダーにあるjmeterw.cmdをテキストエディターで開き、jmeterの引数にプロキシを指定 ⧉して保存
```
1
#call jmeter %*
2
call jmeter --proxyHost <プロキシサーバーのホスト名> --proxyPort <プロキシサーバーのURL> %*
```
JMeterのbinフォルダーにあるjmeterw.cmdをダブルクリック
［オプション］>［Plugin Manager］をクリック
［JMeter Plugins Manager］で［Available Pludins］タブをクリック
［BlazeMeter - HLS Plugin］にチェックを入れ、［Apply Changes and Restart JMeter］をクリック

テストの作成

左ペインの［テスト計画］を右クリックし、［追加］>［Threads (Users)］>［スレッドグループ］をクリック
右ペインの［スレッドプロパティ］>［スレッド数］に、接続の本数を入力
左ペインの［テスト計画］>［スレッドグループ］を右クリックし、［追加］>［サンプラー］>［bzm - Stream Sampler］をクリック
右ペインの［Video］>［URL］に、m3u8ファイルのURLを指定
ツールバーの［テスト計画を保存］をクリック
［ファイル名］にyyy.jmxと入力し、［保存］をクリック

テストの実施

yyy.jmsを、JMeterのbinフォルダーにあるjmeter-n.cmdにドラッグすると、負荷試験が開始されます。Webサーバー用マシン上でトラフィックを確認しました。

同時接続数が500の場合

同時接続数が1000の場合

視聴用マシンで動画を閲覧し、配信品質が問題ないことを確認しました。デベロッパーツールを開くと、xxx.m3u8と各TSファイルを取得している様子が見て取れました。

デベロッパーツール

おわりに

外部サービスを使用しなくても、生配信の検証環境が、意外と簡単に作れることが分かりました。

記事をシェアする