SlideShare a Scribd company logo
1 of 13
Download to read offline
WebRTC について
    2012/06/04
アジェンダ

•   ミーティングの目的

•   WebRTC とは

•   できること

•   応用例
目的
• 新規技術のつまみ食い
• 投資的な動き
 • 今後の提案の材料と出来るようにし
  ておく

• 技術デモ止まりでなくプロダクション
  レベルへ
WebRTC とは
•   Web ブラウザで Real Time
    Communication をするための仕様

    •   カメラ・マイクへのアクセス

    •   ブラウザで P2P

•   Google が主導
WebRTC とは


•   ブラウザだけでビデオチャット・ボイ
    スチャットを実装することが出来る
WebRTC とは
•   プロトコル (IETF が標準化)

    •   UDP ベース

•   JavaScript API (W3C が標準化)

    •   Stream API
    •   Peer-to-peer connection
Stream API
•   カメラ・マイクからのデータを取得で
    きる

•   キャプチャしたデータを HTML5 の
    <video> タグにマッピングできる

•   Canvas や Web Audio API で処理可能
P2P Connection
•   ブラウザ同士で P2P 通信

    •   Peer 同士の取り次ぎは Signaling サー
        バを使用 (WebSocket)

    •   NAT を越えるには STUN サーバを使用

•   いわゆるピュア P2P ではない
使用上の注意
•   現時点でデスクトップ版 Chrome と
    Opera の開発版のみ対応

    •   Chrome で使用する場合は about:flags
        で WebRTC を有効にする

•   新しい規格のため仕様が安定していな
    い
Demo


•   https://webglmeeting.appspot.com/

•   http://neave.com/webcam/html5/

•   http://apprtc.appspot.com/html/face.html
今後の展望
•   Mozilla が Firefox へ実装中

•   2013 年 2 月に仕様策定完了予定

•   Skype, Hangout のような Web アプリ

•   Flash で流行したコンテンツの再利用

•   モバイル端末での利用

    •   Android 版 Chrome が実装してきそう
ライブラリ
•   JSARToolkit

    •   https://github.com/kig/JSARToolKit

    •   AR (拡張現実) 用のライブラリ

•   Face.js / CCV

    •   https://github.com/liuliu/ccv

    •   顔検出用ライブラリ

•   getUserMedia.js

    •   https://github.com/addyosmani/getUserMedia.js

    •   getUserMedia の polyfill ライブラリ
参考
•   公式

    •   http://www.webrtc.org/

•   API 仕様ドラフト (W3C)

    •   http://www.w3.org/TR/webrtc/

•   こてさき Ajax : WebRTC事始め

    •   http://blog.livedoor.jp/kotesaki/archives/1794148.html

More Related Content

What's hot

HTML5 によるロボット制御
HTML5 によるロボット制御HTML5 によるロボット制御
HTML5 によるロボット制御Honma Masashi
 
.NET Framework で ​C# 8って使える? ​YESとNO!
.NET Framework で ​C# 8って使える? ​YESとNO!.NET Framework で ​C# 8って使える? ​YESとNO!
.NET Framework で ​C# 8って使える? ​YESとNO!Joni
 
Gaiaのソースコードに見るちょっと未来のweb app開発
Gaiaのソースコードに見るちょっと未来のweb app開発Gaiaのソースコードに見るちょっと未来のweb app開発
Gaiaのソースコードに見るちょっと未来のweb app開発Masakazu Muraoka
 
Blazor 触ってみた
Blazor 触ってみたBlazor 触ってみた
Blazor 触ってみたOda Shinsuke
 
その Web サイト、その Web アプリを最新の IE11 に対応しよう
その Web サイト、その Web アプリを最新の IE11 に対応しようその Web サイト、その Web アプリを最新の IE11 に対応しよう
その Web サイト、その Web アプリを最新の IE11 に対応しようOsamu Monoe
 
Breakouts で Presentation API の 拡張提案したよ
Breakouts でPresentation API の拡張提案したよBreakouts でPresentation API の拡張提案したよ
Breakouts で Presentation API の 拡張提案したよSaki Homma
 
