プログラミング生放送勉強会 第33回@株式会社DMM.comラボ（恵比寿） SHOWROOMはAmebaのサービスではないっぽいです。

1. インターネット生放送を
支える技術としくみ
2015年版
みゆっき（@toriimiyukki）

2. 提供/注意
このスライドは、
プログラミング生放送勉強会 第33回@株式会社DMM.comラボ（恵比寿）
で発表したスライドです。
!
!
内容は独自調査したものであり、不備が含まれる場合がありますのでご了承ください。
2

3. 自己紹介
➡みゆっき @toriimiyukki
➡ SFC(すーぱーふぁみこんきゃんぱす)の
だいがくさんねんせい。。。
!
➡ いろんなバイトをしてる、最近だとここ
の下にあるC社にいたり。
!
➡ バイト代を使う当てが無いため、映像機
材を揃えている。
3

4. 自己紹介
4年前にプロ生でこんなプレゼンをしていました。
4

5. 生放送に必要な3つのモノ
5
視聴者 サーバ 配信者

6. Viewer
https://www.flickr.com/photos/68532869@N08/17471462035/

7. 様々な視聴形態

8. PCによる視聴
➡ ブラウザを用いた視聴がほとんど
➡ 視聴者への敷居を下げるため&視聴環境として十分なため。
➡ ブラウザ内ではFlash Playerを利用している。
!
➡ 一部のサービスでは専用アプリケーションを入れるものも
➡ しかし、だんだんとサービスの規模は縮小している。
8

9. スマートフォンによる視聴
➡ iOS
➡ AppleがHLSを開発し、iOSでもHLSをサポート。
➡ 逆を言うとそれ以外は対応していないし対応させても審査で落とす。
!
➡ Android
➡ 今現在、RTSPやHLSをサポート。
!
➡ Windows Phone
➡ Smoothstreaming… MPEG-DASH…
9

10. 専用ハードウェアによる視聴
➡ 最近ではYouToube Liveの生放送をChromecastで視聴することが
可能
➡ 他に対応しているサービスは不明。
!
➡ 実はそれより前に、chumbyと呼ばれる多機能端末でSTICKAMに対
応したアプリケーションがリリース(2009年)
10

11. Server
https://www.flickr.com/photos/scobleizer/4870003098/

12. 配信サイト・サービス

13. ニコニコ生放送
画面の上にコメントが流れるのが特徴の niconico の生放送サービス。
歌ってみた、踊ってみた、政治、技術部など各カテゴリのコミュニティがある文化が特徴。
!
2007年に公式放送を開始し、2008年には一般ユーザーでも放送が可
能なユーザー生放送を開始。
ユーザーが開発したツール類も豊富でありユーザー生放送開始当初は放送枠数が50枠と少なく「枠取り」と呼ばれ
る行為があり、それをサポートする「枠鳥」といったツールも普及した。
ユーザー生放送では少々きついビットレート制限があり、ユーザー生放送では最大で480kbpsまでの配信しか行え
ない。
!
配信サーバはWowza[要出典]、コメントは独自のメッセージサーバを使用。
13

14. Ustream
ライブストリーミング配信界で1位を争う存在。
2007年にサービスを開始してから、急速に普及し日本語対応や、有料、ビジネス向けプランの展開をしている
技術的には王道を歩んできている。
!
2010年にはソフトバンクが出資。
その後、Ustream Asia株式会社が設立され、渋谷に「Ustream Studio」もオープン(現在リニューアル中)。
!
配信サーバはFME、コメントは当初はIRCサーバを利用していたが、
現在はTwitterなどのソーシャルを利用している。
14

15. Twitch
元々はJustin.tv。
元々Ustreamとほぼ同時期に設立された「Justin.tv」というサービスだったが、Ustreamが絶好調になり(公式で
は別のリソースに集中するためと発表)2014年にサービスを廃止。
!
その後ゲーム配信を専門とする「Twitch」を発表。
Justin.tvのリソースからいくつか機能を強化し、発表したところ思いのほか流行る。
TwitchではYouTubeの様な著作権フィルタリングシステムも導入された(ただしアーカイブのみ[要出典])。
!
同年(2014年)にはAmazonに買収。
当初はGoogleからの買収の噂が立っていたが、AmazonがGoogleを退け買収した。
各種ゲーム(洋ゲー多め)の大会が頻繁に開催されたり、金魚でポケモンを操作する配信などもやっていた。
15

