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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

3,034
views

Published on

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

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

Published in: Technology

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,034
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
1
Comments
0
Likes
9
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