PhoneGapで作るハイブリッドアプリケーション
PhoneGapで作るハイブリッドアプリケーションPhoneGapで作るハイブリッドアプリケーション
PhoneGapで作るハイブリッドアプリケーションMasahiko Tachizono
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5Sho Ito
 
マイクロサービス開発が捗る Project Tye
マイクロサービス開発が捗る Project Tyeマイクロサービス開発が捗る Project Tye
マイクロサービス開発が捗る Project TyeYuta Matsumura
 
120512 metro styleapp_javascript
120512 metro styleapp_javascript120512 metro styleapp_javascript
120512 metro styleapp_javascriptTakayoshi Tanaka
 
TV・車・ゲームに搭載されているブラウザってどうなっているの?
TV・車・ゲームに搭載されているブラウザってどうなっているの?TV・車・ゲームに搭載されているブラウザってどうなっているの?
TV・車・ゲームに搭載されているブラウザってどうなっているの?Masashi Umeda
 
Azure Static Web Apps を試してみた!
Azure Static Web Apps を試してみた!Azure Static Web Apps を試してみた!
Azure Static Web Apps を試してみた!一希 大田
 
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築Joni
 
WebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWebWebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWebKensaku Komatsu
 
Chrome Apps 概要
Chrome Apps 概要Chrome Apps 概要
Chrome Apps 概要yoshikawa_t
 
~ アプリ開発に新たな息吹を ~ クラウドが当たり前の今こそ知っておきたい Azure & Visual Studio コラボレーション
~ アプリ開発に新たな息吹を ~ クラウドが当たり前の今こそ知っておきたい Azure & Visual Studio コラボレーション~ アプリ開発に新たな息吹を ~ クラウドが当たり前の今こそ知っておきたい Azure & Visual Studio コラボレーション
~ アプリ開発に新たな息吹を ~ クラウドが当たり前の今こそ知っておきたい Azure & Visual Studio コラボレーションAkira Inoue
 
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介 【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介 日本マイクロソフト株式会社
 
The Twelve-Factor (A|M)pp with C#
The Twelve-Factor (A|M)pp with C#The Twelve-Factor (A|M)pp with C#
The Twelve-Factor (A|M)pp with C#Yuta Matsumura
 
Mozapps installがなくなったことへの不平不満
Mozapps installがなくなったことへの不平不満Mozapps installがなくなったことへの不平不満
Mozapps installがなくなったことへの不平不満Masakazu Muraoka
 
.NET 5 and Windows app dev
.NET 5 and Windows app dev.NET 5 and Windows app dev
.NET 5 and Windows app dev一希 大田
 

What's hot (20)

HTML5 によるロボット制御
HTML5 によるロボット制御HTML5 によるロボット制御
HTML5 によるロボット制御
 
.NET Framework で ​C# 8って使える? ​YESとNO!
.NET Framework で ​C# 8って使える? ​YESとNO!.NET Framework で ​C# 8って使える? ​YESとNO!
.NET Framework で ​C# 8って使える? ​YESとNO!
 
Gaiaのソースコードに見るちょっと未来のweb app開発
Gaiaのソースコードに見るちょっと未来のweb app開発Gaiaのソースコードに見るちょっと未来のweb app開発
Gaiaのソースコードに見るちょっと未来のweb app開発
 
Blazor 触ってみた
Blazor 触ってみたBlazor 触ってみた
Blazor 触ってみた
 
その Web サイト、その Web アプリを最新の IE11 に対応しよう
その Web サイト、その Web アプリを最新の IE11 に対応しようその Web サイト、その Web アプリを最新の IE11 に対応しよう
その Web サイト、その Web アプリを最新の IE11 に対応しよう
 
Breakouts で Presentation API の 拡張提案したよ
Breakouts でPresentation API の拡張提案したよBreakouts でPresentation API の拡張提案したよ
Breakouts で Presentation API の 拡張提案したよ
 
