さくらのクラウドにCentOS、Nginxを使い、ストリーミングサーバーを構築してライブ配信したい | ライタス株式会社

こんにちわ。
10月より新入社員として入社しました田所です。

入社して1か月が経とうとしています。 まだまだ分からないことだらけで参っております。 さて、今回も初学者の私目線で業務で学んだことをまとめていきます😘


今回やりたいことは記事のタイトルの通りで
  1. さくらのクラウドを使って
  2. CentOSに
  3. Nginxを入れて
  4. OBSでPCの画面を配信
ってだけです。



PCの画面をwebページで配信して閲覧できる様にします。
Youtubeの非公開とか限定公開のライブ配信みたいな感じです。
と、いうわけでざっくりですがアーキテクト図に落とし込んでみました。
絵に書くとなんかわかった気になれます(知らんけど)


今回RTMPという通信プロトコルで配信します。
RTMPの基礎的知識は↓で学びました
https://ygoto3.com/posts/live-streaming-and-rtmp-for-frontend-engineers/
※RTMPはTCPらしいです。(知らんかった)

ひとつずつ確実に消化していきます!!
※今回は実施しませんが、キャプチャボードを使って別の端末画面(PCのBIOSやゲーム等)をキャプチャして配信もできます(また記事にします)

ではいきましょう!!

1.サーバー(さくらのクラウド)を立てる

AWSなら触ったことあるんですが(実はAWS SAA持ち)、さくらのサーバーは一切使ったことなかったのでここもまとめておきます。
基本的にAWSでイメージすれば特に問題なくクリアできました。
↓こちらを参考にしました↓
https://mebee.info/2019/11/09/post-3567/


さくらのクラウドのコンソール画面から「サーバー」→上にある「追加」を押す
そしてサーバーのスペックを決めていきます
今回は以下のようにしました(抜粋)
  • 仮想コア: 2
  • メモリ: 4GB
  • SSD: 20GB
  • OS: CentOS7.7
今回はSSHでサーバーに入り込む際に公開鍵認証を行うことにします。
やり方は↓の公式に詳細があるのでこの通りに行います。
https://manual.sakura.ad.jp/cloud/controlpanel/settings/public-key.html
C:\Users\ユーザー名>ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (C:\Users\ユーザー名/.ssh/id_rsa):
Created directory 'C:\Users\ユーザー名/.ssh'.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in C:\Users\ユーザー名/.ssh/id_rsa.
Your public key has been saved in C:\Users\ユーザー名/.ssh/id_rsa.pub.
The key fingerprint is:
xxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx XXXXX\ユーザー名@PC
The key's randomart image is:
+---[RSA 2048]----+
|=**++.o          |
|OEo* o o         |
|==*+* o o        |
|=oo+*o o .       |
|..o= o..S        |
|. o.o oo         |
|.+ . o.          |
|o . ..           |
|   ..            |
+----[SHA256]-----+

これで
C:\Users\ユーザー名/.ssh/にid_rsa.pub(公開鍵)が
C:\Users\ユーザー名/.ssh/にid_rsa(秘密鍵)が
生成されました。

で、メモ帳でもなんでもいいのでC:\Users\ユーザー名/.ssh/の中のid_rsa.pub(公開鍵)を開いて中身をまるっとコピーし、
このようにペーストしたらおけ!(秘密鍵はSSH接続の時使用する)
そして「作成」をポチっと押したら起動し始めるので暫し待ちます。
その間にさくらクラウド側でのファイアウォールの設定をやってしまいます。
「ネットワーク」→「パケットフィルタ」を押して右上の追加を押します。
ルールのコピー元: なし
名前: ストリームサーバー(任意)
を入れて、「作成」を押します。
作られたパケットフィルタを選択して「ルール」タブの「追加」を押してルールを設定していきます。
最終的にはこんな感じにしました。
1. 自分のPCからのRTMP(1935番ポート)を許可
2. webからのアクセス(80番ポート)を許可(※必要に応じて送信元ネットワークを追加してください)
3. SSHでの接続を許可(送信元ネットワークに自分のグローバルIPを追加しておくとより安全)
4. それ以外の通信を拒否
フィルタリングルールは上から評価されるので3.の拒否のルールは一番下に設定します。
そして右上の「反映」を押すことで設定が有効化されます。
以上でクラウド側でのフィルタ設定は終了です。

先ほどのサーバー起動状態になっているはずなので、次はSSHでログインします。



2.SSHでサーバーへ入る

次はSSHでサーバーへ入ります
伝家の宝刀Tera Termさんを使って接続します。
さくらクラウドのコンソールからサーバーのグローバルIPをコピーします。(NICの欄に有る)
そしてTera Termを起動!!!
先ほどコピーしたIPアドレスを入れて
ユーザーはrootとして、「RSA/SDA/ECDSA/ED25519鍵を使う」を選択し先ほど生成した秘密鍵(C:\Users\ユーザー名/.ssh/にid_rsa)を選択
[root@root ~]
これで無事サーバーへ接続できました。
次はNginxの諸々をインストール&セットアップします

3.NginxとRTMP モジュールをインストール


ここがなかなかのつまりポイントでした。(笑)

