見出し画像
Photo by 1753

独自配信サーバでVRライブ配信のやり方（その１）

ぴやまるカンパニー

１. VRライブ動画が配信されるまで

VR動画をリアルタイムに配信する仕組についてまとめます。
撮影から視聴まで、以下のように動画データが転送されます。

VRカメラ　→　配信用PC　→　配信サーバ(CDN)　→　VR Viewerアプリ

画像1

配信サーバへのアップロードはRTMP、サーバからのダウンロードにはHLSプロトコルを利用するのが一般的です。RTMPは持続的接続を使い、HTTPと比較して低遅延の通信が可能です。HLSはhttpが使える端末であれば基本的に利用可能なため、PCやiOS、Androidで視聴できるなど汎用性が高くSSLで暗号化を行うことも可能です。

２. カメラ

配信したい動画の種類にあったカメラを用意します。今回は、iPhoneに直接接続できるVRカメラ（insta360 nano S）を使用します。VR カメラの設定方法については、次回説明します。

画像2

• iPhone X, 8, 8 Plus, 7, 7 Plus, 6s, 6s Plus, 6, 6 Plusに対応
• 4K・2000万画素対応の高画質360度カメラ
• 手軽に360度の全天球写真・動画の撮影が可能
• iPhone画面を確認しながらワンタッチで撮影
• 軽量コンパクトでカメラ単体での撮影にも対応
• 静止画 6272×3136、動画 3840×1920@30fpsに対応
• 複数のアングルの映像を1画面にまとめて表示することができるマルチビュー機能
• 撮影した360度動画をお好みの画角で2D動画に編集できるフリーキャプチャー機能
• iPhone内蔵のジャイロセンサーを利用した手ブレ補正機能に対応
• 最大60分間の連続撮影に対応
• 最大128GBのmicroSDカードに対応（別売）
• 専用アプリでFacebookやYouTubeなどのSNS投稿やライブ配信、360度動画チャットが可能
• ブラックとシルバーの2色をラインナップ

３. サーバ(CDN)

３．１　配信サーバの準備

Real Time Messaging Protocol (RTMP) を扱うために、オープンソースで公開されているnginx-rtmp-moduleを使います。

sudo su
yum update
yum groupinstall "Development Tools"
yum -y install pcre-devel zlib-devel openssl-devel

cd /usr/local/src/
wget http://nginx.org/download/nginx-1.8.0.tar.gz
sudo wget http://nginx.org/download/nginx-1.8.0.tar.gz
tar -zxvf nginx-1.8.0.tar.gz
wget https://github.com/arut/nginx-rtmp-module/archive/master.zip
unzip master.zip

# build
cd nginx-1.8.0
./configure --with-http_ssl_module --add-module=../nginx-rtmp-module-master
make
make install

３．２　nginxの設定ファイルにrtmpの設定を追加

/usr/local/nginx/conf/nginx.confの一番最後に以下を追加

rtmp {
  server {
     listen 1935;
     chunk_size 4096;

     application pmg {
        live on;
        record off;
     }
  }
}

applicationで指定する名称がURLの一部になります。
上記の設定だとURLは、rtmp://<ip address>/pmg
設定ができたら、nginxを起動します。

/usr/local/nginx/sbin/nginx

この状態でブラウザからhttp://<ip address>/にアクセスして、Nginxの起動しているページが表示されればOKです。

４. 視聴端末

配信の準備はできたので、最後にプレイヤーを準備します。
video.js v4.2.0からrtmpに対応（beta）したので、こちらを使います。
jsファイルはCDNにホストされたものを使うので、プレイヤーと言っても以下の様なHTMLファイルを準備するだけです。

<!DOCTYPE html>
<html lang="en" class="">
<head>
 <link href="http://vjs.zencdn.net/4.2.0/video-js.css" rel="stylesheet">
 <script src="http://vjs.zencdn.net/4.2.0/video.js"></script>
</head>
<body>
 <video id="rtmp live test" class="video-js vjs-default-skin" controls
  preload="auto" width="640" height="264" data-setup='{}'>
   <source src="rtmp:// <ip address>/pmg/test" type='rtmp/mp4'>
   <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>
</body>
</html>

srcに指定したURLのtestは、先ほどVRカメラのストリームキーに設定した文字列を指定します。
このファイルをWebサーバなどどこかのサーバに置いて、ブラウザで開きます。

次回は、今回説明を省略したVRカメラの設定内容と、スマホのVR Viewerを用いた視聴方法について解説します。

この記事が気に入ったらサポートをしてみませんか？