12月18日にプログラミング生放送勉強会でプレゼンした「開発費0円でニコニコ生放送を作ってみた」のパワーポイントです。 http://live.nicocast.com/ http://co9320.spaces.live.com/blog/cns!F8FA3BD6ABDDDB63!317.entry

1. 開発費0円でニコニコ生放送を作ってみたPC1台とオープンソースやら学割やらあらゆるものを駆使してニコニコ生放送と同じライブストリーミングサイトを作ります。 鳥居みゆっき

2. 1 自己紹介 1994年11月28日生まれ 現在16歳 今年11月9日にドワンゴにて最年少エンジニアとしてバイト中 「ニコ生企画放送局」という無料でニコ生などをしに行く団体にも属している Twitterは@toriimiyukki

3. 本日のアジェンダ 基本的なニコキャストの仕組みについて ストリーミングサーバについて 各種ストリーミングサーバとの比較 Red5の構成 プレーヤーについて Webについて 各コンポーネントの連携について まとめ 2

4. ニコキャストって何？ 3

5. このプロ生も放送中！ 4 http://live.nicocast.com/sp/pronama に、アクセス。Flashさえ入っていればすぐに見れます。

6. ニコキャストの仕組み 1 5 サーバサイド クライアント

7. ニコキャストの仕組み 2 6 CORESERVER(Web,PHP,MySQL) クライアント プレーヤーよりAPIにストリーミングサーバのアドレスやトークンを取得 視聴ページ・プレーヤー取得 ストリーミングサーバに接続 自宅サーバ(Red5)

8. ストリーミングサーバの比較 1(Protocol) 7

9. ストリーミングサーバの比較 2(RTMP) 8

10. Red5のインストール手順 9 この6コマンドでRed5は動く！ ちなみに、ニコキャスト(β)はこの状態で動いていました。。。

11. Red5アプリケーションを作ろう 10 アプリケーションとはそもそも何？ 配信、中継など仕事を分けることができる 配信サーバ 中継サーバ コメントサーバ 現在のニコキャストは、 配信サーバ、中継サーバ、コメントサーバを統一。

12. Red5アプリケーションの作り方 11 と、その前に。

13. Flashについて 12 制作は、FlashBuilder4(FlexSDK4)アカデミック版を使用。 大人の方は、頑張ってかってね♪ FlexSDK4が使える環境であれば、FlashDevelopでも可能です。 ニコキャストで使っているFlashは、プレーヤーと配信コンソールの2つ。