PhoneGapで作るハイブリッドアプリケーション
PhoneGapで作るハイブリッドアプリケーションPhoneGapで作るハイブリッドアプリケーション
PhoneGapで作るハイブリッドアプリケーション
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
 
マイクロサービス開発が捗る Project Tye
マイクロサービス開発が捗る Project Tyeマイクロサービス開発が捗る Project Tye
マイクロサービス開発が捗る Project Tye
 
120512 metro styleapp_javascript
120512 metro styleapp_javascript120512 metro styleapp_javascript
120512 metro styleapp_javascript
 
TV・車・ゲームに搭載されているブラウザってどうなっているの?
TV・車・ゲームに搭載されているブラウザってどうなっているの?TV・車・ゲームに搭載されているブラウザってどうなっているの?
TV・車・ゲームに搭載されているブラウザってどうなっているの?
 
Azure Static Web Apps を試してみた!
Azure Static Web Apps を試してみた!Azure Static Web Apps を試してみた!
Azure Static Web Apps を試してみた!
 
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
 
WebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWebWebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWeb
 
Chrome Apps 概要
Chrome Apps 概要Chrome Apps 概要
Chrome Apps 概要
 
~ アプリ開発に新たな息吹を ~ クラウドが当たり前の今こそ知っておきたい Azure & Visual Studio コラボレーション
~ アプリ開発に新たな息吹を ~ クラウドが当たり前の今こそ知っておきたい Azure & Visual Studio コラボレーション~ アプリ開発に新たな息吹を ~ クラウドが当たり前の今こそ知っておきたい Azure & Visual Studio コラボレーション
~ アプリ開発に新たな息吹を ~ クラウドが当たり前の今こそ知っておきたい Azure & Visual Studio コラボレーション
 
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介 【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
 
The Twelve-Factor (A|M)pp with C#
The Twelve-Factor (A|M)pp with C#The Twelve-Factor (A|M)pp with C#
The Twelve-Factor (A|M)pp with C#
 
Mozapps installがなくなったことへの不平不満
Mozapps installがなくなったことへの不平不満Mozapps installがなくなったことへの不平不満
Mozapps installがなくなったことへの不平不満
 
.NET 5 and Windows app dev
.NET 5 and Windows app dev.NET 5 and Windows app dev
.NET 5 and Windows app dev
 

Viewers also liked

1ª fase de Pla de Comunicació PEU. Programa d'Extensió Universitària. Univers...
1ª fase de Pla de Comunicació PEU. Programa d'Extensió Universitària. Univers...1ª fase de Pla de Comunicació PEU. Programa d'Extensió Universitària. Univers...
1ª fase de Pla de Comunicació PEU. Programa d'Extensió Universitària. Univers...Cristina Riera
 
Monthly Lightning Talk Playback 2014-12
Monthly Lightning Talk Playback 2014-12Monthly Lightning Talk Playback 2014-12
Monthly Lightning Talk Playback 2014-12Seiya Konno
 
ادارة المشروعات
ادارة المشروعاتادارة المشروعات
ادارة المشروعاتHaitham Shaaban
 
Perfume hackathon
Perfume hackathonPerfume hackathon
Perfume hackathonSeiya Konno
 

Viewers also liked (8)

Social networking
Social networkingSocial networking
Social networking
 
Verizon communication
Verizon communicationVerizon communication
Verizon communication
 
1ª fase de Pla de Comunicació PEU. Programa d'Extensió Universitària. Univers...
1ª fase de Pla de Comunicació PEU. Programa d'Extensió Universitària. Univers...1ª fase de Pla de Comunicació PEU. Programa d'Extensió Universitària. Univers...
1ª fase de Pla de Comunicació PEU. Programa d'Extensió Universitària. Univers...
 
Brand new world
Brand new worldBrand new world
Brand new world
 
Monthly Lightning Talk Playback 2014-12
Monthly Lightning Talk Playback 2014-12Monthly Lightning Talk Playback 2014-12
Monthly Lightning Talk Playback 2014-12
 
ادارة المشروعات
ادارة المشروعاتادارة المشروعات
ادارة المشروعات
 
