Successfully reported this slideshow.
Your SlideShare is downloading. ×

開発費0円でニコニコ生放送を作ってみた

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
20110804 hls research
20110804 hls research
Loading in …3
×

Check these out next

1 of 31 Ad

開発費0円でニコニコ生放送を作ってみた

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Advertisement

Recently uploaded (20)

開発費0円でニコニコ生放送を作ってみた

  1. 1. 開発費0円でニコニコ生放送を作ってみたPC1台とオープンソースやら学割やらあらゆるものを駆使してニコニコ生放送と同じライブストリーミングサイトを作ります。<br />鳥居みゆっき<br />
  2. 2. 1<br />自己紹介<br />1994年11月28日生まれ 現在16歳<br />今年11月9日にドワンゴにて最年少エンジニアとしてバイト中<br />「ニコ生企画放送局」という無料でニコ生などをしに行く団体にも属している<br />Twitterは@toriimiyukki<br />
  3. 3. 本日のアジェンダ<br />基本的なニコキャストの仕組みについて<br />ストリーミングサーバについて<br />各種ストリーミングサーバとの比較<br />Red5の構成<br />プレーヤーについて<br />Webについて<br />各コンポーネントの連携について<br />まとめ<br />2<br />
  4. 4. ニコキャストって何?<br />3<br />
  5. 5. このプロ生も放送中!<br />4<br />http://live.nicocast.com/sp/pronama<br />に、アクセス。Flashさえ入っていればすぐに見れます。<br />
  6. 6. ニコキャストの仕組み 1<br />5<br />サーバサイド<br />クライアント<br />
  7. 7. ニコキャストの仕組み 2<br />6<br />CORESERVER(Web,PHP,MySQL)<br />クライアント<br />プレーヤーよりAPIにストリーミングサーバのアドレスやトークンを取得<br />視聴ページ・プレーヤー取得<br />ストリーミングサーバに接続<br />自宅サーバ(Red5)<br />
  8. 8. ストリーミングサーバの比較 1(Protocol)<br />7<br />
  9. 9. ストリーミングサーバの比較 2(RTMP)<br />8<br />
  10. 10. Red5のインストール手順<br />9<br />この6コマンドでRed5は動く!<br />ちなみに、ニコキャスト(β)はこの状態で動いていました。。。<br />
  11. 11. Red5アプリケーションを作ろう<br />10<br />アプリケーションとはそもそも何?<br />配信、中継など仕事を分けることができる<br />配信サーバ<br />中継サーバ<br />コメントサーバ<br />現在のニコキャストは、<br />配信サーバ、中継サーバ、コメントサーバを統一。<br />
  12. 12. Red5アプリケーションの作り方<br />11<br />と、その前に。<br />
  13. 13. Flashについて<br />12<br />制作は、FlashBuilder4(FlexSDK4)アカデミック版を使用。<br />大人の方は、頑張ってかってね♪<br />FlexSDK4が使える環境であれば、FlashDevelopでも可能です。<br />ニコキャストで使っているFlashは、プレーヤーと配信コンソールの2つ。<br />
  14. 14. FlashのRTMPの扱い方<br />13<br />Adobeが開発したRTMPというお陰もあり、扱いがすごい楽。<br />varnc:NetConnection = new NetConnection();<br />nc.connect(“rtmp://host/app”);<br />これだけで、RTMPに接続できる!<br />しかし、これだけでは映像は受け取れない。<br />varns:NetStream = new NetStream(nc);<br />ns.play(StreamName);<br />video.attachNetStream(ns);<br />と、映像を受け取っても最短5行で書くことができます。<br />ちなみに、<br />varnc:NetConnection = new NetConnection();<br />nc.connect(“rtmp://host/app”, “hoge”, “hoge2”);<br />とすることによって、Red5へパラメータを送ることが可能。<br />
  15. 15. Red5になぜパラメータを送る必要があるか<br />14<br />CORESERVER(Web,PHP,MySQL)<br />クライアント<br />MySQLにアクセス<br />ストリーミングサーバに接続<br />このユーザーは配信が可能なのか。<br />映像視聴ができるユーザーなのか。<br />自宅サーバ(Red5)<br />
  16. 16. Red5アプリケーションの作り方 1<br />15<br />基本的なJavaの知識があれば書ける。<br />適切な時に下記のイベントなどが呼ばれるのでそのタイミングで、<br />やりたいことを書く。<br />appStart, roomStart, appStop, roomStop, appConnect, roomConnect, <br />appJoin, roomJoin, appDisconnect, roomDisconnect, appLeave, roomLeave<br />例1)接続してきた人を全部無条件で切断。(importは省略)<br />package jp.package;<br />public class Application extends ApplicationAdapter {<br /> public booleanappConnect( IConnectionconn , Object[] params){<br />rejectClient("Invalid Name”);<br /> return true;<br /> }<br />}<br />※ちなみにeclipseで開発、<br />
  17. 17. Red5アプリケーションの作り方 2<br />16<br />例2)接続してきて、パラメータにhogeが入ってた人のみ接続可能。<br />                                (importは省略)<br />package jp.package;<br />public class Application extends ApplicationAdapter {<br /> public booleanappConnect( IConnectionconn , Object[] params){<br /> String username = (String)params[0];<br /> if(!username.equals(“hoge”)){<br />rejectClient("Invalid Name”);<br /> }<br /> return true;<br /> }<br />}<br />これを使うと、ユーザー認証が<br />DBを参照せずにできる!<br />
  18. 18. ニコキャストのユーザー認証の仕組み 1<br />17<br />もちろんここでもユーザーを認証<br />CORESERVER(Web,PHP,MySQL)<br />クライアント<br />確認し、受け入れるか判断。<br />プレーヤーよりAPIにストリーミングサーバのアドレスやトークンを取得<br />ストリーミングサーバに接続<br />視聴ページ・プレーヤー取得<br />ここで、PHPがMySQLのユーザー情報を参考に、放送可能かのフラグと共にトークンを生成。<br />自宅サーバ(Red5)<br />
  19. 19. ニコキャストのユーザー認証の仕組み 2<br />18<br />この仕組を用いることによって、安全性がより高まる。<br />・ニコキャスト(β)では、SWFでしかユーザー認証を<br /> 行っていなかったため、ストリーミングサーバに直接<br /> つないでしまえば無法地帯状態だった。<br />・サーバ側ですべての認証を完結しるため、<br /> SWFファイルに認証を施すと逆コンパイルされるが、<br /> その可能性がない。<br />
  20. 20. Red5アプリケーションの作り方 3<br />19<br />例3)Red5君がFlash学年の関数組のA子ちゃんを急に呼びたくなった<br />package jp.package;<br />public class Application extends ApplicationAdapter {<br /> public void sendMessage( IConnectionconn ){<br />IServiceCapableConnection sc = (IServiceCapableConnection)conn; <br />sc.invoke("recieveMessage", new Object[]{“I love you.”}); <br /> }<br />}<br />Flash側の関数名<br />関数に渡す引数<br />Flash側<br />private function recieveMessage(text:String):void{<br /> trace(text);<br />}<br />
  21. 21. Red5アプリケーションの作り方 4<br />20<br />例4Flash組のA子ちゃんがRed5を急に呼びたくなった<br />private function sendMessage(text:String):void{<br />nc.call('recieveMessage', null , “I hate you.”);<br />}<br />Red5側の関数名<br />関数に渡す引数<br />Red5側<br />public void recieveMessage( IConnectionconn, String text ){<br /> log.info(text);<br /> //return false;<br />}<br />ちなみに、ここでreturnをすれば、Flash側<br />のcallの返り値で受け取ることができる。<br />
  22. 22. Red5アプリケーションの作り方 5<br />21<br />簡単なアプリを作ってみる。接続して人数を返すだけ。(import省略)<br />Red5側<br />package jp.package;<br />public class Application extends ApplicationAdapter {<br />public intgetRealtimeCount(IConnectionconn) {<br /> return Red5.getConnectionLocal().getScope().getClients().size();<br />}<br />}<br />Flash側<br />private function click_button():void{<br />textlabel.text = nc.call(‘getRealtimeCount', null ).toString();<br />}<br />
  23. 23. Red5の話はそろそろいいよ!<br />22<br />と、ここまでRed5の話を長々としてきましたが<br />昨日、ニコキャストは、<br />P2Pになりました! (^_^;<br />といっても、Red5の活躍はまだ終わってなくて、<br />放送の録画(アーカイブ用)とかコメント送受信の<br />コメントサーバや、回線が細い時は放送サーバ<br />としてまだガンガン活躍。<br />このプロ生も回線が細いのでRed5経由です。<br />
  24. 24. ニコキャストにおけるP2Pのメリット<br />23<br />ユーザー(視聴者/配信者)<br />・超高画質配信ができる!<br />(従来だとRed5的に限界,自宅サーバの回線も限界)<br />運営者<br />・Red5サーバ(自宅サーバ)に負荷が掛からない!<br />ユーザー・運営者ともに<br />WINWINな関係<br />
  25. 25. ついでだからP2Pのお話も<br />24<br />FlashによるP2PはRTMFPという<br />プロトコルによって話されます。<br />が、しかし、RTMFPをサポートしているストリーミングサーバ<br />はFlashMediaServerのみ。<br />ここで60万の買い物をしてしまうのか・・・・・・・・。<br />
  26. 26. と思うかもしれないけど<br />25<br />簡単な、RTMFPサーバならAdobeが無料で提供中!<br />もちろん、自分で関数などを追加できたりしませんが<br />映像配信には十分です。<br />使い方も簡単で、今までのアドレスを<br />RTMFPサーバに変えるだけ。<br />配信者のP2P用のID(NearId)だけが<br />視聴プレーヤーで必要になりますが、<br />その他は特に必要になるものはありません。<br />
  27. 27. ニコキャストP2P配信のフロー<br />26<br />
  28. 28. Web/PHP<br />27<br />開発はただのテキストエディタ<br />今後はフレームワークも使用予定<br />
  29. 29. MySQL<br />28<br />特にタネも仕掛けもない<br />MySQLです。<br />反抗期なので命名規則には<br />従わず、ProgramTableとか<br />名付けています。<br />
  30. 30. 運営グループについて<br />29<br />開発・協力者募集中!<br />
  31. 31. ご清聴ありがとうございました<br />30<br />

×