Web rtcの使い方

Web rtcの使い方
Copyright © NTT Communications Corporation. All right reserved. WebRTCを使って復興支援アプリを作ろう～WebRTC ハッカソン～ WebRTCについての解説 NTTコミュニケーションズ株式会社先端IPアーキテクチャセンタ WebコアTechnical Unit 小松健作 2014年6月7日
Copyright © NTT Communications Corporation. All right reserved. 自己紹介名前：小松健作所属：NTT communications HTML5の研究開発標準化活動（W3C） HTML5の啓蒙・コミュニティ運営 Google Developer Expert (HTML5)
3Copyright © NTT Communications Corporation. All right reserved. WebRTCとは？
4Copyright © NTT Communications Corporation. All right reserved. ブラウザで p2p でのテレビ電話やファイル交換などを可能にする技術
Copyright © NTT Communications Corporation. All right reserved. WebRTCとは  ブラウザでカメラとマイク、音声と映像を扱える。  ブラウザ間の直接通信、リアルタイム通信が可能になる。  情報が分散型へシフトする。 5 従来のWeb WebRTC カメラやマイクを利用可リアルタイムに送受信ブラウザ間の直接通信サーバ⇔クライアント間の通信リクエストとレスポンスの繰り返しカメラやマイクの利用不可
Copyright © NTT Communications Corporation. All right reserved. WebRTC Reference App 6 https://apprtc.appspot.com/
Copyright © NTT Communications Corporation. All right reserved. YouTubeと組み合わせたり 7 https://chat.skyway.io/
Copyright © NTT Communications Corporation. All right reserved. Chromecast 8 http://www.google.com/intl/ja_ALL/chrome/devices/chromecast /
Copyright © NTT Communications Corporation. All right reserved. Chromecast (cont.) 9 Home Network 再生指示 via WebRTC Movie file via HTTP Web of Things
Copyright © NTT Communications Corporation. All right reserved. Platform としての WebRTC 10 専用アプリ専用アプリ専用ハード専用アプリ専用ハードブラウザブラウザここが共通化・標準化されるだけで、相当嬉しい
Copyright © NTT Communications Corporation. All right reserved. WebRTC SDK, libraries for other env. 11 http://tokbox.com/opentok http://js-platform.github.io/node-webrtc/ https://github.com/alongubkin/phonertc http://www.webrtc.org/reference/native-apis
12Copyright © NTT Communications Corporation. All right reserved. SkyWayの概要 SkyWayを使えば簡単に WebRTCのアプリを開発できる
Copyright © NTT Communications Corporation. All right reserved. SkyWayの概要 13 WebRTC利用アプリを簡単に開発できるクラウド基盤  2013年12月5日に提供開始  社外の約600名以上の開発者が利用している  提供内容 • シグナリング等のAPI • ライブラリ • サンプルアプリ • ドキュメント
Copyright © NTT Communications Corporation. All right reserved. WebRTCはWeb開発者にとって難しい技術 14 ブラウザ間で直接通信する前に、サーバ経由で「シグナリング」を行う必要があり、実装にはネットワークの知識が必要。 14ようやく直接通信できるこれらの通信が完了してから…
Copyright © NTT Communications Corporation. All right reserved. SkyWayの特徴 15 SkyWayのシグナリングAPIとライブラリが複雑な処理を担うので、開発者は簡単にWebRTC利用アプリを開発できる。 STUN API Signaling API STUN API ライブラリライブラリ APIとライブラリが複雑な処理を担う
Copyright © NTT Communications Corporation. All right reserved. まず、localにWebサーバーをたてる  一番簡単なのは、 • $ python –m SimpleHTTPServer • あとは、apacheとか、nginxとか、expressとかsinatraとかやり方は色々（なんでもいいです） 16
Copyright © NTT Communications Corporation. All right reserved. HTMLにライブラリをカキコ <!doctype html> <html> <head> … <script src="https://skyway.io/dist/0.3/peer.min.js"></script> … </head> <body> … </body> </html> 17
Copyright © NTT Communications Corporation. All right reserved. SkyWayのブローカーサーバーに繋げる var peer = new Peer({key: 'APIKEY'}); peer.on(‘open’, function(id){ // これが自分のIDになる <= 重要 }); 今回のイベント用のAPIKEYは http://goo.gl/26aMKE にあります。 18 caller callee ID ID
Copyright © NTT Communications Corporation. All right reserved. ローカルの映像取り込んで、相手に送信 navigator.webkitGetUserMedia({video:true, audio:true}, function(stream) { // stream が映像・音声データを管理するStreamObject var call = peer.call(‘destination-id’, stream); }, function(err) { // 映像取得エラー }); 19 caller callee
Copyright © NTT Communications Corporation. All right reserved. 受信側でAnswer peer.on(‘call’, function(call) { call.answer(stream); }); 20 caller callee
Copyright © NTT Communications Corporation. All right reserved. Call – Answerが終わったら映像受信処理 call.on(‘stream’, function(stream) { var url = window.URL.createObjectURL(stream); $(“#you”).attr(“src”, url); $(“#you”)[0].play(); }); 21 caller callee
Copyright © NTT Communications Corporation. All right reserved. document http://nttcom.github.io/skyway/docs/ 22
Copyright © NTT Communications Corporation. All right reserved. Sample source 23 http://cdn.peerjs.com/demo/videoch at/ https://github.com/nttcom/peerjs/tre e/master/examples/videochat
24Copyright © NTT Communications Corporation. All right reserved. Thank you!! 24

Check these out next

Web rtcの使い方

Recomendados

Mais conteúdo relacionado

Apresentações para você(20)

Similar a Web rtcの使い方(20)

Mais de Kensaku Komatsu(16)

Último(20)

Web rtcの使い方