Aliyun Linux でLive 配信してみる。

ども、うし@tangniuwanです。
　

昨今の新コロ事情で、需要あるのかなー？と思い、「LIVE配信サーバ」でググった所、
cloudpack.mediaさんのエンジニアブログに「簡単にできる！Live配信サーバ構築」という記事を見つけたので
Aliyun Linux でLive 配信サーバを構築してみました。

はじめに

　
基本的に、記事「簡単にできる！Live配信サーバ構築」の記載の通りに進めると約15分程度で実際の配信まで完了します。本当に簡単にできます。
そして、分かりやすく記載されているので、ほとんど迷う箇所はないと思います。
通常のライブ配信サーバ構築は、上記で完結するのですが、更にスマホのカメラで撮影した絵を配信して見たかったので、試しに実装してみました。

事前準備

ECSインスタンスのSSHキーを準備
VPCやセキュリティグループは既存の設定を使用します

環境

項目	値
PC OS	Windows10 64bit
PC ブラウザ	Google Chrome（最新版）
スマホOS	Android （ver.10）
スマホブラウザ	Google Chrome（最新版）

やったこと

ライブ配信用「Aliyun Linux」のインスタンス準備
SSHでCLI操作（NginxのDL + インストール + 設定）
動画Playerの準備
ライブ配信ツール「OBS」の操作（OBSのDL + インストール + 設定）
スマホへアプリ「IP Webcom」をインストール

１．ライブ配信用サーバ「Aliyun Linux」のインスタンス準備

● 以下のスペックで、ECSインスタンスを作成しました。

設定項目	設定値	備考
リージョン	Japan (Tokyo)
インスタンスの仕様	ecs.t5-lc1m1.small	標準タイプ
CPU	1コア
メモリ	1GB
OS	Aliyun Linux 2.1903 64-bit
I/O 最適化	True
帯域幅	5 Mbps
システムディスク	Ultra クラウドディスク 20 GiB

　
　
● セキュリティグループのイントラネット入力で、以下のポートを許可しました。

設定項目	設定値
SSH	22
HTTP	80
RTMP	1935

２．SSHでCLI操作（Nginxの設定）

記事「簡単にできる！Live配信サーバ構築」に記載がある通りにコマンドを進めると
簡単に構築出来ます。

※今回はHLSの配信のみ。としたかったので、本家の記事とNginxの設定などが若干異なりまる。

　
以下、転載になります。

// 関連パッケージ（Nginx+nginx-rtmp-module）のインストール  
# yum -y install git gcc pcre-devel openssl-devel
  
// 作業ディレクトリの作成
# mkdir works  
  
// [Nginxダウンロード](https://nginx.org/en/download.html) & Nginx展開  
# cd ~/works/
# wget https://nginx.org/download/nginx-1.14.0.tar.gz
# tar zxvf nginx-1.14.0.tar.gz

// nginx-rtmp-moduleのインストール  
# cd nginx-1.14.0/  
# git clone https://github.com/arut/nginx-rtmp-module.git  
# ./configure --add-module=nginx-rtmp-module/  
# make  
# make install  
  
// NginxのConfig設定
# vi /usr/local/nginx/conf/nginx.conf

nginx.conf

worker_processes auto;
error_log  logs/error.log error;
 
events {
        worker_connections  1024;
}
 
rtmp_auto_push on;
 
rtmp {
    server {
        listen 1935;
        access_log logs/rtmp_access.log;
        chunk_size 4096;
        timeout 10s;
 
        application live {
            live on;
 
            # HLSの記述欄
            hls on;
            hls_path /var/www/html/hls;
            hls_fragment 10s;
         }
    }
}
 
http {
    server {
        listen  80;
        include mime.types;
        default_type    application/octet-stream;
        server_name localhost;
        add_header  Access-Control-Allow-Origin *;
 
        location /hls {
            types {
                 application/vnd.apple.mpegurl m3u8;
            }
            root /var/www/html/;
        }
    }
}

Configの確認

# /usr/local/nginx/sbin/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

サービス起動のスクリプトを作成

# vi /usr/lib/systemd/system/live_nginx.service
 
[Unit]
Description=nginx - high performance web server
Documentation=http://nginx.org/en/docs/
After=network.target remote-fs.target nss-lookup.target
[Service]
Type=forking
ExecStartPre=/usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf
ExecStart=/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
ExecReload=/bin/kill -s HUP $MAINPID
ExecStop=/bin/kill -s TERM $MAINPID
PrivateTmp=true
[Install]
WantedBy=multi-user.target

サービス起動 & 自動起動

// 起動
# systemctl start live_nginx.service

// 自動起動
# systemctl enable live_nginx.service
 
Created symlink from /etc/systemd/system/multi-user.target.wants/live_nginx.service to /usr/lib/systemd/system/live_nginx.service.

Nginxが起動しているとブラウザで、以下の様な画面が表示されます。
　

f:id:tangniu:20200326230301p:plain

３．動画Playerの準備

HLSのPlayerとなるHTML生成　

※「obs_hls.m3u8」の部分は、この後のOBSの設定にも使用します。　

// ファイル作成
# vi /usr/local/nginx/html/hls.html

// ファイル内容
<!DOCTYPE html>
<html> 
<head>
  <meta charset="utf-8">
  <title>MediaElement</title>
  <!-- MediaElement style -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelementplayer.css" />
</head> 
<body>
  <!-- MediaElement -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelement-and-player.js"></script> 
  <video id="player" width="640" height="360">
</body>
<script type="text/javascript">
      var player = new MediaElementPlayer('player', {
        success: function(mediaElement, originalNode) {
          console.log("Player initialised");
        }
      });
      player.setSrc("hls/obs_hls.m3u8");
</script>
</html>

４．ライブ配信ツール「OBS」の操作

配信は、「OBS Studio」（Open Broadcaster Software）を使うので以下からDLし、インストールします。

obsproject.com

次に、OBSの配信設定をするので、[ ファイル ]→[ 設定 ]を開き、設定画面の[ 配信 ]を選択します。

f:id:tangniu:20200326233002p:plain

表示された画面で、以下を設定します。

項目	値	備考
サービス	カスタム
サーバ	rtmp://{hostname}:{port}/live/	構築した環境に合わせて下さい
ストリームキー	obs_hls	先程の「obs_hls.m3u8」のファイル名を使用します

f:id:tangniu:20200326233028p:plain

次に、以下の様に配信するソースを選択し、「配信開始」ボタン押下により、配信します。

f:id:tangniu:20200326233829p:plain

選択項目	ざっくり出来ること
映像キャプチャデバイス	PCなどのWEBカメラの映像をLIVE配信できます
メディアソース	MP4ファイルなどを配信できます
ブラウザ	設定画面にURLを指定しブラウザで表示している内容を配信できます

５．Androidへアプリ「IP Webcom」をインストール

・Google Play から「IP Webcom」をDLし、インストールします。

・次にPCへ、IP Webcomのアダプターをインストールします。

※以下ページの、画面下部にある、「開発元」のウェブサイトにアクセスリンクからも
　アダプターのDLページへ遷移できます。

play.google.com

以下は、「IP Webcom」の設定画面です。
設定画面のURLは、Androidアプリで動画撮影を開始すると画面に表示されます。
f:id:tangniu:20200327002116p:plain

最後に「IP Webcom」で撮影した絵を、OBS経由で配信設定すれば完了！
　

で、実際にライブ配信してみると、30～50sのディレイがある。。（うーん。スペック上げるかな。）　

麦星 - arcturus technologies-

テクノロジー関連情報と日常的な何かを発信しています