さくらのクラウドに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やゲーム等)をキャプチャして配信もできます(また記事にします)

ではいきましょう!!

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

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接続の時使用する)
そして「作成」をポチっと押したら起動し始めるので暫し待ちます。
その間にさくらクラウド側でのファイアウォールの設定をやってしまいます。
「ネットワーク」→「パケットフィルタ」を押して右上の追加を押します。
ルールのコピー元:　なし
名前: ストリームサーバー(任意)
を入れて、「作成」を押します。
作られたパケットフィルタを選択して「ルール」タブの「追加」を押してルールを設定していきます。
最終的にはこんな感じにしました。
１．　自分のPCからのRTMP(1935番ポート)を許可
２．　webからのアクセス(80番ポート)を許可(※必要に応じて送信元ネットワークを追加してください)
３．　SSHでの接続を許可(送信元ネットワークに自分のグローバルIPを追加しておくとより安全)
４．　それ以外の通信を拒否
フィルタリングルールは上から評価されるので３．の拒否のルールは一番下に設定します。
そして右上の「反映」を押すことで設定が有効化されます。
以上でクラウド側でのフィルタ設定は終了です。

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


２．SSHでサーバーへ入る

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

３．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

４．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]と件名に挿入されたメール

とあるWebシステムで、ユーザーのメール機能を使って運営者に問い合わせができるようにしているものがあります。 （いわゆる、mailtoを使ったもの） あるとき、運営者が受け取ったときに、[Virus Error] (本来の件名)　という件名のメールが 届いているというので、調べてほしいと依頼があり調べてみました。 メールのヘッダーを確認したところ、 ・auのiPhoneからだと思われる ・メールの配送ルートは一般的なもの ネットの情報を引いてみると、日本語の情報は少なく、海外の掲示板をあたったほうが いろいろと情報が出てくるようですが・・・よくわかりません。 記事を流し読みしていてわかったことは以下。 ・iCloud経由のメールでこれがつくことがあるらしい https://discussions.apple.com/thread/7060793 真相は不明ですが、iCloud側の実装で何かあったのかもしれませんね。 本記事は、弊社代表のブログ記事 なんでもIT屋の宿命 からの転載です。
続きを読む

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

イメージ
今朝方、Firefoxを起動したら、Couldn't load XPCOM. というエラーが出るようになり、起動できなくなりました。 確か、システムの復元が走ったので、そのせいかなと思います。 対処法については、こちらに記載がありました。 http://www.thewindowsclub.com/firefox-couldnt-load-xpcom-windows 英語だったので、日本語訳してみます。 XPCOM is a cross-platform component object model, which is similar to Microsoft COM, and is required for file and memory management, basic data structures and so on. XPCOMは、クロスプラットフォームコンポーネントで、Microsoft COMに似ています。このファイルはメモリー管理、基礎データ構造などに利用されています。 This Firefox start-up error can typically occur after performing a Windows System Restore or if you run it in a Sandbox. In fact I too received this message a few days back after I had system restore my omputer a couple of times to fix some other issues. Firefoxの起動エラーは、Windowsのシステム復元を行ったときに出ることがあります。実際、私もシステム復元のあとに、このメッセージが出た時は、次のように対処しました。 1] Open Firefox Menu, click the “?” Help button and select  Restart with addons disabled . If this solves your issue, you may need to disable some problem-causing addon. 1] Fire...
続きを読む

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

久々にOracleで困ったことに遭遇したのと、日本語の情報が少なかったので、 記録がてら記事にします。 表領域のDROPをしなくてはならない状況になったので、 おとなしくコマンドを叩いていました。 DROP TABLESPACE [表領域名] INCLUDING CONTENTS AND DATAFILES CASCADE CONSTRAINTS; なんでか、この時に、 ORA-23515 : マテリアライズド・ビューまたはその索引(あるいはその両方)が表領域に存在します. が、発生しました。 おとなしく削除されてくれればいいものを、、、 調べたところ、このパターンは、マテビューを手動で削除すれば、治るようですね。 外人さんが、こんなSQLを作ってくれていました。 SQL> select ‘drop materialized view ‘||owner||’.'||name||’ PRESERVE TABLE;’ from dba_registered_snapshots where name in  (select table_name from dba_tables where tablespace_name = ‘BLUH’); この人は、BLUHというテーブルスペースをDROPしようとして失敗していたようなので、 その部分を書き換えると、マテビューの削除用SQLを出力してくれます。 そのまま、これを実行すれば、マテビューが削除できて、そのあと表領域を削除すれば、 ちゃんと削除できます。 意外と便利そうなSQLだったので、機会があれば使ってみてください。 = 参考元 = http://ora34913.wordpress.com/2008/09/04/ora-23515-and-ora-02449-on-drop-tablespace/ 本記事は、弊社代表のブログ記事 なんでもIT屋の宿命 からの転載です。
続きを読む