Sunsilk gog
Sunsilk gogSunsilk gog
Sunsilk gog
 
Perfume hackathon
Perfume hackathonPerfume hackathon
Perfume hackathon
 

Similar to About WebRTC

JavaScript And Keywords
JavaScript And KeywordsJavaScript And Keywords
JavaScript And Keywordsuupaa
 
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜Kensaku Komatsu
 
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向Shumpei Shiraishi
 
Magic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみたMagic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみたNishoMatsusita
 
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』Futomi Hatano
 
【de:code 2020】 Build 2020 最新情報 〜 Azure & Visual Studio & .NET 〜
【de:code 2020】 Build 2020 最新情報 〜 Azure & Visual Studio & .NET 〜【de:code 2020】 Build 2020 最新情報 〜 Azure & Visual Studio & .NET 〜
【de:code 2020】 Build 2020 最新情報 〜 Azure & Visual Studio & .NET 〜日本マイクロソフト株式会社
 
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発Akira Inoue
 
Kilimanjaro Event
Kilimanjaro EventKilimanjaro Event
Kilimanjaro Eventdynamis
 
[Mobile5] 最新動向 2012年5月
[Mobile5] 最新動向 2012年5月[Mobile5] 最新動向 2012年5月
[Mobile5] 最新動向 2012年5月Akira Sasaki
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Shotaro Suzuki
 
Html5超入門
Html5超入門Html5超入門
Html5超入門Monaca
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Shotaro Suzuki
 
HTML5開発最前線
HTML5開発最前線HTML5開発最前線
HTML5開発最前線yoshikawa_t
 
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう Hideki Akiba
 
Chromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそうChromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそうmganeko
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Shotaro Suzuki
 
Firefox mobile for android internals
Firefox mobile for android internalsFirefox mobile for android internals
Firefox mobile for android internalsMakoto Kato
 
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめWebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめAkira Inoue
 

Similar to About WebRTC (20)

20171005 webrtc
20171005 webrtc20171005 webrtc
20171005 webrtc
 
JavaScript And Keywords
JavaScript And KeywordsJavaScript And Keywords
JavaScript And Keywords
 
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
 
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
 
Magic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみたMagic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみた
 
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
 
【de:code 2020】 Build 2020 最新情報 〜 Azure & Visual Studio & .NET 〜
【de:code 2020】 Build 2020 最新情報 〜 Azure & Visual Studio & .NET 〜【de:code 2020】 Build 2020 最新情報 〜 Azure & Visual Studio & .NET 〜
【de:code 2020】 Build 2020 最新情報 〜 Azure & Visual Studio & .NET 〜
 
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
 
Kilimanjaro Event
Kilimanjaro EventKilimanjaro Event
Kilimanjaro Event
 
[Mobile5] 最新動向 2012年5月
[Mobile5] 最新動向 2012年5月[Mobile5] 最新動向 2012年5月
[Mobile5] 最新動向 2012年5月
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
 
Html5超入門
Html5超入門Html5超入門
Html5超入門
 
Mvc conf session_5_isami
Mvc conf session_5_isamiMvc conf session_5_isami
Mvc conf session_5_isami
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
 
HTML5開発最前線
HTML5開発最前線HTML5開発最前線
HTML5開発最前線
 
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
 
Chromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそうChromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそう
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
 
Firefox mobile for android internals
Firefox mobile for android internalsFirefox mobile for android internals
Firefox mobile for android internals
 
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめWebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
 

More from Seiya Konno

OSS に貢献しよう - Creators MeetUp #25
OSS に貢献しよう - Creators MeetUp #25OSS に貢献しよう - Creators MeetUp #25
OSS に貢献しよう - Creators MeetUp #25Seiya Konno
 
│▌║█▌▌║║║█▌█║█ の話 / LIG + SHIFTBRAIN + UNIBA 別冊ライトニングトーク Vol. 1
│▌║█▌▌║║║█▌█║█ の話 / LIG + SHIFTBRAIN + UNIBA 別冊ライトニングトーク Vol. 1│▌║█▌▌║║║█▌█║█ の話 / LIG + SHIFTBRAIN + UNIBA 別冊ライトニングトーク Vol. 1
│▌║█▌▌║║║█▌█║█ の話 / LIG + SHIFTBRAIN + UNIBA 別冊ライトニングトーク Vol. 1Seiya Konno
 