基本は↓こちらを参考
https://qiita.com/hagane5563/items/842afe6d6e7100db3a28
とりあえずアプデ(地味に時間かかる奴)
yum update -y
いろいろ足りていないツール達をインストール
yum install -y wget gcc pcre-devel openssl openssl-devel vim
RTMPモジュールダウンロード
git clone https://github.com/arut/nginx-rtmp-module.git
Nginxをダウンロード
wget http://nginx.org/download/nginx-1.8.0.tar.gz
tar zxf nginx-1.8.0.tar.gz
.configureを実行
cd nginx-1.8.0
./configure --sbin-path=/usr/sbin/nginx \
--conf-path=/etc/nginx/nginx.conf \
--error-log-path=/var/log/nginx/error.log \
--http-log-path=/var/log/nginx/access.log \
--pid-path=/var/run/nginx.pid \
--lock-path=/var/run/nginx.lock \
--prefix=/usr/local/nginx \
--user=nginx \
--group=nginx \
--with-http_ssl_module \
--with-http_realip_module \
--with-http_addition_module \
--with-http_sub_module \
--with-http_dav_module \
--with-http_flv_module \
--with-http_mp4_module \
--with-http_gzip_static_module \
--with-http_random_index_module \
--with-http_secure_link_module \
--with-http_stub_status_module \
--add-module=/root/nginx-rtmp-module
makeしてインストール
make
make install
※CentOS8でmakeするとシェルスクリプトの構文エラーが連発しました。
結局解決できずだったので、7に変更したらいけました。
Nginx、RTMPライブラリ、CentOSのバージョンが関係ありそうです
後日改めて対処法を探そうと思います。
Nginxユーザー追加
groupadd nginx
useradd -g nginx nginx
usermod -s /bin/false nginx
Nginxの設定を弄っていく
    vim /etc/nginx/nginx.conf
下記内容を追加する
rtmp {
    server {
        listen 1935;
        access_log /var/log/nginx/rtmp_access.log;
            application live1(※任意で変える) {
            live on;
            wait_video on;
            hls on;
            hls_path /usr/local/nginx/html/;
            hls_fragment 5s;
        }
    }
}
※live1名前の所は問題ないが、後でOBSの設定で使用する
Nginx起動
/usr/sbin/nginx
firewall-cmdでポートを解放する
#80と1935を解放
firewall-cmd --add-port=80/tcp --zone=public --permanent
firewall-cmd --add-port=1935/tcp --zone=public --permanent
#有効化
firewall-cmd --reload
#有効化されているか確認する
firewall-cmd --list-all
public (active)
(略)
ports: 80/tcp 1935/tcp
(略)

#lsofコマンドでもポートの確認
lsof -i -P |grep nginx
nginx   31473  nginx    7u  IPv4  XXXXX      0t0  TCP *:1935 (LISTEN)
nginx   31473  nginx    8u  IPv4  XXXXX      0t0  TCP *:80 (LISTEN)
index.htmlの編集
vim /usr/local/nginx/html/index.html
以下に書き換えます。
HTMLの編集には↓を参考

https://qiita.com/okumurakengo/items/0c69d95553be89521b6d
headタグ

<meta charset="UTF-8"></meta>
 <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
 <meta content="ie=edge" http-equiv="X-UA-Compatible"></meta>
 <title>Document</title>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet"></link>
<link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet"></link>
    <script src="https://vjs.zencdn.net/7.3.0/video.js"></script>"
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-flash/2.1.2/videojs-flash.min.js"></script>
    <style>
        .disabled {
            cursor: not-allowed;
            opacity: .5;
        }
    </style>


bodyタグ
<video class="video-js vjs-default-skin u-full-width" controls="" data-setup="{}" height="500" id="example_video_1" poster="" preload="none">

<source src="rtmp://グローバルIPアドレス/任意の名前/任意のパス" type="rtmp/mp4"></source>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
ブラウザからサーバーにHTTPアクセスすると動画再生のプレイヤーが表示されていたらとりあえずOK

4.OBSでPCの画面を配信

↓OBSをこちらからダウンロード&インストール
https://obsproject.com/ja/download


ソースの「+」を押して「画面キャプチャ」を追加するとPC画面をキャプチャしてくれます。
カメラ、ビデオキャプチャ等は「映像キャプチャデバイス」を追加します。

さ、続いて立てたサーバーへ配信する設定をします。
「設定」→「配信」で次のように設定します。
rtmp://サーバーグローバルIPアドレス/live1
「live1」はnginx.confで任意で付けたサーバー名ですので変えている場合はその名前を入れます。
これで設定はオッケーです!
OBSで「配信開始」を押します。
右下のバーが緑色になっていればサーバーにちゃんと接続が成功している、ということになります。

さぁ配信をみてみましょう!!!!

さくらサーバーにHTTPでアクセスします

ちゃんとPC画面を配信できてます!

ただ問題がありまして、実は動画を再生するにはFlashPlayerを使用します。
FlashPlayerは2020年にサポート終了することもありますし、Chromeでは再生するにはいちいち許可したりする必要があるのでスマートではないですねぇ~"(-""-)"
ただ、RTMPはそもそもFlashPlayerの使用が前提みたいです。
(※chromeでFlashPlayerを許可する方法は
https://helpx.adobe.com/jp/flash-player/kb/cq09042354.htmlを参考)
なので

次回はFlashPlayerを回避して再生できるサーバー構築に挑戦します!!

これからも精進いたします!!😉
それでは。

コメント

このブログの人気の投稿

[Virus Error]と件名に挿入されたメール

Firefoxを起動したら、Couldn't load XPCOM. というエラーが出る時の対処法 | ライタス株式会社

マテビュー(マテリアライズドビュー:Materialized View)のせいで、表領域が削除ができない | ライタス株式会社