Your SlideShare is downloading. ×
0
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WebRTCを始めよう! HTML5fun 第一回勉強会

4,623

Published on

HTML5fun の第一回勉強会での発表資料です。 …

HTML5fun の第一回勉強会での発表資料です。
http://html5fun.jp/

Published in: Technology
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,623
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
1
Comments
0
Likes
16
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Copyright © NTT Communications Corporation. All right reserved. WebRTCを始めよう! 〜全国にHTML5の楽しさを届けよう!〜 第一回勉強会 2014 / 5 / 19 http://html5fun-1.peatix.com/
  • 2. Copyright © NTT Communications Corporation. All right reserved. 自己紹介  なかゆうすけ(Twitter : @Tukimikage)  所属 • NTTコミュニケーションズ 先端IPアーキテクチャセンタ  オフィシャルワーク • HTML5 Experts.jp(HTML5 Experts Works) 副編集長 • WebRTC開発者向けフレームワーク「SkyWay」中の人  コミュニティワーク • html5j自動車部部長 • html5jエンタープライズ部スタッフ 2
  • 3. Copyright © NTT Communications Corporation. All right reserved. 今日の流れ  WebRTCとは?  WebRTC開発者向けプラットフォーム「SkyWay」の概要  SkyWayで簡単WebRTCプログラミング  SkyWayを活用してもらうために  SkyWayの利用事例(デモンストレーション)  WeRTCで賞金ゲット! 3
  • 4. Copyright © NTT Communications Corporation. All right reserved. WebRTCとは  ブラウザでカメラとマイク、音声と映像を扱える。  ブラウザ間の直接通信、リアルタイム通信が可能になる。  ビデオ会議、ボイスチャット、テキストチャット、ファイル転送、電話と の連携等が可能になる。  対応ブラウザは、Chrome (iOS除く)、Firefox、Opera。iOS、IEは未対応。 4 従来のWeb WebRTC カメラやマイ クを利用可 リアルタイ ムに送受信 ブラウザ間 の直接通信 サーバ⇔ク ライアント 間の通信 リクエストと レスポンスの 繰り返し カメラやマイ クの利用不可
  • 5. 5Copyright © NTT Communications Corporation. All right reserved. SkyWayの概要 SkyWayを使えば簡単に WebRTCのアプリを開発できる
  • 6. Copyright © NTT Communications Corporation. All right reserved. SkyWayの概要 6 WebRTC利用アプリを簡単に開発できるクラウド基盤  2013年12月5日に提供開始  提供内容 • シグナリング等のAPI • ライブラリ • サンプルアプリ • ドキュメント
  • 7. Copyright © NTT Communications Corporation. All right reserved. WebRTCはWeb開発者にとって難しい技術 7 ブラウザ間で直接通信する前に、サーバ経由で「シグナリング」を 行う必要があり、実装にはネットワークの知識が必要。 7ようやく直接通信できる これらの通信が 完了してから…
  • 8. Copyright © NTT Communications Corporation. All right reserved. SkyWayの特徴 8 SkyWayのシグナリングAPIとライブラリが複雑な処理を担うので、 開発者は簡単にWebRTC利用アプリを開発できる。 STUN API Signaling API STUN API ライブラリ ライブラリ APIとライブ ラリが複雑な 処理を担う
  • 9. 9Copyright © NTT Communications Corporation. All right reserved. SkyWayで簡単WebRTCプログラミング 実際に開発してみる
  • 10. Copyright © NTT Communications Corporation. All right reserved. APIキーを申請する 10 ここをクリック まずはアクセス → http://skyway.io
  • 11. Copyright © NTT Communications Corporation. All right reserved. APIキーの申請にはドメインが必要 11  APIキーの申請に必要なもの  お名前  連絡先メールアドレス  SkyWayを利用するドメイン  SkyWayを利用するドメイン APIキーはJavaScriptで公開されるた め不正利用を防ぐ目的のドメイン認証  例えば・・・  ローカルで動かしたい  127.0.0.1  localhost  開発サーバで動かしたい  dev.domain.jp  本番サーバで動かしたい  www.domain.jp
  • 12. Copyright © NTT Communications Corporation. All right reserved. 開発してみる 12  STEP0 - ライブラリの読み込み <script src="https://skyway.io/dist/0.3/peer.js"></script>  STEP1 - Peerオブジェクトの生成 var APIKEY = '6165842a-5c0d-11e3-b514-75d3313b9d05’; var peer = new Peer({ key: APIKEY});
  • 13. Copyright © NTT Communications Corporation. All right reserved. 開発してみる 13  STEP2 - 相手からの着信イベントを処理するハンドラーを設置 peer.on('open', function(){ //自分のPeerID(いわゆる電話番号)が生成されたら発火する }); peer.on('call', function(call){ //相手からの着信があった場合に応答する call.answer(window.localStream); }); peer.on('error', function(err){ //何らかのエラーが発生した場合に発火する console.log(err.message); });
  • 14. Copyright © NTT Communications Corporation. All right reserved. 開発してみる 14  STEP3 - 自分自身のオーディオ、ビデオストリームを取得 navigator.getUserMedia({audio: true, video: true}, function(stream){ //自分のVideoタグに表示 $('#my-video').prop('src', URL.createObjectURL(stream)); //相手に送るために保存 window.localStream = stream; }, function(err){ //エラー処理は必須 console.log(err); }); ※getUserMediaにはブラウザごとにベンダープレフィックスがあります
  • 15. Copyright © NTT Communications Corporation. All right reserved. 開発してみる 15  STEP4 - 相手に発信&発信後のイベントを処理するハンドラを設置 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
  • 16. Copyright © NTT Communications Corporation. All right reserved. SkyWayを活用してもらうために 開発に必要な様々な情報を提供
  • 17. Copyright © NTT Communications Corporation. All right reserved. 開発に必要な情報  localhostのみで利用可能なAPIキー(全開発者に公開) • 6165842a-5c0d-11e3-b514-75d3313b9d05  クライアントライブラリの日本語ドキュメント • クライアントはオープンソースのPeerJS互換 • PeerJSのドキュメントに一部修正を加え日本語化して公開中 17 http://nttcom.github.io/skyway/docs/
  • 18. Copyright © NTT Communications Corporation. All right reserved. 開発に必要な情報  開発者向けフォーラムを用意 • SkyWay Technical Forum  だれでも参加可能!  中の人が懇切丁寧に開発者の疑問質問にお答え!  WebRTCに関す日本語での情報交換に活用してください 18 http://goo.gl/enBkcF
  • 19. Copyright © NTT Communications Corporation. All right reserved. 情報発信  SkyWay(WebRTC)に関する情報はTwitterをチェック! #skywayjs #webrtcjp #webrtc 19
  • 20. Copyright © NTT Communications Corporation. All right reserved. SkyWayの利用事例 デモンストレーション
  • 21. Copyright © NTT Communications Corporation. All right reserved. 多人数のビデオチャット • ブラウザ搭載のあらゆるデバイスで利用できる。 • インストール不要、認証も不要、 URLにアクセスするだけで開始。 • サービス紹介ムービーはこちら http://works.html5experts.jp/365/ 212121 SkyWaySkyWayで シグナリング WebRTCでメッシュ状に接続し、 マイク音声、カメラ映像を すべての相手に送信 WebRTC Chat on SkyWay https://chat.skyway.io/ 2014年4月21日 サービス開始
  • 22. Copyright © NTT Communications Corporation. All right reserved. スマホで撮った多数の映像を表示 • スマホで撮ったスマホカメラの映像をスクリーンに表示。 (HTML Conference 2013の会場で300名規模のデモ実施) 22 SkyWay SkyWayで シグナリング カメラの映像を WebRTCで送信 HTML5 JUMBOTRON
  • 23. Copyright © NTT Communications Corporation. All right reserved. 通話内容をテキストで表示 • 音声認識機能を組み合わせ、通話内容をテキストで表示。 • 聴力が衰えた方向け、電車や会議中等の通話できない環境、 議事録の自動作成等に適用可能。 23 字幕付きボイスチャット 相手との通話内容が 吹き出し風に表示される SkyWay 0.SkyWay でシグナリング 4.テキストを送受信 音声認識 API 音声認識 API 2.音声を テキスト化 3.音声を送受信 1.話す 5.音声を再生 テキストを表示 http://goo.gl/N8bnkh
  • 24. Copyright © NTT Communications Corporation. All right reserved. テキストを音声に変換 • 音声合成機能を組み合わせて、テキストを音声で発話。 • テキストチャットとボイスチャットのコミュニケーションが実現可 能。 24 SkyWay 0.SkyWay でシグナリング 音声認識 API 2.テキストを送信 1.テキストを入力 6. テキストを表示 3.音声を合成 4. 話す 5.音声を送受信 音声合成 API 2.音声を テキスト化
  • 25. Copyright © NTT Communications Corporation. All right reserved. ファイル転送 • ブラウザ間で直接セキュアなファイル転送が可能。 25 SkyWay 0.SkyWay でシグナリング 2.ファイル送信 1.ファイルを送信 2.ファイルを受信 100MB以上の大容量 ファイルも送信可能 暗号化&PtoPで セキュアに送信可能 SkyDrop
  • 26. Copyright © NTT Communications Corporation. All right reserved. 位置情報を共有 • サバゲーを楽しくする! • 仲間同士で位置情報を共有 • トランシーバー代わりに使える 26 SkyWaySkyWayで シグナリング 同一チームに所属する端末で、 WebRTCを利用しメッシュ状に接続、 互いの位置情報をリアルタイム共有。 特定端末から音声を同一チームの 他端末にブロードキャスト The Survivor
  • 27. Copyright © NTT Communications Corporation. All right reserved. SIPや電話への接続 • WebRTCとVoIPを変換するゲートウェイを介して、SIPや電話と接続可能。 • DTMFトーンの発生も可能。 • 既存の電話会議システムとの連携や、ブラウザからコールセンターへの問い合わせに応用できる。 272727 既存システム WebRTC Gateway WebRTC PSTN SIP+RTP PSTN ブラウザ WebRTCと VoIPを変換 SIP SIPアプリ 電話 SIP+RTP
  • 28. Copyright © NTT Communications Corporation. All right reserved. WebRTCで賞金ゲット! 5jcup - WebRTC賞のススメ
  • 29. Copyright © NTT Communications Corporation. All right reserved. WebRTC賞に応募しよう!  5jcup WebRTC賞を提供しています。 29 WebRTCを活用した面白いアプリお待ちしています!
  • 30. Copyright © NTT Communications Corporation. All right reserved. ご清聴ありがとうございました! 30

×