16. YouTube Live
動画の王者、YouTubeによるライブストリーミングサービス。
Googleがやってるだけあり、同時視聴可能数が多く、高品質、マルチプラットフォーム対応。
!
2008年にサービスを開始。
サービス開始当初はアーティストのライブなど公式による配信のみだった。
現在では一般ユーザーでも配信が可能であり、さらに、配信中でも追いかけっこ再生が出来たりと新しい技術の導入
も早い。
!
技術的な先駆者。
お金もあるため様々な技術が開発され、YouTube Liveで導入された技術が他の配信サービスに利用されることも
多い。(追いかけっこ再生やフィルタリングシステムなど。)
16

17. Livestream
日本ではあまり馴染みがないが海外では有名。
Ustreamとほぼ同時期に設立された。
一般ユーザーによる生放送というよりもしっかりと構成された番組が多い。
!
技術力が高くオリジナルな製品を開発している。
専用配信ソフトウェア「Procaster」や
カメラなどにつけて直接配信できると専用ハードウェア「Broadcaster mini」など。
YouTube Liveと同じく追いかけっこ再生にも対応。
!
TwitcamというTwitter連携でライブ配信が出来る派生サービスも運営。
17

18. ツイキャス
2010年にサービスリリース、正式名称TwitCasting。
画質やフレームレートなどの品質より手軽に配信できることが売り。
日本のサービスの中ではニコニコ生放送の次に有名[要出典]だと思われる。
開発者のツイキャスの中の人が技術ブログでAndroidやJASRAC対応について書いた記事もある。
ロンドンブーツの田村淳など、個人で利用する有名人も多い。
!
2014年には公式チャンネルのサポートが開始。
公式チャンネルでは一般ユーザーよりも高画質、高品質な配信が可能。
しかし視聴者はいままでのビットレートで映像を視聴することも可能だという。
18

19. その他のサービス1
➡ Stickam JAPAN!
➡ 2006年に開始したE-Times Technologiesが運営するサービス。
➡ ニコニコ生放送に配信枠制限があった時代に枠待ち時間などにも利用された。
19
➡ SHOWROOM
➡ 2013年に開始したDeNAが運営するサービス。独特な視聴
画面が特徴。
➡ 当初はアイドルやタレントが行う公式の配信だけだったが、
現在は一般ユーザーも配信が可能。
➡ 配信者の貢献度に応じてお金がもらえる仕組みもある。

20. その他のサービス2
➡ アフリカTV
➡ もともと韓国で普及していた配信サービス、日本では「韓国版ニコ生」と呼ばれることも…。
➡ 2014年に日本向けにオープン。BJ(Broadcaster Jockey)はランキングや投げ銭でお金がもらえる。
➡ 最近、お寺でドローンを落としたり国会議事堂でドローンを飛ばそうとしていた人が配信していた。
!
➡ Livetube.cc
➡ 昔は専用ソフトで配信が必要だったが現在はRTMPに対応している、ハイブリット型。
!
➡ Cavetube
➡ 元livetube.ccの開発者の一人が作ったサービス。個人運営の中では配信数が多い、ハイブリット型。
20

21. その他のサービス3
➡ ひまわりストリーム
➡ ひまわり動画の管理人が作った生放送サイト。
➡ ひまわり動画はFC2に買い取られたが、このサービスは残ったまま。
!
➡ nicocas
➡ ドワンゴがリリースしたニコニコ生放送ではない新間隔サービス。
➡ しかし、サービス開始後3日で閉鎖。
!
➡ ニコキャスト
➡ 自分が中学生の時に作ったライブストリーミング配信サイト。
➡ 録画サーバの容量が足りなくなるという原因で今は閉鎖。今後の行方は不明。
21

