Raspberry Pi ✕ Nginxで RTMP & HLS ストリーミングサーバ

現在、このブログを運用している、Raspberry Pi 2 ✕ Nginx サーバに、RTMPサーバを構築しました。

Nginx に RTMP モジュールを追加

Nginx にモジュールを追加するにはコンパイルをし直さなければならないので、apt-get install していた Nginx 1.6.2 から現時点で最新の Nginx 1.11.13 をインストールし直し、環境を移行しました。

nginx にモジュールを追加してアップデート (apt-get からソースコードのインストールに変更)

※ メモ
バージョン 1.9.11 以降、動的モジュールがサポートされ始めているようです。
nginx-1.9.11で動的モジュールをサポート – インフラエンジニアway – Powered by HEARTBEATS

RTMPサーバの設定

nginx.conf

http {} の外に rtmp{} の設定を追加します。

$ sudo vi /usr/local/nginx/conf/nginx.conf
user www-data;
worker_processes  1;

pid   /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    （設定〜略）
    include /usr/local/nginx/conf.d/*.conf;
}

# RTMP
include /usr/local/nginx/conf.d/rtmp-conf;

$ sudo vi /usr/local/nginx/conf/nginx.conf

user www-data;

worker_processes 1;

pid /var/run/nginx.pid;

events {

worker_connections 1024;

}

http {

（設定〜略）

include /usr/local/nginx/conf.d/*.conf;

}

# RTMP

include /usr/local/nginx/conf.d/rtmp-conf;

nginx.conf は短くしておきたいので、設定は外部ファイルにしました。

rtmp-conf

conf.d に RTMPの設定ファイル rtmp-conf を作成しました。

Android でも見れるようにHLSの設定もしています。

$ sudo vi /usr/local/nginx/conf.d/rtmp-conf

rtmp {
  server {
    listen 1935;
    chunk_size 4096;
    access_log /var/log/nginx/rtmp_access.log;

    application live {
      live on;
      hls  on;
      record off;
      hls_path /サーバの公開ディレクトリ/live/hls;
      hls_fragment 1s;
      hls_type live;
    }
  }
}

$ sudo vi /usr/local/nginx/conf.d/rtmp-conf

rtmp {

server {

listen 1935;

chunk_size 4096;

access_log /var/log/nginx/rtmp_access.log;

application live {

live on;

hls on;

record off;

hls_path /サーバの公開ディレクトリ/live/hls;

hls_fragment 1s;

hls_type live;

}

設定項目に関してはこちらのブログ記事を参考にさせて頂きました。
nginxでrtmp配信サーバを構築する【完全版】 | VariedTasteFinder

（個人的メモ）

※ 最初「rtmp.conf」という名前でファイルを作成したのですが、http{} の中で conf.d ディレクトリ配下の拡張子 .conf ファイルを include するようにしてあるため、http{} の中で rtmp{} が読み込まれる形になってしまい失敗しました(；´∀｀)

ディレクトリ構成とかはもっと考えて行った方が良いのかもしれない(´・ω・｀)

$ ls /usr/local/nginx/conf.d/
80.conf  8080.conf  rtmp-conf

1 2	$ ls /usr/local/nginx/conf.d/ 80.conf 8080.conf rtmp-conf

hls_path のディレクトリ作成

hls_path で設定したディレクトリを作成します。

$ sudo mkdir /サーバの公開パス/live
$ sudo mkdir /サーバの公開パス/live/hls

1 2	$ sudo mkdir /サーバの公開パス/live $ sudo mkdir /サーバの公開パス/live/hls

構文チェック

$ sudo nginx -t
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

$ sudo nginx -t

nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok

nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

※ hls_path のディレクトリが存在しない時下記のような、mkdir を促すエラーになります。

$ sudo nginx -t
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: [emerg] mkdir() "/var/www/vhosts/default/live/hls" failed (2: No such file or directory)
nginx: configuration file /usr/local/nginx/conf/nginx.conf test failed

$ sudo nginx -t

nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok

nginx: [emerg] mkdir() "/var/www/vhosts/default/live/hls" failed (2: No such file or directory)

nginx: configuration file /usr/local/nginx/conf/nginx.conf test failed

↑コピペしたままでディレクトリが間違っていました

nginx を再起動

$ sudo service nginx restart

1	$ sudo service nginx restart

配信ページの設定

2017.11.12 加筆

最初 video.js を使用していたのですが、久々に試してみたらブラウザでエラーが出て再生出来なくなっていました。

chrome でこんな感じのエラーが出ていました。

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media. d {code: 4, message: "No compatible source was found for this media."}

1	VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media. d {code: 4, message: "No compatible source was found for this media."}

色々やってみましたが解消出来なかったので video.js を辞めて hls.js に変更しました。

<!DOCTYPE html>
<html lang="en" class="">
<head>
</head>
<body>

<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('/live/hls/stream.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

if(Hls.isSupported()) {

var video = document.getElementById('video');

var hls = new Hls();

hls.loadSource('/live/hls/stream.m3u8');

hls.attachMedia(video);

hls.on(Hls.Events.MANIFEST_PARSED,function() {

video.play();

});

}

</script>

</body>

</html>

こちらの記事を参考にさせて頂きました。

.hlsをブラウザ関係なく一発再生する “hls.js” – バッカムブログ

※ loadSource の所は IPアドレスを指定してドメインからアクセスすると

No 'Access-Control-Allow-Origin' header is present on the requested resource.

1	No 'Access-Control-Allow-Origin' header is present on the requested resource.

といったエラーになります。

以下は、加筆前の video.js の記事です

配信ページの置場はどこでも大丈夫です。

今回は先程作成した live ディレクトリの下に置いてみました。

$ sudo vi /公開ディレクトリ/live/index.html

<!DOCTYPE html>
<html lang="en" class="">
<head>
  <link href="http://vjs.zencdn.net/4.6/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/4.6/video.js"></script>
</head>
<body>

  <video id="rtmp live stream" class="video-js vjs-default-skin" controls
   preload="auto" width="640" height="480" data-setup='{}'>

    <!-- 配信先のもろもろのURL -->
    <source src="http://192.168.0.XX/live/hls/stream.m3u8" type='application/x-mpegURL'>
    <source src="rtmp://192.168.0.XX/live/stream" type='rtmp/mp4' />
    <source src="rtsp://192.168.0.XX/live/stream" type='rtsp/mp4' />

  </video>

</body>
</html>

$ sudo vi /公開ディレクトリ/live/index.html

<!DOCTYPE html>

<head>

</head>

<body>

<video id="rtmp live stream" class="video-js vjs-default-skin" controls

preload="auto" width="640" height="480" data-setup='{}'>

</video>

</body>

</html>

URLについて

192.168.0.XX のところは、サーバのIPアドレス
/live/ は、rtmp {} の設定で application live {} で設定してある文字列
/stream は配信時に設定する任意のストリームキー

ソースコードはこちらの記事でご紹介下さっているものを使用させて頂きました。
Live Streaming on Web 概観 – Qiita

配信ページのディレクトリにBASIC認証追加

sudo vi /usr/local/nginx/conf.d/80.conf
    server {
        listen 80;
（略）
        location /live/ {
            auth_basic "Restricted";
            auth_basic_user_file /etc/nginx/.htpasswd;
            proxy_pass http://backend;
        }
（略）
}

sudo vi /usr/local/nginx/conf.d/80.conf

server {

listen 80;

（略）

location /live/ {

auth_basic "Restricted";

auth_basic_user_file /etc/nginx/.htpasswd;

proxy_pass http://backend;

}

（略）

}

クライアント

ffmpeg でやるのが簡単かと思いましたが、いつの間にか Mac で ffmpeg 使えなくなってる orz

そのうち対応するとして今回は OBS というソフトを使いました。

配信設定など、こちらの記事を参考にさせて頂きました。
nginx-rtmp-moduleでお試しLive配信環境を作る – Qiita

iMac で何故かカメラが認識されず、とりあえず画面共有でストリーミングテストを行いました。

配信確認

PCからもAndroid からもバッチリ！声も聴こえる！????

参考にさせて頂きました

コメントはこちらからコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

Nginx に RTMP モジュール を追加