14. FlashのRTMPの扱い方 13 Adobeが開発したRTMPというお陰もあり、扱いがすごい楽。 varnc:NetConnection = new NetConnection(); nc.connect(“rtmp://host/app”); これだけで、RTMPに接続できる！ しかし、これだけでは映像は受け取れない。 varns:NetStream = new NetStream(nc); ns.play(StreamName); video.attachNetStream(ns); と、映像を受け取っても最短5行で書くことができます。 ちなみに、 varnc:NetConnection = new NetConnection(); nc.connect(“rtmp://host/app”, “hoge”, “hoge2”); とすることによって、Red5へパラメータを送ることが可能。

15. Red5になぜパラメータを送る必要があるか 14 CORESERVER(Web,PHP,MySQL) クライアント MySQLにアクセス ストリーミングサーバに接続 このユーザーは配信が可能なのか。 映像視聴ができるユーザーなのか。 自宅サーバ(Red5)

16. Red5アプリケーションの作り方 1 15 基本的なJavaの知識があれば書ける。 適切な時に下記のイベントなどが呼ばれるのでそのタイミングで、 やりたいことを書く。 appStart, roomStart, appStop, roomStop, appConnect, roomConnect, appJoin, roomJoin, appDisconnect, roomDisconnect, appLeave, roomLeave 例1)接続してきた人を全部無条件で切断。(importは省略) package jp.package; public class Application extends ApplicationAdapter { public booleanappConnect( IConnectionconn , Object[] params){ rejectClient("Invalid Name”); return true; } } ※ちなみにeclipseで開発、

17. Red5アプリケーションの作り方 2 16 例2）接続してきて、パラメータにhogeが入ってた人のみ接続可能。 (importは省略) package jp.package; public class Application extends ApplicationAdapter { public booleanappConnect( IConnectionconn , Object[] params){ String username = (String)params[0]; if(!username.equals(“hoge”)){ rejectClient("Invalid Name”); } return true; } } これを使うと、ユーザー認証が DBを参照せずにできる！

18. ニコキャストのユーザー認証の仕組み 1 17 もちろんここでもユーザーを認証 CORESERVER(Web,PHP,MySQL) クライアント 確認し、受け入れるか判断。 プレーヤーよりAPIにストリーミングサーバのアドレスやトークンを取得 ストリーミングサーバに接続 視聴ページ・プレーヤー取得 ここで、PHPがMySQLのユーザー情報を参考に、放送可能かのフラグと共にトークンを生成。 自宅サーバ(Red5)

19. ニコキャストのユーザー認証の仕組み 2 18 この仕組を用いることによって、安全性がより高まる。 ・ニコキャスト(β)では、SWFでしかユーザー認証を 行っていなかったため、ストリーミングサーバに直接 つないでしまえば無法地帯状態だった。 ・サーバ側ですべての認証を完結しるため、 SWFファイルに認証を施すと逆コンパイルされるが、 その可能性がない。

20. Red5アプリケーションの作り方 3 19 例3）Red5君がFlash学年の関数組のA子ちゃんを急に呼びたくなった package jp.package; public class Application extends ApplicationAdapter { public void sendMessage( IConnectionconn ){ IServiceCapableConnection sc = (IServiceCapableConnection)conn; sc.invoke("recieveMessage", new Object[]{“I love you.”}); } } Flash側の関数名 関数に渡す引数 Flash側 private function recieveMessage(text:String):void{ trace(text); }

21. Red5アプリケーションの作り方 4 20 例4Flash組のA子ちゃんがRed5を急に呼びたくなった private function sendMessage(text:String):void{ nc.call('recieveMessage', null , “I hate you.”); } Red5側の関数名 関数に渡す引数 Red5側 public void recieveMessage( IConnectionconn, String text ){ log.info(text); //return false; } ちなみに、ここでreturnをすれば、Flash側 のcallの返り値で受け取ることができる。

22. Red5アプリケーションの作り方 5 21 簡単なアプリを作ってみる。接続して人数を返すだけ。(import省略) Red5側 package jp.package; public class Application extends ApplicationAdapter { public intgetRealtimeCount(IConnectionconn) { return Red5.getConnectionLocal().getScope().getClients().size(); } } Flash側 private function click_button():void{ textlabel.text = nc.call(‘getRealtimeCount', null ).toString(); }

23. Red5の話はそろそろいいよ！ 22 と、ここまでRed5の話を長々としてきましたが 昨日、ニコキャストは、 P2Pになりました！ (^_^; といっても、Red5の活躍はまだ終わってなくて、 放送の録画(アーカイブ用)とかコメント送受信の コメントサーバや、回線が細い時は放送サーバ としてまだガンガン活躍。 このプロ生も回線が細いのでRed5経由です。

24. ニコキャストにおけるＰ２Ｐのメリット 23 ユーザー(視聴者/配信者) ・超高画質配信ができる！ (従来だとRed5的に限界,自宅サーバの回線も限界) 運営者 ・Red5サーバ(自宅サーバ)に負荷が掛からない！ ユーザー・運営者ともに ＷＩＮＷＩＮな関係

25. ついでだからP2Pのお話も 24 FlashによるP2PはRTMFPという プロトコルによって話されます。 が、しかし、RTMFPをサポートしているストリーミングサーバ はFlashMediaServerのみ。 ここで60万の買い物をしてしまうのか・・・・・・・・。

26. と思うかもしれないけど 25 簡単な、RTMFPサーバならAdobeが無料で提供中！ もちろん、自分で関数などを追加できたりしませんが 映像配信には十分です。 使い方も簡単で、今までのアドレスを RTMFPサーバに変えるだけ。 配信者のP2P用のID(NearId)だけが 視聴プレーヤーで必要になりますが、 その他は特に必要になるものはありません。

27. ニコキャストP2P配信のフロー 26

28. Web/PHP 27 開発はただのテキストエディタ 今後はフレームワークも使用予定

29. MySQL 28 特にタネも仕掛けもない MySQLです。 反抗期なので命名規則には 従わず、ProgramTableとか 名付けています。

30. 運営グループについて 29 開発・協力者募集中！

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