22. R18向けサービス
➡ DMMライブチャット
➡ DMMが提供するライブチャットサービス。
!
➡ FC2ライブアダルト
➡ R18でない一般ユーザー向けのFC2ライブもあるが、やはりアダルト向け配信が多い。
!
➡ ライブでゴーゴー
➡ ライブチャットを運営していた会社が一般ユーザー向けの「wellcam」というサービスを展開し投げ銭シス
テムなどもあったが、閉鎖。その後本サービスに統合された。
!
➡ などなど、ライブチャット系は他にも沢山…
22

23. プロトコル

24. 仁義なきプロトコルバトル
➡ 各社が王者を狙ったり、いまのプロトコルには不満があったりと、
いろんなプロトコルを開発。
➡ 各社自分が開発したものだけをサポートする例が多く、開発者が夜も寝れない。
!
➡ 最近プロトコルに求められる要件は、多彩なコーデック、HTML5、DRM、字幕、4K
映像などのサポートが求められる。
➡ http://www.bitcodin.com/blog/2015/03/mpeg-dash-vs-apple-hls-vs-microsoft-smooth-
streaming-vs-adobe-hds/
24

25. プロトコル関連の技術
➡ P2P型配信
➡ 配信者と視聴者をP2Pネットワークで結び映像を送る配信方法のこと。
➡ P2Pを用いた配信ソフトとしてはPeerCastが有名。(今回は割愛)
!
➡ ハイブリッド型配信
➡ ストリーミングサーバとP2Pを併用して映像を送る配信方法のこと。
➡ 配信者と初めの視聴者はストリーミングサーバに接続、後の視聴者は初めの視聴者に接続しに行く。
!
➡ Adaptive bitrate streaming
➡ 最近は視聴環境が多種多様で様々な回線やデバイスが存在する中、回線やディスプレイなど視聴環境に合っ
たコンテンツを自動的に選択する技術。
25
ハイブリット型配信の解説図
配信者
初めの視聴者
後の視聴者

26. 主なプロトコル
➡ MMS (Microsoft Media Server)
➡ Microsoftが開発したUDP/TCPベースのストリーミングプロトコル。
➡ Windows Media Encoderで配信したことがある人は知ってるかも…？
➡ 2003年にはMMSではなくRTSPを使うよう推奨している。
!
➡ RTSP (Realtime Streaming Protocol)
➡ 1998年にIETFにより標準化されたTCPベースのストリーミングプロトコル。
➡ HTTPのようなリクエストのプロトコル。
➡ 様々な問題点が指摘され余り使われてないが、まだ根強く残っている。
26

27. 主なプロトコル
➡ RTMP (Realtime Messaging Protocol)
➡ Adobe社(元Macromedia)が開発したリアルタイム通信向けプロトコル。
➡ Flash Playerでサポートされているため、PCでのライブストリーミング配信で利
用されることが多い。
!
➡ RTMFP (Realtime Messaging Flow Protocol)
➡ 同じくAdobeが開発したP2Pのリアルタイム通信向けのプロトコル。
➡ RTMPはTCPを利用しているのに対し、UDPを利用している。
!
➡ この他にもRTMP派生のプロトコルはいくつかあるが割愛。
27

28. 主なプロトコル
➡ HLS (HTTP Live Streaming)
➡ Appleが開発しているHTTPベースのストリーミング規格。
➡ .m3u8形式のテキストに情報を記述。
➡ もちろんiOSで対応済み。
➡ HDS (HTTP Dynamic Streaming)
➡ Adobeが開発しているHTTPベースのストリーミング規格。
➡ .f4m形式のXMLに情報を記載。
➡ Smooth Streaming
➡ Microsoftが開発しているHTTPベースのストリーミング規格。
➡ XML形式のXMLに情報を記載。
28

29. 主なプロトコル
➡ MPEG-DASH (Dynamic Adaptive Streaming over HTTP)
➡ 最近刺客としてやってきた、HTTPベースのストリーミング規格。
➡ ISO(国際標準化規格)が提唱し、最近動きが活発。
➡ MicrosoftはWindows 10でサポートを宣言。
➡ Adaptive bitrate streamingや字幕、DRM、4Kなどのサポートを最初から行っ
ている。
29
HTTPベースのストリーミング規格はこれに落ち着くのではないか。
Apple「…」