Flashback 2014 / うぇぶ屋のみイントーキョー Vol. 3
Flashback 2014 / うぇぶ屋のみイントーキョー Vol. 3Flashback 2014 / うぇぶ屋のみイントーキョー Vol. 3
Flashback 2014 / うぇぶ屋のみイントーキョー Vol. 3Seiya Konno
 
Monthly lightning-talk-playback-201410
Monthly lightning-talk-playback-201410Monthly lightning-talk-playback-201410
Monthly lightning-talk-playback-201410Seiya Konno
 
月刊ライトニングトーク 2014/08: 前回からのダイジェスト
月刊ライトニングトーク 2014/08: 前回からのダイジェスト月刊ライトニングトーク 2014/08: 前回からのダイジェスト
月刊ライトニングトーク 2014/08: 前回からのダイジェストSeiya Konno
 
月刊ライトニングトーク 2014/06-07: 前回からのダイジェスト
月刊ライトニングトーク 2014/06-07: 前回からのダイジェスト月刊ライトニングトーク 2014/06-07: 前回からのダイジェスト
月刊ライトニングトーク 2014/06-07: 前回からのダイジェストSeiya Konno
 
月刊ライトニングトーク 2014/05 atom-shell を試してみた
月刊ライトニングトーク 2014/05 atom-shell を試してみた月刊ライトニングトーク 2014/05 atom-shell を試してみた
月刊ライトニングトーク 2014/05 atom-shell を試してみたSeiya Konno
 
月刊ライトニングトーク 2014/05 先月のふりかえり
月刊ライトニングトーク 2014/05 先月のふりかえり月刊ライトニングトーク 2014/05 先月のふりかえり
月刊ライトニングトーク 2014/05 先月のふりかえりSeiya Konno
 
月刊ライトニングトーク 2014/05 イントロダクション
月刊ライトニングトーク 2014/05 イントロダクション月刊ライトニングトーク 2014/05 イントロダクション
月刊ライトニングトーク 2014/05 イントロダクションSeiya Konno
 
About node-canvas
About node-canvasAbout node-canvas
About node-canvasSeiya Konno
 
Kinect Workshop Part 1/2
Kinect Workshop Part 1/2Kinect Workshop Part 1/2
Kinect Workshop Part 1/2Seiya Konno
 

More from Seiya Konno (11)

OSS に貢献しよう - Creators MeetUp #25
OSS に貢献しよう - Creators MeetUp #25OSS に貢献しよう - Creators MeetUp #25
OSS に貢献しよう - Creators MeetUp #25
 
│▌║█▌▌║║║█▌█║█ の話 / LIG + SHIFTBRAIN + UNIBA 別冊ライトニングトーク Vol. 1
│▌║█▌▌║║║█▌█║█ の話 / LIG + SHIFTBRAIN + UNIBA 別冊ライトニングトーク Vol. 1│▌║█▌▌║║║█▌█║█ の話 / LIG + SHIFTBRAIN + UNIBA 別冊ライトニングトーク Vol. 1
│▌║█▌▌║║║█▌█║█ の話 / LIG + SHIFTBRAIN + UNIBA 別冊ライトニングトーク Vol. 1
 
Flashback 2014 / うぇぶ屋のみイントーキョー Vol. 3
Flashback 2014 / うぇぶ屋のみイントーキョー Vol. 3Flashback 2014 / うぇぶ屋のみイントーキョー Vol. 3
Flashback 2014 / うぇぶ屋のみイントーキョー Vol. 3
 
Monthly lightning-talk-playback-201410
Monthly lightning-talk-playback-201410Monthly lightning-talk-playback-201410
Monthly lightning-talk-playback-201410
 
