WebRTCで複数台監視可能なカメラをつくる

WebRTC
WebRTCはブラウザからカメラやマイクを使える楽しいAPIです。というわけで、WebRTC+Canvas+WebSocket+node.jsと豪華な最新ラインナップで監視カメラを作りましょう。
サーバには、node.jsをインストールします。
npm install wsでwsパッケージもいれておきます。
そして、以下のコードを書きます。

var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var slot = [];
var maxid = 0;
wss.on('connection', function(ws) {
var id = maxid;
console.log('connection open #%d',id);
ws.on('message', function(data) {
broadcast('DAT',id,data);
});
ws.on('close', function() {
console.log('connection closed #%d',id);
// 接続切れのソケットを配列から除外
slot = slot.filter(function (conn, i) {
return (conn === ws) ? false : true;
});
broadcast('CTL','close',id);
});
slot[id] = ws;
++maxid;
});

function broadcast(type,id,data) {
var buf = '';
slot.forEach(function(socket,i){
buf = type + ' ' + id + ' ';
buf += data;
try {
socket.send(buf);
}
catch (e) {};
});
}

https://github.com/keiya/WebRTC-CCTV/blob/master/server.js

HTMLを書きます。
https://github.com/keiya/WebRTC-CCTV/blob/master/rtc.htm
※jQueryが必要です

まとめてダウンロード
iPadからも当然見れます!
CCTV on iOS

サーバにアクセスし、カメラの動作を許可すれば、データがWebSocketにより送信され、Canvas上のあたらしい表示領域が自動で作られます。
動作するブラウザはChrome、Firefoxで、Windows/OSX/Ubuntuで動作を確認しています。
UVC対応カメラであればどのOSでもデバイスドライバのインストールなしにブラウザに認識されます。

こちらではUbuntu上のChromeで数週間の連続稼働を確認しています。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>