THETA Sで ライブストリーミング

社内勉強会@スタジオアルカナ スタジオアルカナ

遠藤 勝也 2016/9/1

1

ドラえもんの道具で 「身代わりテレビ」っていうのがあったんだけど、

今のテクノロジーだと民生品だけでも（体験的に） 近しいことができるんじゃないかと思ってたりして。

2

身代わりテレビ引用:

http://www.tv-asahi.co.jp/doraemon/story/0451/3

nginx

全体

RTMPサーバ

ライブストリーミングソフト

THETA S

HTTPサーバ

Webページ

A-Frameなど

HLS

4

nginx

RTMPサーバ

ライブストリーミングソフト

THETA S

HTTPサーバ

Webページ

A-Frameなど

HLS

身代わりテレビA 身代わりテレビB

5

nginx

RTMPサーバ

ライブストリーミングソフト

THETA S

HTTPサーバ

Webページ

A-Frameなど

HLS

6

RICOH THETA S引用:

https://theta360.com/ja/about/theta/s.html7

引用: https://theta360.com/ja/about/theta/s.html

8

nginx

RTMPサーバ

ライブストリーミングソフト

THETA S

HTTPサーバ

Webページ

A-Frameなど

HLS

9

Wirecasthttp://www.telestream.net/wirecast/overview.htm

10

11

nginx

RTMPサーバ

ライブストリーミングソフト

THETA S

HTTPサーバ

Webページ

A-Frameなど

HLS

12

• Webサーバ

• オープンソース

• 処理性能、高い並行生、メモリ使用量の小ささ

• 今回はhomebrewでインストール $ brew install nginx-full --with-rtmp-module

13

RTMP(Real Time Messaging Protocol)

• 動画、音声なのどストリーミング用のプロトコル

• homebrewでnginxを入れた場合は/usr/local/etc/nginx/nginx.confで設定(ポート番号、アプリケーション名、HLSの設定など)

14

HLS (HTTP Live Streaming)

• AppleによるHTTPベースのプロトコル

• スマートフォンのブラウザやMacのSafariから直接再生可能

• indexファイル(.m3u8)と動画ファイル(.ts)

• <video>でindexファイルを再生

15

16

nginx

進捗

RTMPサーバ

ライブストリーミングソフト

THETA S

HTTPサーバ

Webページ

A-Frameなど

HLS

17

現在の問題• iPhone, Androidだと

動画の埋め込み、自動再生ができない (A-Frameの<a-videosphere>では、パスを引数に渡す) https://aframe.io/

• HTML canvas video playerを使って <canvas>で再生したら、 動画のつなぎ目でラグがひどいhttps://stanko.github.io/html-canvas-video-player/

18

ご清聴ありがとうございました

19