超小型Wi-Fiカメラ CS-W07G-CY
—-
「CS-W07G-CY
WEBブラウザでネットワークカメラのURLを指定するだけでリアルタイムでのモニタリングが可能です。
iPhone/Androidアプリを使用することでインターネットを介さずに撮影している映像を簡単に閲覧することもできます。
—-
画像映像の取得方法
静止画取得
http://192.168.2.1/?action=snapshot
映像画取得(MotionJPEG)
http://192.168.2.1/?action=stream
※画像のサイズ指定のパラメータは不明。
HTMLにMotionJPEGを表示する方法
iOSの Mobile Safari や UIWebVew ならimgタグでMotionJPEGを表示することができる。
<img src="http://192.168.2.1/?action=stream">
HTML5のCanvasへのMotionJPEGの表示
JavaScript で Image オブジェくを作りタイマーでcanvasに画像を１コマづつ描画
ソースコード(iOSでの動作確認済み)
Canvas上でグレースケール変換の処理を入れてみたけど処理に時間がかかりすぎてコマ落ち。
var Page = function(config){
this._config = config;
this._img_camera;
this.init = function(){
//MotionJPEGを読み込む
this._img_camera = new Image();
this._img_camera.onload = $.proxy(this.onLoadCameraImg,this);
this._img_camera.src = "http://192.168.2.1/?action=stream";
};
//MotionJPEGのロードが完了
this.onLoadCameraImg = function(){
//描画タイマー開始
$.timer(this._config.draw_msec,$.proxy(this.draw,this));
};
//描画
this.draw = function(t){
var canvas = $("#img_camera_canvas")[0];
var ctx = canvas.getContext("2d");
ctx.drawImage(this._img_camera,0,0);
};
};
var page = new Page(new Config());
$(document).ready(function() {
page.init();
});
参考サイト
電池で動くWi-FiカメラCS-W07G-CY（やっと）到着[花岡ちゃんに花束を]
)が非常に役に立ちました。MTのプラグインを開発者する方は持っておくといい本だと思います。
にのっていたiPhoneの常駐しているSafaliを退去するコードを試してみました。