Downloaded 32 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/20131111fundamentalsandapplicationsofhtml5expostfacto-131114085343-phpapp01/75/HTML5-Open-Web-Platform-147-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); }); WebSocket Serverクラス取得 }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Server](https://image.slidesharecdn.com/20131111fundamentalsandapplicationsofhtml5expostfacto-131114085343-phpapp01/75/HTML5-Open-Web-Platform-148-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) { WebSocket Serverクラスの c.send(message); }); インスタンス化 }); ws.on('close', function() { (ポート番号8080) clients = clients.filter(function(c) { return c !== ws; }); }); }); 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Server](https://image.slidesharecdn.com/20131111fundamentalsandapplicationsofhtml5expostfacto-131114085343-phpapp01/75/HTML5-Open-Web-Platform-149-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/20131111fundamentalsandapplicationsofhtml5expostfacto-131114085343-phpapp01/75/HTML5-Open-Web-Platform-150-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/20131111fundamentalsandapplicationsofhtml5expostfacto-131114085343-phpapp01/75/HTML5-Open-Web-Platform-151-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/20131111fundamentalsandapplicationsofhtml5expostfacto-131114085343-phpapp01/75/HTML5-Open-Web-Platform-152-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/20131111fundamentalsandapplicationsofhtml5expostfacto-131114085343-phpapp01/75/HTML5-Open-Web-Platform-153-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/20131111fundamentalsandapplicationsofhtml5expostfacto-131114085343-phpapp01/75/HTML5-Open-Web-Platform-154-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/20131111fundamentalsandapplicationsofhtml5expostfacto-131114085343-phpapp01/75/HTML5-Open-Web-Platform-155-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/20131111fundamentalsandapplicationsofhtml5expostfacto-131114085343-phpapp01/75/HTML5-Open-Web-Platform-156-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/20131111fundamentalsandapplicationsofhtml5expostfacto-131114085343-phpapp01/75/HTML5-Open-Web-Platform-157-2048.jpg)
HTML5の基礎と応用 ~Open Web Platform~
- 1. HTML5の基礎と応用 Open Web Platform 2013/11/11 金城雄 NTTアドバンステクノロジ 情報機器テクノロジセンタ所属 http://www.ntt-at.co.jp/
- 2.
- 3.
- 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. 2は? まずない。 A < B+ C である限り どこかが キャスティングボードを 握る。
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91. HTML5 = HTML5+ CSS + JS
- 92. 狭義 HTML5 = HTML5+ CSS + JS 広義
- 93. 狭義 マークアップ言語の仕様 従来のHTMLの改訂 HTML5 = HTML5+ CSS + JS 広義 新しいAPIも含まれる バズワード(マーケティング用語)
- 94.
- 95.
- 96. 本日のコンテキスト HTML5 = HTML5+ CSS + JS これ
- 97. 本日のコンテキスト 最近では バズワードを 避けて、 HTML5 = HTML5+ CSS + JS 一部の人は Open Web Platform これと呼んでいる。
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111. OSの機能がブラウザ上で OSの機能が、ブラウザを介してサイト に提供される アドレス帳 ネットワーク情報 バッテリー状態通知 ストリーム メディアデータ オーディオ ビデオ 字幕 Webカメラ マイク Audioの波形操作 2D(ラスター,ベクター) 3DCG 音声入力 音声合成 暗号化 ファイルシステム データベース スレッド 通信(WebSocket,TCP,UDP) Bluetooth 加速度センサ 傾きセンサ ジャイロ バイブレーション GPS 電子コンパス 温度センサ 湿度センサ 気圧センサ 環境光センサ 近接センサ 磁気センサ etc. ネット接続が前提のもの・仕様策定中のもの・WebOS向けのものも含まれています。
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133. 何故双方向通信が可能か GET / HTTP/1.1 Upgrade:websocket Connection: Upgrade (略) request handshake response Client HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade (略) Server HTTPでWebSocketのハンドシェイクを行なう 厳密にはHTTPと完全互換ではありません。
- 134.
- 135.
- 136. 何故双方向通信が可能か 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
- 137. 何故高速通信が可能か ある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!
- 138. 何故高速通信が可能か WebSocketのHeader FIN RSV1 RSV2 RSV3 Opcode Mask Payload length Masking-key 1 1 1 1 4 1 7 0 bit bit bit bit bits bit bits, 7+16bits, or 7+64 bits bytes or 4 bytes 2 14 Bytes
- 139. 何故高速通信が可能か 送信データが「Hello, world」の場合 HTTP 12 bytes+ 400 bytes → 412 Bytes 97.1%がHeader WebSocket (Client => Server) 12 bytes + 6 bytes → 18 Bytes 33.3%がHeader
- 140. 何故高速通信が可能か 送信データが「Hello, world」の場合 HTTP 同じ文字列を →412 Bytes 12 bytes + 400 bytes 97.1%がHeader 送信するために WebSocket (Client => Server) 約23倍の 12 bytes + 6 bytes → 18 Bytes データ量 33.3%がHeader
- 141.
- 143.
- 144. WebSocket Chat 作成 WebSocketServer node.js サーバサイドJavaScript ws WebSocketライブラリ) 以下はインストール済みとする nvm nodeのバージョン切り替えツール npm nodeのパッケージ管理ツール
- 145. node.jsとwsの セットアップ % % % % mkdir chat cd chat nvmuse v0.10.21 npm install ws ←ディレクトリ作成 ←ディレクトリ移動 ←バージョン指定 ←wsインストール
- 146.
- 147. 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
- 148. 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); }); WebSocket Serverクラス取得 }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Server
- 149. 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) { WebSocket Serverクラスの c.send(message); }); インスタンス化 }); ws.on('close', function() { (ポート番号8080) clients = clients.filter(function(c) { return c !== ws; }); }); }); 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Server
- 150. 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
- 151. 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
- 152. 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
- 153. 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
- 154. 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
- 155. 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
- 156. 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
- 157. 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
- 158.
- 159. Client <!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> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
- 160. Client <!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) { Script要素 document.getElementById('msg'); var msg = ws.send(msg.value); msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
- 161. Client <!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); WebSocketで接続 msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
- 162. Client <!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> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
- 163. Client <!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> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
- 164. Client <!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> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
- 165. Client <!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> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
- 166. Client <!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> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
- 167.
- 168.
- 169. WebRTC ボイス・ビデオチャット / P2P 2つの仕様 MediaCapture and Streams (getUserMedia) WebRTC 1.0: Real-time Communication Between Browsers
- 170. Media Capture andStreams (getUserMesia) ブラウザからマイクやカメラにアクセス 利用範囲はWebRTC以外とも 音声処理(with Web Audio API) ボイスチェンジャー etc. 画像処理(with Canvas) 顔検出 etc. 顔認識ができるようになるのも時間の問題か?
- 171.
- 172.
- 173. <!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(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 174. <!DOCTYPE html> <video id="video"/> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); ビデオ要素の表示と video.src = window.URL Script要素 .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 175. <!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(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 176. <!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(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 177. <!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(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 178. <!DOCTYPE html> ビデオ要素の取得 /> <videoid="video" ユーザメディアの指定 <script> navigator.getUserMedia( 再生開始 {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 179. <!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(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 180. WebRTC 1.0: Real-time CommunicationBetween Browsers ブラウザとブラウザを接続 シグナリング SIP XMPP WebSocket etc. <- 今のところ一番使われている
- 181.
- 182. WebRTC 1.0: Real-time CommunicationBetween Browsers NAT通過・ ネゴシエーション ICE(STUN + TURN + α) STUN P2P・UDPホールパンチング TURN サーバ経由
- 183. WebRTC 1.0: Real-time CommunicationBetween Browsers データ通信 MediaStream 音声データ・映像データ DataChannel テキストデータ・バイナリデータ
- 184. Web Server HTML+JS+CSS HTML+JS+CSS ICE Server (STUN) GlobalIP/Port Global IP/Port WebSocket Server signaling NAT Browser signaling data NAT Browser
- 185. 別資料 WebRTC Data Black Magic P1853 をご覧下さい https://speakerdeck.com/feross/webrtc-data-black-magic
- 186. WebRTC 1.0: Real-time CommunicationBetween Browsers APIが複雑でわかりにくい 抽象化した仕様の多い HTML5のAPIの中では 非常に複雑
- 187.
- 188.
- 189.
- 190.
- 191.
- 192.
- 193.
- 194.
- 195.
- 196.
- 197.
- 198.
- 199. <!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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 200. <!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); Script要素 delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 201. <!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); AudioContextクラスの source.connect(delay); delay.connect(gain); インスタンス化 gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 202. <!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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 203. <!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); ゲイン(音量調整)に20%を指定 source.connect(delay); delay.connect(gain); ディレイ(遅延)に0.2秒を指定 gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 204. <!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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 205. <!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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 206. <!DOCTYPE html> <script> var context= new AudioContext(); var gain = context.createGainNode(); メディアストリームから var delay = context.createDelayNode(); gain.gain.value = 0.2; Web Audio APIのオブジェクトを作成 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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 207. <!DOCTYPE html> <script> 第一のルート var context= new AudioContext(); var gain = context.createGainNode(); source(インプット)を var delay = context.createDelayNode(); gain.gain.value = 0.2; destination(アウトプット)に接続 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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 208. <!DOCTYPE html> <script> 第二のルート var context= new AudioContext(); var gain = context.createGainNode(); source・ディレイ・ゲイン・ var delay = context.createDelayNode(); gain.gain.value = 0.2; destinationの順に接続 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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 209. <!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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 210. <!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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 211. Web Audo APIまとめ ノードを接続し処理を行なう 多数のinput/output 音声データの編集ができる JavaScriptで直接編集も可能 3D空間にも対応
- 212.
- 213.
- 214.
- 215.
- 216.
- 217.
- 218.
- 219.
- 220.
- 221. <!DOCTYPE html> <div id="disp"></div> <scriptsrc="three.min.js"></script> <script> // next slide... </script> 表示と three.jsの読み込みと Script要素 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
- 222. 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);
- 223. 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);
- 224. 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}); 描画領域をDOMに追加 var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera);
- 225. 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);
- 226. 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);
- 227. 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);
- 228. 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);
- 229. 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);
- 230. 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(); シーンに追加= new THREE.Vector3(0, 0, 8); camera.position 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);
- 231. 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);
- 232. 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);
- 233.
- 234.
- 235.
- 236.
- 237.
- 238.
- 239.
- 240.
- 241. WebSocket WebRTC getUserMedia An AR Game https://developer.mozilla.org/ja/demos/detail/an-ar-game/launch Real-timeCommunication Between Browsers Video Chat with getUserMedia https://apprtc.appspot.com/ Web Audio API Pitch Detector with getUserMedia http://webaudiodemos.appspot.com/pitchdetect/index.html WebGL 3D Interactive Asteroid Space Visualization - Asterank http://www.asterank.com/3d/ +360º - Car Visualizer - Three.js http://carvisualizer.plus360degrees.com/threejs/ Aquarium http://webglsamples.googlecode.com/hg/aquarium/aquarium.html Water/Ocean http://oos.moxiecode.com/js_webgl/water_noise/ Epic Citadel http://www.unrealengine.com/html5/ Combination Chrome World Wide Maze for Machine http://chrome.com/maze/ for Android http://g.co/maze Cube Slam https://www.cubeslam.com/