超小型Wi-Fiカメラ CS-W07G-CY (iOS / Android)

超小型Wi-Fiカメラ CS-W07G-CYを買ったので色々調べたのでメモ。

—-
CS-W07G-CY」は、持ち運びに便利なバッテリ駆動型の世界最小クラス超小型Wi-Fiカメラです。
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に画像を1コマづつ描画
ソースコード(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(やっと)到着[花岡ちゃんに花束を]


コメントを残す

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