5jCup WebRTC賞

856 views

Published on

5jcupのラストハッカソンでのPRタイム資料です。

Published in: Engineering
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
856
On SlideShare
0
From Embeds
0
Number of Embeds
155
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • ここだけの話払い出しは人力・・・実は先週からダッシュボード機能の開発に着手しまして、6月末までにはリリースしたい。
  • ここだけの話払い出しは人力・・・実は先週からダッシュボード機能の開発に着手しまして、6月末までにはリリースしたい。
  • ここだけの話払い出しは人力・・・実は先週からダッシュボード機能の開発に着手しまして、6月末までにはリリースしたい。
  • ここだけの話払い出しは人力・・・実は先週からダッシュボード機能の開発に着手しまして、6月末までにはリリースしたい。
  • ここだけの話払い出しは人力・・・実は先週からダッシュボード機能の開発に着手しまして、6月末までにはリリースしたい。
  • 5jCup WebRTC賞

    1. 1. Copyright © NTT Communications Corporation. All right reserved. 5jCup WebRTC賞 NTT Communications 仲 裕介 5jcup Hackathon@21cafe 2014/6/14
    2. 2. 2Copyright © NTT Communications Corporation. All right reserved. WebRTCって何?
    3. 3. Copyright © NTT Communications Corporation. All right reserved. WebRTCって何? RTC = Real Time Communication Webブラウザで、 リアルタイムなコミュニケーション/通信 を利用できる技術 3
    4. 4. Copyright © NTT Communications Corporation. All right reserved. WebRTCって何? 技術的には3つの要素 1. ブラウザ間で直接通信できる 2. リアルタイム通信ができる 3. カメラとマイクを使える 4 従来のWeb WebRTC カメラやマイ クを利用可 リアルタイ ムに送受信 ブラウザ間 の直接通信 サーバ⇔ク ライアント 間の通信 リクエストと レスポンスの 繰り返し カメラやマイ クの利用不可
    5. 5. Copyright © NTT Communications Corporation. All right reserved. WebRTCって何? 利用例 ビデオチャット、ボイスチャット、 対戦ゲーム、ファイル転送、 ブラウザフォン… 5 従来のWeb WebRTC カメラやマイ クを利用可 リアルタイ ムに送受信 ブラウザ間 の直接通信 サーバ⇔ク ライアント 間の通信 リクエストと レスポンスの 繰り返し カメラやマイ クの利用不可
    6. 6. 6Copyright © NTT Communications Corporation. All right reserved. WebRTCの何がすごいの?
    7. 7. Copyright © NTT Communications Corporation. All right reserved. 7 https://www.flickr.com/photos/tjflex/57210112
    8. 8. Copyright © NTT Communications Corporation. All right reserved. 8 https://www.flickr.com/photos/mattb_tv/2550476978
    9. 9. Copyright © NTT Communications Corporation. All right reserved. 9 今、HTML5デベロッパの手に! 通信キャリアとしては、ちょっと微妙…
    10. 10. 10Copyright © NTT Communications Corporation. All right reserved. WebRTC賞って?
    11. 11. Copyright © NTT Communications Corporation. All right reserved. WebRTC賞って? 11 日本に、WebRTCのブームを起こしたい。 その一心です。
    12. 12. Copyright © NTT Communications Corporation. All right reserved. WebRTC賞って? 12 賞金は20万円! WebRTCを活用した 今までにないような独創的なアイディア求む! 応募作品はプロトタイプレベルでも構いません! 詳しくはこちら https://5jcup.org/awards/ntt-com
    13. 13. 13Copyright © NTT Communications Corporation. All right reserved. 業務連絡 (SkyWayの宣伝)
    14. 14. Copyright © NTT Communications Corporation. All right reserved. WebRTCは、簡単だけど難しい 14 ブラウザ間で直接通信する前に、サーバ経由で「シグナリング」を 行う必要があり、実装にはネットワークの知識が必要 14ようやく直接通信できる これらの通信が 完了してから…
    15. 15. Copyright © NTT Communications Corporation. All right reserved. SkyWayを使えばかんたん 15 SkyWayのAPIとライブラリが複雑な処理をやってくれます。 開発者は、直接通信に専念できます。 STUN API Signaling API STUN API ライブラリ ライブラリ APIとライブ ラリが複雑な 処理を担う
    16. 16. 16Copyright © NTT Communications Corporation. All right reserved. SkyWayで簡単WebRTCプログラミング 実際に開発してみる
    17. 17. Copyright © NTT Communications Corporation. All right reserved. APIキーを申請する 17 ここをクリック まずはアクセス → http://skyway.io
    18. 18. Copyright © NTT Communications Corporation. All right reserved. APIキーの申請にはドメインが必要 18  APIキーの申請に必要なもの  お名前  連絡先メールアドレス  SkyWayを利用するドメイン  SkyWayを利用するドメイン  例えば・・・  ローカルで動かしたい  127.0.0.1  localhost  開発サーバで動かしたい  dev.domain.jp  本番サーバで動かしたい  www.domain.jp
    19. 19. Copyright © NTT Communications Corporation. All right reserved. 開発してみる 19  STEP1 - ライブラリを読み込む! <script src="https://skyway.io/dist/0.3/peer.js"></script>  STEP2 - Peerオブジェクトを生成する! var APIKEY = '6165842a-5c0d-11e3-b514-75d3313b9d05’; var peer = new Peer({ key: APIKEY});
    20. 20. Copyright © NTT Communications Corporation. All right reserved. 開発してみる 20  STEP3 - 相手からの着信イベントを処理する! peer.on('open', function(){ //自分のPeerID(いわゆる電話番号)が生成されたら発火する }); peer.on('call', function(call){ //相手からの着信があった場合に応答する call.answer(window.localStream); }); peer.on('error', function(err){ //何らかのエラーが発生した場合に発火する console.log(err.message); });
    21. 21. Copyright © NTT Communications Corporation. All right reserved. 開発してみる 21  STEP4 - 自分自身のオーディオ、ビデオストリームを取得する! navigator.getUserMedia({audio: true, video: true}, function(stream){ //自分のVideoタグに表示 $('#my-video').prop('src', URL.createObjectURL(stream)); //相手に送るために保存 window.localStream = stream; }, function(err){ //エラー処理は必須 console.log(err); });
    22. 22. Copyright © NTT Communications Corporation. All right reserved. 開発してみる 22  STEP5 - 相手に発信&発信後のイベントを処理する! var call = peer.call(PeerId, window.localStream); call.on('stream', function(stream){ //相手のオーディオ、ビデオストリームをVideoタグに表示 $('#their-video').prop('src', URL.createObjectURL(stream)); }); call.on('close’,function(){ //相手が切断した場合に切断処理を行う }); ※PeerIDの受け渡しは開発者が独自に実装する必要あり peer.listAllPeers()というメソッドも用意しています 詳しくは開発者フォーラムを → http://goo.gl/NvXDQq
    23. 23. Copyright © NTT Communications Corporation. All right reserved. 23 とりあえず。 ビデオチャット組み 込めばOKじゃね? http://goo.gl/OD2VRD
    24. 24. Copyright © NTT Communications Corporation. All right reserved. SkyWayを活用してもらうために 開発に必要な様々な情報を提供
    25. 25. Copyright © NTT Communications Corporation. All right reserved. 開発に必要な情報  localhostのみで利用可能なAPIキー(全開発者に公開) • 6165842a-5c0d-11e3-b514-75d3313b9d05  クライアントライブラリの日本語ドキュメント • クライアントはオープンソースのPeerJS互換 • PeerJSのドキュメントに一部修正を加え日本語化して公開中 25 http://nttcom.github.io/skyway/docs/
    26. 26. Copyright © NTT Communications Corporation. All right reserved. 開発に必要な情報  開発者向けフォーラムを用意 • SkyWay Technical Forum  だれでも参加可能!  中の人が懇切丁寧に開発者の疑問質問にお答え!  WebRTCに関す日本語での情報交換に活用してください 26 http://goo.gl/enBkcF
    27. 27. Copyright © NTT Communications Corporation. All right reserved. 27 日本に、WebRTCのブームを起こしたい。 ご応募お待ちしています!
    28. 28. Copyright © NTT Communications Corporation. All right reserved. Let’s Enjoy 5jcup Hackathon. https://www.flickr.com/photos/hackny/5684846071/

    ×