Downloaded 80 times
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/75/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-218-2048.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。
WebSocket Serverクラス取得](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/75/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-219-2048.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。
WebSocket Serverクラスの
インスタンス化
(ポート番号8080)](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/75/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-220-2048.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。
コネクションの格納領域作成](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/75/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-221-2048.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。
接続時の動作を指定](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/75/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-222-2048.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。
接続時に
コネクションを格納](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/75/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-223-2048.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。
メッセージ受信時の動作を指定](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/75/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-224-2048.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。
メッセージ受信時に
受け取ったメッセージの表示と
格納しているコネクションに送信](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/75/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-225-2048.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。
切断時の動作を指定](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/75/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-226-2048.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。
切断時に
コネクションを削除](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/75/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-227-2048.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/75/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-228-2048.jpg)
More Related Content
![WebGL (Three.js) Code Lab - Intro. [ GTUG Girls 10th]](https://cdn.slidesharecdn.com/ss_thumbnails/webglgtug10th-130122052159-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
- 1. HTML5の基礎と応用 Open Web Platform WebSocket/ WebRTC / Web Audio API / WebGL 2014/06/27 金城 雄 NTTアドバンステクノロジ 情報機器テクノロジセンタ所属 http://www.ntt-at.co.jp/ 第三版
- 2.
- 3. 内容 HTML5の概要 休憩 HTML5のAPI 2つ (デモ込み) 時間があれば休憩 HTML5のAPI2つ (デモ込み) HTML5のAPIの組み合わせ (デモ込み)
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94. まずない。 A < B+ C である限り どこかが キャスティングボードを 握る。 2は?
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104. World? 開発援助委員会(DAC : DevelopmentAssistance Committee) http://en.wikipedia.org/wiki/Development_Assistance_Committee http://ja.wikipedia.org/wiki/%E9%96%8B%E7%99%BA%E6%8F%B4%E5%8A %A9%E5%A7%94%E5%93%A1%E4%BC%9A http://en.wikipedia.org/wiki/File:DAC_members.svg より改変して引用
- 105. World! 開発援助委員会(DAC : DevelopmentAssistance Committee) http://en.wikipedia.org/wiki/Development_Assistance_Committee http://ja.wikipedia.org/wiki/%E9%96%8B%E7%99%BA%E6%8F%B4%E5%8A %A9%E5%A7%94%E5%93%A1%E4%BC%9A http://en.wikipedia.org/wiki/File:DAC_members.svg より改変して引用
- 106. こう語る人が多い... 開発援助委員会(DAC : DevelopmentAssistance Committee) http://en.wikipedia.org/wiki/Development_Assistance_Committee http://ja.wikipedia.org/wiki/%E9%96%8B%E7%99%BA%E6%8F%B4%E5%8A %A9%E5%A7%94%E5%93%A1%E4%BC%9A http://en.wikipedia.org/wiki/File:DAC_members.svg より改変して引用
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113. The Next 4Billion 次の40億人 BOP : Base of the Pyramid
- 114. 一人当たり年間所得が 2002年購買力平価で 3,000ドル以下の階層であり、 全世界人口の約7割である 約40億人が属するとされる。 BOP層 Bottom of thePyramid Base of the Pyramid Base of the Economic Pyramid 経済産業省 BOPビジネス支援センター ポータルサイトより http://www.bop.go.jp/bop
- 115.
- 116.
- 117.
- 118.
- 119.
- 120. 現在の値段と収入 http://www.stat.go.jp/data/kakei/longtime/ 値段は https://www.amazon.co.jp/ の各カテゴリの最人気商品(2014/04/15現在)※ 最安商品ではない 電機洗濯機 ハイアール製 JW-K42H(W) 販売価格 18,880円 液晶テレビ シャープ製 LC-19K90-B 販売価格 23,168円 電気冷蔵庫 ハイアール製 JR-N106H(K) 販売価格 20,152円 炊飯器 パナソニック製 SR-ML051-W 販売価格 5,671円 世帯収入(月) 平成25年(2013年) 523,736円
- 121.
- 122. 携帯電話人口 ??? 億人 インターネット人口??? 億人 ブロードバンド人口 ??? 億人 世界のICT市場 http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 総務省 情報通信白書 平成24年版 より 元のデータはITUの統計データ World Telecommunication/ICT Indicators Database 2011(15th Edition)
- 123. 携帯電話人口 53.6 億人 インターネット人口??? 億人 ブロードバンド人口 ??? 億人 世界のICT市場 http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 総務省 情報通信白書 平成24年版 より 元のデータはITUの統計データ World Telecommunication/ICT Indicators Database 2011(15th Edition)
- 124. 携帯電話人口 53.6 億人 インターネット人口20.3 億人 ブロードバンド人口 ??? 億人 世界のICT市場 http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 総務省 情報通信白書 平成24年版 より 元のデータはITUの統計データ World Telecommunication/ICT Indicators Database 2011(15th Edition)
- 125. 携帯電話人口 53.6 億人 インターネット人口20.3 億人 ブロードバンド人口 5.2 億人 世界のICT市場 http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 総務省 情報通信白書 平成24年版 より 元のデータはITUの統計データ World Telecommunication/ICT Indicators Database 2011(15th Edition)
- 126. 携帯電話人口 7.2 億人⇒ 53.6 億人 インターネット人口 3.9 億人 ⇒ 20.3 億人 ブロードバンド人口 0.2 億人 ⇒ 5.2 億人 2000年 ⇒ 2010年 http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 総務省 情報通信白書 平成24年版 より 元のデータはITUの統計データ World Telecommunication/ICT Indicators Database 2011(15th Edition)
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135. Android HuaweiのIDEOSを ケニアのSafaricomが 80ドルで発売 (2011年) Firefox OS 新興国市場向けの端末を発表(2014年) 25ドルのスマートフォン向けの チップセットを発表 (2014年)
- 136. 洗濯機 79% (23,000円) テレビ 199% (58,000円) 冷蔵庫 214%(62,500円) 炊飯器 15% (4500円) 収入に対する比率 日本 (1955年) 世帯あたりの所得 29,169円/月 製品の性質は 一世帯に一台
- 137. Android 32% (80ドル) Firefox OS 10%(25ドル) 収入に対する比率 BOP層 (3000ドル以下/年) 一人あたりの所得 250ドル以下/月 製品の性質は ひとりに一台
- 138. Android 32% (80ドル) Firefox OS 10%(25ドル) 洗濯機 79% (23,000円) テレビ 199% (58,000円) 冷蔵庫 214% (62,500円) 炊飯器 15% (4500円) 収入に対する比率 要考慮項目 通信費 所有台数/世帯
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147. http://www.wri.org/sites/default/files/pdf/ n4b-j.pdf THE NEXT 4 BILLION 次なる40億人 ピラミッドの 底辺（BOP）の 市場規模と ビジネス戦略 THENEXT4BILLION―次なる40億人|ピラミッドの底辺（BOP）の市場規模とビジネス戦略 WR I ピラミッドの底辺（BOP）の市場規模と ビジネス戦略 THE NEXT 4 BILLION 次なる40億人
- 148.
- 149.
- 150.
- 151.
- 152. HTML5 = HTML5+ CSS + JS
- 153. HTML5 = HTML5+ CSS + JS 広義 狭義
- 154. HTML5 = HTML5+ CSS + JS 広義 狭義 マークアップ言語の仕様 従来のHTMLの改訂 新しいAPIも含まれる バズワード(マーケティング用語)
- 155. Semantic Elements Multi Media Canvas HTML5 Forms Offline Support Webm H.264 Micro- Data WebGL Web SQL Indexed DB SVG Server- Sent ev. Web Sockets Web Sockets Geo- location FileAPI Web Storage XHR2 Math ML Web Audio Layout Media Queries HTML5 CSS3~Trans form Anim ation Regions Flex Box HTML5 Parser Mouse, Key ev. Opus ECMA ScriptECMA 6th USB CSP SPDY WebCL Web RTC Net Info MP3 Device Storage TCP Socket NFC File Sys Notifi- cation XHTML5 Orien- tation Web Workers Web Messag- ing DOM4 SMIL Vibra- tion Proxi- mity XPath RSS RDF OGP Schema .org WAI- ARIA W3C WHATWG other Khronos ECMA IETF WOFF Battery Status Radio Tel HTML DNT http://www.slideshare.net/dynamis/toward-firefox-os/26 より引用
- 156.
- 157. HTML5 = HTML5+ CSS + JS 本日のコンテキスト これ
- 158. HTML5 = HTML5+ CSS + JS 本日のコンテキスト これ 最近では バズワードを避けて 一部の人は OpenWebPlatform と呼んでいる。
- 159.
- 160.
- 161.
- 162. browse / braʊz/ 1 【本雑誌などを】拾い読みする; 立ち読みする. 2 インターネット (ブラウザを使って)閲覧する. 3 (店で)商品を眺めて見て回る. 4 〈家畜が〉【草葉などを】食べる. ウィズダム英和辞典 OS X Mavericks(v10.9)同梱版 より改変して引用
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173.
- 174.
- 175.
- 176.
- 177.
- 178. OSの機能がブラウザ上で OSの機能が、ブラウザを介してサイト に提供される アドレス帳 ネットワーク情報 バッテリー状態通知 ストリーム メディアデータ オーディオ ビデオ 字幕 Webカメラ マイク Audioの波形操作 2D(ラスター,ベクター) 3DCG 音声入力 音声合成 暗号化 ファイルシステム データベース スレッド 通信(WebSocket,TCP,UDP) Bluetooth 加速度センサ 傾きセンサ ジャイロ バイブレーション GPS 電子コンパス 温度センサ 湿度センサ 気圧センサ 環境光センサ 近接センサ 磁気センサ etc. ネット接続が前提のもの・仕様策定中のもの・WebOS向けのものも含まれています。
- 179.
- 180.
- 181.
- 182.
- 183. Mobile OSとの関係 iOS Android Native Appが基本 UIWebView/WebViewを使ってできなくはない HTML5で記述し、両OSを含む複数のOS向けのApp に加工するApacheCordovaというツールがある その他にも似たようなツール多数
- 184. 2大勢力を追う第3勢力 Firefox OS Windows Phone UbuntuTouch TIZEN Mobile BlackBerry
- 185. 第3勢力のApp作成手段 HTML5でNative Appを作成HTML5でNative Appを作成 NativeAppあり HTML5でも可能 Native Appあり HTML5でも可能 Native Appあり HTML5でも可能 Native Appあり HTML5でも可能
- 186.
- 187.
- 188.
- 189.
- 190.
- 191.
- 192.
- 193.
- 194.
- 195.
- 196.
- 197.
- 198.
- 199.
- 200.
- 201.
- 202.
- 203.
- 204. 何故双方向通信が可能か HTTPでWebSocketのハンドシェイクを行なう Client Server request response GET /HTTP/1.1 Upgrade: websocket Connection: Upgrade (略) HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade (略) handshake 厳密にはHTTPと完全互換ではありません。
- 205.
- 206.
- 207. 何故双方向通信が可能か HTTPを模しているため 通過しやすいが100%ではない HTTP (port 80)67% HTTP (port 61985) 86% HTTPS (port 443) 95% http://www.ietf.org/mail-archive/web/tls/current/msg05593.html
- 208. 何故高速通信が可能か あるHTTP requestのHeader GET /HTTP/1.1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/ *;q=0.8 Accept-Encoding: gzip,deflate,sdch Accept-Language: ja,en-US;q=0.8,en;q=0.6 Cache-Control: max-age=0 Connection: keep-alive Host: localhost If-Modified-Since: Tue, 08 Oct 2013 17:46:38 GMT If-None-Match: "3e031b2-13a1-4e83e59bcbb80" User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 400 Bytes over!
- 209. 何故高速通信が可能か WebSocketのHeader FIN 1 bit RSV11 bit RSV2 1 bit RSV3 1 bit Opcode 4 bits Mask 1 bit Payload length 7 bits, 7+16 bits, or 7+64 bits Masking-key 0 bytes or 4 bytes 2 14 Bytes
- 210. 何故高速通信が可能か 送信データが「Hello, world」の場合 HTTP 12 bytes+ 400 bytes → 412 Bytes 97.1%がHeader WebSocket (Client => Server) 12 bytes + 6 bytes → 18 Bytes 33.3%がHeader
- 211. 何故高速通信が可能か 送信データが「Hello, world」の場合 HTTP 12 bytes+ 400 bytes → 412 Bytes 97.1%がHeader WebSocket (Client => Server) 12 bytes + 6 bytes → 18 Bytes 33.3%がHeader 送信データが「Hello, world」の場合 HTTP 12 bytes + 400 bytes → 412 Bytes 97.1%がHeader WebSocket (Client => Server) 12 bytes + 6 bytes → 18 Bytes 33.3%がHeader 同じ文字列を 送信するために 約23倍の データ量
- 212.
- 214.
- 215. WebSocket Server node.js サーバサイドJavaScript wsWebSocketライブラリ 以下はインストール済みとする nvm nodeのバージョン切り替えツール npm nodeのパッケージ管理ツール WebSocket Chat 作成
- 216. % mkdir chat←ディレクトリ作成 % cd chat ←ディレクトリ移動 % nvm use v0.10.21 ←バージョン指定 % npm install ws ←wsインストール node.jsとwsの セットアップ
- 217.
- 218. var WebSocketServer =require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
- 219. var WebSocketServer =require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 WebSocket Serverクラス取得
- 220. var WebSocketServer =require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 WebSocket Serverクラスの インスタンス化 (ポート番号8080)
- 221. var WebSocketServer =require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 コネクションの格納領域作成
- 222. var WebSocketServer =require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 接続時の動作を指定
- 223. var WebSocketServer =require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 接続時に コネクションを格納
- 224. var WebSocketServer =require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 メッセージ受信時の動作を指定
- 225. var WebSocketServer =require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 メッセージ受信時に 受け取ったメッセージの表示と 格納しているコネクションに送信
- 226. var WebSocketServer =require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 切断時の動作を指定
- 227. var WebSocketServer =require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 切断時に コネクションを削除
- 228. var WebSocketServer =require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
- 229.
- 230. <!DOCTYPE html> <input id="msg"/> <input type="button" value="send" id="send" /> <div id="disp"></div> <script> var ws = new WebSocket('ws://localhost:8080'); ws.addEventListener('message', function(e) { var disp = document.getElementById('disp'); var text = document.createTextNode(e.data); disp.appendChild(text); }, false); document.getElementById('send') .addEventListener('click', function(e) { var msg = document.getElementById('msg'); ws.send(msg.value); msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Client
- 231. <!DOCTYPE html> <input id="msg"/> <input type="button" value="send" id="send" /> <div id="disp"></div> <script> var ws = new WebSocket('ws://localhost:8080'); ws.addEventListener('message', function(e) { var disp = document.getElementById('disp'); var text = document.createTextNode(e.data); disp.appendChild(text); }, false); document.getElementById('send') .addEventListener('click', function(e) { var msg = document.getElementById('msg'); ws.send(msg.value); msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Client テキストボックス・ボタン・ メッセージエリアの表示と Script要素
- 232. <!DOCTYPE html> <input id="msg"/> <input type="button" value="send" id="send" /> <div id="disp"></div> <script> var ws = new WebSocket('ws://localhost:8080'); ws.addEventListener('message', function(e) { var disp = document.getElementById('disp'); var text = document.createTextNode(e.data); disp.appendChild(text); }, false); document.getElementById('send') .addEventListener('click', function(e) { var msg = document.getElementById('msg'); ws.send(msg.value); msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Client WebSocketで接続
- 233. <!DOCTYPE html> <input id="msg"/> <input type="button" value="send" id="send" /> <div id="disp"></div> <script> var ws = new WebSocket('ws://localhost:8080'); ws.addEventListener('message', function(e) { var disp = document.getElementById('disp'); var text = document.createTextNode(e.data); disp.appendChild(text); }, false); document.getElementById('send') .addEventListener('click', function(e) { var msg = document.getElementById('msg'); ws.send(msg.value); msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Client メッセージ受信時の動作を指定
- 234. <!DOCTYPE html> <input id="msg"/> <input type="button" value="send" id="send" /> <div id="disp"></div> <script> var ws = new WebSocket('ws://localhost:8080'); ws.addEventListener('message', function(e) { var disp = document.getElementById('disp'); var text = document.createTextNode(e.data); disp.appendChild(text); }, false); document.getElementById('send') .addEventListener('click', function(e) { var msg = document.getElementById('msg'); ws.send(msg.value); msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Client メッセージ受信時に 受け取ったメッセージを表示
- 235. <!DOCTYPE html> <input id="msg"/> <input type="button" value="send" id="send" /> <div id="disp"></div> <script> var ws = new WebSocket('ws://localhost:8080'); ws.addEventListener('message', function(e) { var disp = document.getElementById('disp'); var text = document.createTextNode(e.data); disp.appendChild(text); }, false); document.getElementById('send') .addEventListener('click', function(e) { var msg = document.getElementById('msg'); ws.send(msg.value); msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Client ボタンクリック時の動作を指定
- 236. <!DOCTYPE html> <input id="msg"/> <input type="button" value="send" id="send" /> <div id="disp"></div> <script> var ws = new WebSocket('ws://localhost:8080'); ws.addEventListener('message', function(e) { var disp = document.getElementById('disp'); var text = document.createTextNode(e.data); disp.appendChild(text); }, false); document.getElementById('send') .addEventListener('click', function(e) { var msg = document.getElementById('msg'); ws.send(msg.value); msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Client ボタンクリック時に メッセージを送信して入力欄を空に
- 237. <!DOCTYPE html> <input id="msg"/> <input type="button" value="send" id="send" /> <div id="disp"></div> <script> var ws = new WebSocket('ws://localhost:8080'); ws.addEventListener('message', function(e) { var disp = document.getElementById('disp'); var text = document.createTextNode(e.data); disp.appendChild(text); }, false); document.getElementById('send') .addEventListener('click', function(e) { var msg = document.getElementById('msg'); ws.send(msg.value); msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Client
- 238.
- 239.
- 240.
- 241.
- 242.
- 243. Over The Top 手段の例 市場 ユーザ メリット 事業者 メリット 利用方法 Skype,WebEx (YouTube, Ustream) キャリアに縛られない独自の仕組みを 提供する少数のベンダーが参加可能 世界中の人と無料/安価で会話できる 限定的なAPI提供 一部連携可能 ユーザが組み合わせて利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
- 244.
- 245. キャリア型通信 Over TheTop Webブラウザ型 手段の例 市場 ユーザ メリット 事業者 メリット 利用方法 固定電話 携帯電話 (TV放送) Skype, WebEx (Youtube, Ustream) WebRTC インフラを持つ キャリアが支配 キャリアに縛られない 独自の仕組みを提供 する少数のベンダー が参加可能 特別な仕組みは不要 誰でも参加可能 世界中の人と 会話できる 世界中の人と無料/ 安価で会話できる 専用アプリ無しで 会話できる × 限定的なAPI提供 一部連携可能 完全にプログラマブル 部品として利用可能 単独で利用 ユーザが組み合わせて 利用 製品/サービスに 組み込んで利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
- 246. WebRTC 2つの仕様 Media Capture andStreams (getUserMedia) WebRTC 1.0: Real-time Communication Between Browsers
- 247. Media Capture andStreams (getUserMedia) ブラウザからマイクやカメラにアクセス 利用範囲はWebRTC以外とも 音声処理(with Web Audio API) ボイスチェンジャー etc. 画像処理(with Canvas) 顔検出 etc. 顔認識ができるようになるのも時間の問題か?
- 248.
- 249.
- 250. <!DOCTYPE html> <video id="video"/> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document.getElementById('video'); video.src = window.URL.createObjectURL(stream); video.play(); }, function(error) { console.log(error); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 251. <!DOCTYPE html> <video id="video"/> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document.getElementById('video'); video.src = window.URL.createObjectURL(stream); video.play(); }, function(error) { console.log(error); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ビデオ要素の表示と Script要素
- 252. <!DOCTYPE html> <video id="video"/> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document.getElementById('video'); video.src = window.URL.createObjectURL(stream); video.play(); }, function(error) { console.log(error); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ユーザメディアの取得開始
- 253. <!DOCTYPE html> <video id="video"/> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document.getElementById('video'); video.src = window.URL.createObjectURL(stream); video.play(); }, function(error) { console.log(error); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 取得するユーザメディアは カメラとマイク
- 254. <!DOCTYPE html> <video id="video"/> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document.getElementById('video'); video.src = window.URL.createObjectURL(stream); video.play(); }, function(error) { console.log(error); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ユーザメディア取得時の動作を指定
- 255. <!DOCTYPE html> <video id="video"/> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document.getElementById('video'); video.src = window.URL.createObjectURL(stream); video.play(); }, function(error) { console.log(error); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ビデオ要素の取得 ユーザメディアの指定 再生開始
- 256. <!DOCTYPE html> <video id="video"/> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document.getElementById('video'); video.src = window.URL.createObjectURL(stream); video.play(); }, function(error) { console.log(error); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ユーザメディア取得エラーの動作を指定
- 257. <!DOCTYPE html> <video id="video"/> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document.getElementById('video'); video.src = window.URL.createObjectURL(stream); video.play(); }, function(error) { console.log(error); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 258. WebRTC 1.0: Real-time CommunicationBetween Browsers ブラウザとブラウザを接続 シグナリングの仕組みは別途必要 SIP XMPP WebSocket <- 今のところ一番使われている etc.
- 259.
- 260. WebRTC 1.0: Real-time CommunicationBetween Browsers NAT通過・ ネゴシエーション ICE(STUN + TURN + α) STUN P2P・UDPホールパンチング TURN サーバ経由
- 261. WebRTC 1.0: Real-time CommunicationBetween Browsers SDP セッション開始に必要な情報を記述 DTLS UDP版TLS
- 262. WebRTC 1.0: Real-time CommunicationBetween Browsers データ通信 DTLSで全て暗号化される MediaStream (SRTP・SRTCP) 音声データ・映像データ DataChannel (SCTP) テキストデータ・バイナリデータ
- 263. WebRTC 1.0: Real-time CommunicationBetween Browsers SRTP・SRTCP リアルタイムデータ転送プロトコル SCTP TCPに似たプロトコル 設定で、信頼性と引き換えにリアルタ イム性の向上が可能
- 264. Web Server WebSocket Server ICE Server (STUN) BrowserBrowser NAT NAT HTML+JS+CSS Global IP/Port signaling HTML+JS+CSS Global IP/Port signaling data
- 265.
- 266. WebRTC 1.0: Real-time CommunicationBetween Browsers APIが複雑でわかりにくい 抽象化した仕様の多い HTML5の他のAPIと比べると 非常に複雑 それでも、従来のリアルタイム通信の 処理よりは断然楽 ジッタやパケットロス等の対策は、 ブラウザが全て対応してくれる
- 267.
- 268.
- 269.
- 270.
- 271.
- 272.
- 273.
- 274.
- 275.
- 276.
- 277.
- 278.
- 279.
- 280.
- 281. <!DOCTYPE html> <script> var context= new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 282. <!DOCTYPE html> <script> var context= new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 Script要素
- 283. <!DOCTYPE html> <script> var context= new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 AudioContextクラスの インスタンス化
- 284. <!DOCTYPE html> <script> var context= new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ゲイン(音量調整)ノード作成 ディレイ(遅延)ノード作成
- 285. <!DOCTYPE html> <script> var context= new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ゲイン(音量調整)に20%を指定 ディレイ(遅延)に0.2秒を指定
- 286. <!DOCTYPE html> <script> var context= new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ユーザメディアの取得開始 取得するユーザメディアはマイク
- 287. <!DOCTYPE html> <script> var context= new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ユーザメディア取得時の動作を指定
- 288. <!DOCTYPE html> <script> var context= new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 メディアストリームから Web Audio APIのオブジェクトを作成
- 289. <!DOCTYPE html> <script> var context= new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 source(インプット)を destination(アウトプット)に接続 第一のルート outputinput Gain 20% Delay 0.2s
- 290. <!DOCTYPE html> <script> var context= new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 source・ディレイ・ゲイン・ destinationの順に接続 第二のルート outputinput Gain 20% Delay 0.2s
- 291. <!DOCTYPE html> <script> var context= new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ゲインからディレイに接続 (遅延・音量調整をループ) 第三のルート outputinput Gain 20% Delay 0.2s
- 292. <!DOCTYPE html> <script> var context= new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 293. Web Audo APIまとめ ノードを接続し処理を行なう 多数のinput/output 音声データの編集ができる JavaScriptで直接編集も可能 3D空間にも対応
- 294.
- 295.
- 296.
- 297.
- 298.
- 299.
- 300.
- 301.
- 302.
- 303.
- 304. <!DOCTYPE html> <div id="disp"></div> <scriptsrc="three.min.js"></script> <script> // next slide... </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 表示と three.jsの読み込みと Script要素
- 305. var renderer = newTHREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera);
- 306. var renderer = newTHREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera); レンダラーを作成し、サイズと色を指定
- 307. var renderer = newTHREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera); 描画領域をDOM Treeに追加
- 308. var renderer = newTHREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera); カメラを作成 カメラの位置と方向を指定
- 309. var renderer = newTHREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera); 色を指定し、ライトを作成 ライトの位置を指定
- 310. var renderer = newTHREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera); 大きさと目の細かさを指定し、 形状(球)を作成
- 311. var renderer = newTHREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera); 色を指定し、マテリアルを作成
- 312. var renderer = newTHREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera); 形状とマテリアルから メッシュを作成
- 313. var renderer = newTHREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera); シーンを作成し、 ライト・メッシュを シーンに追加
- 314. var renderer = newTHREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera); シーンとカメラと指定し レンダリング(描画)
- 315. var renderer = newTHREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera);
- 317.
- 318.
- 319.
- 320.
- 321.
- 322.
- 323.
- 324.
- 325.
- 326.
- 327.
- 328. 付録1 WebSocket WebRTC getUserMedia An AR Game https://developer.mozilla.org/ja/demos/detail/an-ar-game/launch Facetrackingexample http://auduno.github.io/clmtrackr/clm_video.html Emotion detection example http://auduno.github.io/clmtrackr/examples/clm_emotiondetection.html Real-time Communication Between Browsers Video Chat with getUserMedia https://apprtc.appspot.com/ Web Audio API Pitch Detector with getUserMedia http://webaudiodemos.appspot.com/pitchdetect/index.html
- 329. 付録2 WebGL 3D Interactive AsteroidSpace Visualization - Asterank http://www.asterank.com/3d/ +360º - Car Visualizer - Three.js http://carvisualizer.plus360degrees.com/threejs/ HelloRacer™ WebGL http://helloracer.com/webgl/ Water/Ocean http://oos.moxiecode.com/js_webgl/water_noise/ Md5 Test http://oos.moxiecode.com/js_webgl/md5_test/ Alcatraz Radiotherapy http://scoopex1988.org/released/prods/2012/RadioTherapy/ ACTISKU ¦ 3D Real-time Crypt demo ¦ WebGL http://crypt-webgl.unigine.com/game.html Quake 3 WebGL Demo http://media.tojicode.com/q3bsp/
- 330. 付録3 Combination Color Monoliths https://github.com/youkinjoh/color-monoliths VCMap -Video Chat on The Map http://vcmap.net/ Face substitution http://auduno.github.io/clmtrackr/examples/facesubstitution.html PhiloGL - Real time color 3D histogram http://www.senchalabs.org/philogl/PhiloGL/examples/histogram/ Chrome World Wide Maze for Machine http://chrome.com/maze/ for Android http://g.co/maze Cube Slam https://www.cubeslam.com/ DOM Visualizer - Leap https://github.com/youkinjoh/leap-motion-multiplace-dom-visualizer