月刊ライトニングトーク 2014/08: 前回からのダイジェスト
月刊ライトニングトーク 2014/08: 前回からのダイジェスト月刊ライトニングトーク 2014/08: 前回からのダイジェスト
月刊ライトニングトーク 2014/08: 前回からのダイジェスト
 
月刊ライトニングトーク 2014/06-07: 前回からのダイジェスト
月刊ライトニングトーク 2014/06-07: 前回からのダイジェスト月刊ライトニングトーク 2014/06-07: 前回からのダイジェスト
月刊ライトニングトーク 2014/06-07: 前回からのダイジェスト
 
月刊ライトニングトーク 2014/05 atom-shell を試してみた
月刊ライトニングトーク 2014/05 atom-shell を試してみた月刊ライトニングトーク 2014/05 atom-shell を試してみた
月刊ライトニングトーク 2014/05 atom-shell を試してみた
 
月刊ライトニングトーク 2014/05 先月のふりかえり
月刊ライトニングトーク 2014/05 先月のふりかえり月刊ライトニングトーク 2014/05 先月のふりかえり
月刊ライトニングトーク 2014/05 先月のふりかえり
 
月刊ライトニングトーク 2014/05 イントロダクション
月刊ライトニングトーク 2014/05 イントロダクション月刊ライトニングトーク 2014/05 イントロダクション
月刊ライトニングトーク 2014/05 イントロダクション
 
About node-canvas
About node-canvasAbout node-canvas
About node-canvas
 
Kinect Workshop Part 1/2
Kinect Workshop Part 1/2Kinect Workshop Part 1/2
Kinect Workshop Part 1/2
 

About WebRTC

  • 1. WebRTC について 2012/06/04
  • 2. アジェンダ • ミーティングの目的 • WebRTC とは • できること • 応用例
  • 3. 目的 • 新規技術のつまみ食い • 投資的な動き • 今後の提案の材料と出来るようにし ておく • 技術デモ止まりでなくプロダクション レベルへ
  • 4. WebRTC とは • Web ブラウザで Real Time Communication をするための仕様 • カメラ・マイクへのアクセス • ブラウザで P2P • Google が主導
  • 5. WebRTC とは • ブラウザだけでビデオチャット・ボイ スチャットを実装することが出来る
  • 6. WebRTC とは • プロトコル (IETF が標準化) • UDP ベース • JavaScript API (W3C が標準化) • Stream API • Peer-to-peer connection
  • 7. Stream API • カメラ・マイクからのデータを取得で きる • キャプチャしたデータを HTML5 の <video> タグにマッピングできる • Canvas や Web Audio API で処理可能
  • 8. P2P Connection • ブラウザ同士で P2P 通信 • Peer 同士の取り次ぎは Signaling サー バを使用 (WebSocket) • NAT を越えるには STUN サーバを使用 • いわゆるピュア P2P ではない
  • 9. 使用上の注意 • 現時点でデスクトップ版 Chrome と Opera の開発版のみ対応 • Chrome で使用する場合は about:flags で WebRTC を有効にする • 新しい規格のため仕様が安定していな い
  • 10. Demo • https://webglmeeting.appspot.com/ • http://neave.com/webcam/html5/ • http://apprtc.appspot.com/html/face.html
  • 11. 今後の展望 • Mozilla が Firefox へ実装中 • 2013 年 2 月に仕様策定完了予定 • Skype, Hangout のような Web アプリ • Flash で流行したコンテンツの再利用 • モバイル端末での利用 • Android 版 Chrome が実装してきそう
  • 12. ライブラリ • JSARToolkit • https://github.com/kig/JSARToolKit • AR (拡張現実) 用のライブラリ • Face.js / CCV • https://github.com/liuliu/ccv • 顔検出用ライブラリ • getUserMedia.js • https://github.com/addyosmani/getUserMedia.js • getUserMedia の polyfill ライブラリ
  • 13. 参考 • 公式 • http://www.webrtc.org/ • API 仕様ドラフト (W3C) • http://www.w3.org/TR/webrtc/ • こてさき Ajax : WebRTC事始め • http://blog.livedoor.jp/kotesaki/archives/1794148.html