【2024年】ライブ配信システム(RTMP,HLS対応)の構築方法&ブラウザ視聴対応

この記事は約7分で読めます。

はじめに

どうも!ちょこです。今回はライブ配信システムを構築します。

前提

UbuntuサーバーにNginx-rtmp-moduleをインストールする。

なぜ配信システムを自前で組むのか

これは完全に中の人の都合である。学校の行事を配信することが決まり、それのツールを探していたのだ。

案に出たのがMicrosoft Teamsである。だが学校で管理しているアカウントのため、外部と通信ができない。保護者にも見せたかったため、Teamsは却下された。

その次には出たの案がYouTubeなどの動画配信サービスである。こちらは生徒の個人情報保護の観点からできるだけ公開なサービスを使いたくないため却下した。

こうなったら自前で配信システムを準備する必要がある。

RTMPとHLS

配信をするにあたってこの二つは切っても切り離せない関係だと思う。

RTMP(Real Time Messaging Protocol)はAdobeが開発したFlash Playerとサーバー間で、音声・動画・データをやり取りするストリーミングのプロトコル

https://ja.wikipedia.org/wiki/Real_Time_Messaging_Protocol

HTTPライブストリーミング(別名:HLS)は、Apple Inc.によって開発され、2009年にリリースされたHTTPベースの適応型ビットレートストリーミング通信プロトコルです。

https://en.wikipedia.org/wiki/HTTP_Live_Streaming
注意

Flash Playerのサポートが切れているため、RTMP配信をブラウザで見ることができない。
VLC Media Playerを使用することでRTMP配信を見ることができるが、PCまたはスマトフォンにVLC Media PlayerをインストールしてURLを入力し視聴すると言う難しい作業をさせてしまうため、視聴者に優しくないためブラウザから視聴できるようにした。

構築方法

サーバー構築をします。
行った環境は以下の通りです。

OSUbuntu Server 22.04
CPU4core(i7 8700)
RAM4GB(4096MB)
スペックなど
環境を最新に保つ
sudo apt update
sudo apt upgrade
sudo reboot
インストール

NginxとRTMPを使うためのモジュールをインストールする。

sudo apt install nginx libnginx-mod-rtmp
nginx.confの編集

/etc/nginx/nginx.confを何かしらのエディタで編集する。筆者はnanoが好きなのでなのを使用してます。

sudo nano /etc/nginx/nginx.conf

nginx.confに以下のように編集(追加)をする

rtmp {
    server {
        listen 1935;

        application live {
            live on;
        }
    }
}

RTMP配信アドレスを以下のように設定する。

rtmp://{サーバのIPアドレス}/live/{ストリームキー}

OBSでの設定例は以下の通りだ。

ポート解放

この時点でRTMPを使用して配信テストは試せる。ただ外部から配信をしたり、見たりすることができない。そのためポート解放を行う必要がある。

筆者の環境では、LAN内にサーバーがあるため、しなくてもLAN内であれば配信を行うことができるが、VPSなどを使用している場合は必ずする必要があるので注意です。

sudo ufw allow 1935/tcp
Nginxの起動
sudo systemctl start nginx

配信をしてみる

RTMPの構築はここかでで完成したので一旦配信テストを行う。

配信テストはOBSから行い、VLC media playerを使用して閲覧する。

VLCでネットワークソースを開きます。

rtmp://{サーバーのIPアドレス}:1935/{ストリームキー}

HLSに対応する

これで完了としても問題ないのだが、視聴者にVLCをインストールしてもらい、見てもらうと言うのは少し現実味がない。視聴者のことを考えてブラウザで見れるHLSに対応します。

HLSの記述

nginx.confを編集(追加)する。

パスに注意して作業する

rtmp {
    server {
        listen 1935;
        chunk_size 4096;
        application live {
            live on;
            record all;
            record_path /tmp/av;
            record_max_size 1K;
            record_unique on;
            hls on;
            hls_path /var/www/html/hls;
        }
    }
}
フォルダを作る
sudo mkdir /var/www/html/hls
配信を確認するページを作る。

配信を見るページをhtmlで作成する。ルートディレクトリに作成する。

sudo nano /var/www/html/player.html

<html>
  <head>
    <title>Live Streaming</title>
    <link href="https://vjs.zencdn.net/7.0/video-js.min.css" rel="stylesheet">
    <script src="https://vjs.zencdn.net/7.0/video.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.min.js"></script>
  </head>
  <body>
    <video id="live_streaming" width="1280" height="720"
       class="video-js vjs-default-skin" controls>
      <source
         src="./hls/ストリームキー.m3u8"
         type="application/x-mpegURL">
    </video>
    <script>
      var player = videojs("live_streaming");
      player.play();
    </script>
  </body>
</html>
Nginxを再起動

設定を反映させるために再起動する。

sudo systemctl stop nginx
sudo systemctl start nginx
ブラウザで配信の確認

配信がブラウザから観れるか確認する。

http://{サーバーのIPアドレス}/play.html

おわり

Nginxを使用してRTMP,HLS配信ができるように構築した。

調べてもできないものや情報が古いものがあったため色々修正しています。できないなどは聞いてくれたら答えれる範囲で答えようと思います。

コメント

タイトルとURLをコピーしました