![サーバサイドコード例
Copyright©2013 Yuuichi Akagawa 11
var express = require('express')
, app = express()
, path = require('path')
, http = require('http')
, server = http.createServer(app)
, io = require('socket.io').listen(server);
// Configuration
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
app.disabled('view cache');
});
app.configure('production', function(){
app.use(express.errorHandler());
io.set('log level', 1);
});
// Routes
app.get('/controlv', function(req, res) {
res.render('controlv', {title:'Socket.IO Control'});
});
app.get('/tankv', function(req, res) {
res.render('tankv', {title:'HTML5 Delonkun'});
});
// Socket.IO
var sockets = {};
// broadcast function
function broadcast(method,message) {
for (var n in sockets) {
sockets[n].emit(method,message);
}
}
io
.of('/in')
.on('connection', function(socket) {
sockets[socket.id] = socket;
socket.on('control.add', function(data) {
data.time = Date.now();
broadcast('control.add', data);
});
socket.on('control.video', function(data) {
broadcast('control.video', data);
});
socket.on('disconnect', function() {
delete sockets[socket.id];
});
});
server.listen(8009);
app.js
これだけでWebサーバとして動作する。
ここがサーバ
実装部分
・コネクション受付
・データ受信
・データ配信
全部やってる。](https://image.slidesharecdn.com/javascript-130528074038-phpapp02/85/JavaScript-11-320.jpg)
![chrome.serial
Copyright©2013 Yuuichi Akagawa 24
• manifest.jsonでパーミッションを与える
• こんな感じで動く
"permissions": ["serial"],](https://image.slidesharecdn.com/javascript-130528074038-phpapp02/85/JavaScript-24-320.jpg)
JavaScriptでいいじゃなイカ
- 1. JavaScriptでいいじゃなイカ 『Webアプリによるフィジカルコンピューティング』 ADK BOOTCAMP #3 ASAKUSA 2013/5/26 Yuuichi Akagawa JavaScriptでいいじゃなイカ Webアプリによるフィジカルコンピューティング
- 2. 自己紹介 • Yuuichi Akagawa (あかがわ ゆういち) • USBホストネタ大好き • 本業は某SI企業でインフラ担当 • 電子工作やプログラミングは趣味での活動 • 仕組みを知ることが好きなので、最終的な作品に 至ることがほとんど無い Copyright©2013 Yuuichi Akagawa 2
- 3. 気分転換に Copyright©2013 Yuuichi Akagawa 3 • たまにはADK/USB以外のネタでも • がじぇるねでマイコンはおなかいっぱいだし • Androidアプリ書く気力も無いし • コンパイルしたりデバイスに転送したりは面倒だし • 気晴らしにNode.jsで遊んでみたら意外と面白かった • HTML5 + JavaScriptだけでも結構イケる ※Titanium MobileとかPhoneGapの話ではないでゲソ
- 4. Copyright©2013 Yuuichi Akagawa 4 WebSocketドロンくん ドロンくんとは 今岡通博氏考案の Android端末による 音声認識ロボット。 http://www.ospn.jp/press/20110516no10-useit-oss.html DTMFによる制御や、 ブレッドボードで回路を 実装するというお手軽構成。 音声認識の代わりに WebSocket経由でコントロール できるようにしてみた。
- 5. WebSocketドロンくん Copyright©2013 Yuuichi Akagawa 5 • Node.js + Socket.IOを利用した遠隔制御の実験 • Webアプリでフィジカルコンピューティングという提案 • みんなBluetoothでやってるからちょっと斜めで • 実用性よりも「ネタ」を重視で(レイテンシー大なの) • WebRTCの実装が進み、JavaScriptでカメラの画像も 取得できちゃう • しかもマイコンいらない
- 8. Copyright©2013 Yuuichi Akagawa 8 コマンド送信 HTML5 ready Web Browser (スマホのブラウザでもOK) Socket.IO module さくらのVPS コマンド配信 DTMF WebSocketを利用したJavaScriptによる遠隔制御 DTMFデコーダ + モータードライバ DTMF_0.ogg . . . DTMF_#.ogg Chrome for Android DTMF音声ファイルは キャッシュマニフェストを 利用してローカルに保存 キャプチャ画像 送信 キャプチャ画像 配信 WebRTCを利用して 内蔵カメラからの 映像を取得する 急激な円安進行により、 AWSが割高になったので さくらのVPSに引っ越し コマンドに 対応した 音声ファイル を再生
- 9. Chromeβ for Androidに実装してみた • 映像取得処理 getUserMedia()でカメラと接続 カメラからの映像をCanvasに描画 CanvasのデータをtoDataURL（）でエンコード 上記で取得したデータをそのままWebSocketで送出 • 音声再生 音声ファイルは初回アクセス時にローカル保存 コマンドに応じて、Audioのsrcにパスを設定 autoplay非対応なので、最初だけ再生ボタンを押す 必要あり Copyright©2013 Yuuichi Akagawa 9
- 10. Chromeβ for Androidに実装してみた • こんな感じ Copyright©2013 Yuuichi Akagawa 10 スマホのカメラの映像が ここに表示されている
- 11. サーバサイドコード例 Copyright©2013 Yuuichi Akagawa 11 var express = require('express') , app = express() , path = require('path') , http = require('http') , server = http.createServer(app) , io = require('socket.io').listen(server); // Configuration app.configure(function(){ app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); app.use(express.favicon()); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(path.join(__dirname, 'public'))); app.disabled('view cache'); }); app.configure('production', function(){ app.use(express.errorHandler()); io.set('log level', 1); }); // Routes app.get('/controlv', function(req, res) { res.render('controlv', {title:'Socket.IO Control'}); }); app.get('/tankv', function(req, res) { res.render('tankv', {title:'HTML5 Delonkun'}); }); // Socket.IO var sockets = {}; // broadcast function function broadcast(method,message) { for (var n in sockets) { sockets[n].emit(method,message); } } io .of('/in') .on('connection', function(socket) { sockets[socket.id] = socket; socket.on('control.add', function(data) { data.time = Date.now(); broadcast('control.add', data); }); socket.on('control.video', function(data) { broadcast('control.video', data); }); socket.on('disconnect', function() { delete sockets[socket.id]; }); }); server.listen(8009); app.js これだけでWebサーバとして動作する。 ここがサーバ 実装部分 ・コネクション受付 ・データ受信 ・データ配信 全部やってる。
- 12. 操作画面ページコード例 Copyright©2013 Yuuichi Akagawa 12 socket.on('control.video', function(data) { var img = document.getElementById('camera_image1'); img.src = data.video; }); div img#camera_image1(src='') 画像表示周り抜粋
- 13. 制御用ページコード例 Copyright©2013 Yuuichi Akagawa 13 div video#camera(width='160', height='120', autoplay) canvas#camera_canvas(style='display:none;', width='160', height='120') 映像配信部分抜粋 $(function(){ navigator.getMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia ); var video = document.getElementById('camera'); var canvas = document.getElementById('camera_canvas'); var ctx = canvas.getContext('2d'); var image1 = document.getElementById('camera_image1'); navigator.getMedia ({ video:true, audio:false }, function(stream) { video.src = window.URL.createObjectURL(stream); }, function(err){console.log(err);}); setInterval(function(){ if(navigator.getMedia){ var canvas_image = ctx.drawImage(video,0,0,160,120); canvas_image = ctx.getImageData(0, 0, 160, 120); ctx.putImageData(canvas_image, 0, 0); var dataURL = canvas.toDataURL("image/octet-stream"); socket.emit('control.video', {video:dataURL}); }, 500);
- 15. マイコンと一緒 Copyright©2013 Yuuichi Akagawa 15 • DTMFだけでは限界が… • やっぱりマイコンも使おう • 接続方法はお手軽なUARTで決まり！ （無線化はXBeeで) • マイコンでTCP/IPとか扱うの面倒でしょ。そういうのは 汎用OSにお願いしよう。
- 16. Raspberry PiでNode.js Copyright©2013 Yuuichi Akagawa 16 • Linuxだから当たり前の様に動く • だけど、非力なのでビルドに時間かかる • インストールは以下の手順で $ git clone git://github.com/creationix/nvm.git ~/.nvm $ . ~/.nvm/nvm.sh $ nvm install v0.8.23 $ echo '. ~/.nvm/nvm.sh' >> ~/.bashrc $ echo 'nvm use v0.8.23' >> ~/.bashrc
- 17. node serialport Copyright©2013 Yuuichi Akagawa 17 • Node.jsでシリアルポートが使える https://github.com/voodootikigod/node-serialport • インストールはnpmで • これだとちょっとプリミティブすぎるので… $ npm install serialport
- 18. node firmata Copyright©2013 Yuuichi Akagawa 18 • Firmataが使えるよ https://github.com/jgautier/firmata • こちらもnpmでインストール可能 $ npm install firmata var ledPin = 5; var firmata = require('firmata'); var board = new firmata.Board('/dev/ttyUSB0', function(err) { if (err) { console.log(err); return; } var ledOn = true; board.pinMode(ledPin, board.MODES.OUTPUT); setInterval(function(){ if (ledOn) { board.digitalWrite(ledPin, board.HIGH); } else { board.digitalWrite(ledPin, board.LOW); } ledOn = !ledOn; },500); }); スタンドアローンなLチカ
- 19. RPi + Arduino Copyright©2013 Yuuichi Akagawa 19 • Raspberry PiにArduino繋げてFirmataで制御 (スクリプトは前ページのもの)
- 20. Cloud9 IDE Copyright©2013 Yuuichi Akagawa 20 • Node.jsに対応したJavaScript統合開発環境 https://c9.io/ https://github.com/ajaxorg/cloud9 • BeagleBoneは標準装備
- 21. PCでもNode.js Copyright©2013 Yuuichi Akagawa 21 • わざわざワンボードPC買わなくても、手元のPCで Node.jsを動作させれば良い • 公式サイトでWindowsやMac OS X用のバイナリを 配布してる • でもWindowsは(ry
- 23. chrome.serial Copyright©2013 Yuuichi Akagawa 23 • Google Chrome Appでシリアルポートが使える
- 24. chrome.serial Copyright©2013 Yuuichi Akagawa 24 • manifest.jsonでパーミッションを与える • こんな感じで動く "permissions": ["serial"],
- 25. chrome.usb Copyright©2013 Yuuichi Akagawa 25 • USBホストも使える(ADKは作らないよ)
- 26. chrome.bluetooth Copyright©2013 Yuuichi Akagawa 26 • Bluetoothも使えるようになるらしい