30. 主なプロトコル(番外編)
➡ WebRTC
➡ W3CやGoogle、Mozillaが開発している、ブラウザ上でリアルタイムなP2P通信
を行えるようにするAPI群。
➡ WebRTCを使ってブラウザ同士のP2Pでカメラ映像の送受信が可能。
30

31. コンテナとコーデック

32. 仁義なきコンテナ/コーデックバトル
➡ コンテナ
➡ 映像や音声データ、その他字幕データなどを1つのファイルにする規格のこと。
➡ コーデック
➡ 映像や音声の圧縮プログラム、またはその技術。
!
➡ プロトコル同様、各社がいろんなコンテナ、コーデックを開発。
➡ プロトコルとは違い、コーデックには特許が絡む事が多く、お金もかかるし開発も
大変。
➡ 過去にはいろんな訴訟の事例もたくさんある。
32

33. 主なコンテナ
➡ MPEG2-TS
➡ MPEGの団体が定めた動画コンテナ/コーデック規格。
➡ HLSのほか、DVDや地上波デジタル放送などでも使われている。
➡ MP4
➡ MPEGの団体が定めた動画コンテナ/コーデック規格。
➡ 最近はわりと主流？[要出典]
➡ WebM
➡ Googleが開発しているオープンでロイヤリティーフリーなコンテナ。
➡ HTML5の動画要素の標準フォーマットの採用に向けて開発。
➡ 標準化の道程は長い…
33

34. 主なコーデック
➡ H264 (MPEG-4 VPC)
➡ MPEG2の後継。Flash Playerもサポート。
➡ ライブストリーミングでは性質上、動きに弱い。
➡ VP6
➡ On2テクノロジーが開発したコーデック。Flash Playerもサポート。
➡ H264とほぼ同時期に出た、軽さと(デコードの)速さが売り。
➡ VP8
➡ Googleが買収した後のOn2テクノロジーが開発したコーデック。
➡ WebMとともにオープンソース化された。
34

35. ストリーミングサーバ

36. 有名なRTMPストリーミングサーバ
➡ Flash Media Server (FMS)
➡ RTMP開発元のAdobeが開発した本家サーバ。有償で高め。
➡ Wowza Media Server
➡ Wowzaが開発したRTMPサーバ。有償だが1/6くらい安い。
➡ Red5
➡ 無償でオープンソースのRTMPサーバ。
➡ 安定性は低いので本番環境で用いられることはほぼなかった。
36

37. その他のストリーミングサーバ
➡ nginx
➡ HTTPサーバとして有名なnginxに、モジュールとしてRTMPやHLSをサポート
している。
➡ RTMPとHLSを変換する中継サーバとしても利用可能。
!
➡ 他にもあるけど挙げるときりがないので割愛。
37

38. CDN (Contents Delivery Network)
➡ コンテンツ配信の最適化を行うネットワーク
➡ ライブストリーミング配信もできるCDNとしては、Akamai、Limelightが主要
だった。
➡ 現在では、brightcoveやULIZAなどいままでより安価なCDNプロバイダーも普及
してきた。
38

39. https://www.flickr.com/photos/jesusali/3365097784/
Broadcaster

40. 配信形態

41. PCによる配信
➡ ブラウザによる配信
➡ Flash Playerによる配信が一般的
➡ プロトコルはRTMP、コーデックはH264とVP6をサポートしている。
!
➡ 専用ソフトウェアによる配信
➡ RTMPの場合、Flash Media Liver Encoder (FMLE) がよく使われる。
➡ Ustream、ニコニコ生放送、Livestreamには専用のソフトウェアもある。
41

