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

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 カメラやマイクを利用可リアルタイムに送受信ブラウザ間の直接通信サーバ⇔クライアント間の通信リクエストとレスポンスの繰り返しカメラやマイクの利用不可

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

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

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の会場で３００名規模のデモ実施） 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

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

Yusuke NAKA

Transcript