42. スマートフォン/タブレットによる配信
➡ 各種OSのSDKとして配信側のライブストリーミングプロトコルが
サポートされているOSは無い[要出典]
➡ 何らかのライブラリを使ったり自分で開発する必要がある。
➡ RTMP実装のライブラリを使用したものもあるが、独自方式のものも多い。
!
➡ Adobe AIRのモバイル版では、RTMPがサポートされているFlexライブラリが含
まれており、PC版のロジックをそのまま流用してスマホ版のアプリケーションに使
うこともできた。
➡ Adobe AIRのモバイル版のサポートは打ち切られた。
42

43. 専用ハードウェアによる配信
➡ ソフトウェアではなく配信専用のハードウェアを使用した配信も可能
➡ 配信専用のため普通のPCで行うよりも不具合が起こる可能性が少なく、また様々な
映像加工がハードウェアベースで行える。
➡ 映像のエンコーダーも実装されているため映像の乱れや遅延なども少なく映像品質
も高い。
43

44. スイッチャー

45. TriCasterシリーズ
➡ NewTekが開発しているWindows上で動くスイッチャー
➡ ソフトウェアではなくキャプチャボードなどを備えたハードウェアとセットで販売
されている。
45

46. ATEMシリーズ
➡ Blackmagicdesignが開発している映像系スイッチャー
➡ 同規模の機能の製品の中では安い。
➡ 中規模の配信では結構使われていることが多く、ニコニコ本社でも使われている。
➡ 中身はFPGAだとか。
46

47. LiveShell/LiveWedgeシリーズ
➡ Cerevoが開発しているストリーミング配信専用のデバイス
➡ HDMI1入力を配信し続けるLiveShell
!
!
!
!
➡ HDMI4入力を自由にスイッチングできるLiveWedge
➡ 同等の機能を備えた製品の中ではほぼ最安。
➡ LiveShell同様そのまま配信できる機能もある。
47
➡ HDMIとLANケーブルを差すだけで配信ができ、安価
で安定性も兼ね備えてるため、様々な定点カメラ放送
でも利用されている。

48. Roland
➡ 映像系の機器も出しているRoland
➡ HDMI4入力が可能でタッチ操作のV4-EXなど。
➡ 一部にはUSB接続でビデオ機器と認識されるインターネット配信向けのものも。
➡ 最近ではホールや講堂の設置向けの本格的なスイッチャーも作り始めた。
48

49. おまけ

50. スイッチャーを手作りする

51. スイッチャーの簡単な作り方
➡ 最近は、FPGA1つでそれなりの映像処理をすることが出来る。
➡ 最近の映像スイッチャーも中身がFPGAの物が多い。
➡ 圧倒的にSoCよりも安価、アップデートなどでハードウェアの構成
も変えることが出来るため運用も楽。
!
➡ あなたはAltera派？Xilinx派？それともLATICE派？
51

52. スイッチャーの簡単な作り方
52
■ 材料 ■
Atlys Spartan-6 評価ボード 1枚
UbuntuまたはWindows 1台
液晶ディスプレイ 1台
論理回路の知識と根気強さ 沢山

53. スイッチャーの簡単な作り方
➡ あとはこんな感じの回路を書くだけ！
53
Xilinx XAPP495より
ね？簡単でしょ？

54. スイッチャーの簡単な作り方
54

55. スイッチャーの簡単な作り方
➡ 安価なFPGAでサポートしているクロック数は高くない。
➡ HDMIで1080@60pの映像を出すには1秒で
(1920+280)px*(1080+45)px*24bit*3color*60fpsの
データのやり取りが必要。
!
➡ FPGAのマクロなどを利用してTMDSのクロックまで上げてあげる
必要がある。
!
➡ 入力機器にいろんなクロックがあるとさらに大変。
55

56. プロ生の裏側

57. プロ生を支える配信機材
➡ カメラやスイッチャー、三脚などを揃えてそろそろ一人では運びきれ
ない大きさに…
57

58. プロ生を支える配信ツール
➡ 自作ツールなども開発
58

59. プロ生を支える配信方法
➡ 配信をするときはだいたいこんな感じの機材構成図を作ります。
59
でも、だいたいうまくいかない。

60. プロ生を支える配信方法
➡ 今回のプロ生の機材はこんな感じ
60

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