jscam.jsのソースコード「キャプチャ・オブジェクト」

説明

　「crocro.jscam」は、クロノス・クラウンの柳井政和が開発しているJavaScirptのライブラリです。「crocro.jscam」を使うと、JavaScriptからWebカメラを扱うことができます。また、簡単な図形認識などを行えます。

　このページでは、この「crocro.jscam」のコアになる「jscam.js」（ver 1.1.0）のソースコードのうち、「キャプチャ・オブジェクト」に相当する部分を掲載します。

ソースコード

以下、ソースコードです。

    /**
     *  @variable   crocro.jscam.CaptureObject(id)
     *  @title  キャプチャ・オブジェクト
     *  @description
     *
     *      「crocro.jscam.makeCaptureObject()」で作成します。
     *      Canvasと1対1で対応して、Webカメラのキャプチャ、コールバックなどを行います。
     *
     *  @param  id      canvasのid。
     */
//== キャプチャ・オブジェクト
crocro.jscam.CaptureObject = function(id) {
    /**
     *  @variable   (crocro.jscam.CaptureObject).w
     *  @title  キャプチャ・オブジェクト - 横幅
     *  @description
     *
     *      カメラの横幅（crocro.jscam.option.w）と同じ値です。
     *      指定するキャンバスの横幅は、カメラの横幅（デフォルトは320）と同じ値にしてください。
     */
    /**
     *  @variable   (crocro.jscam.CaptureObject).h
     *  @title  キャプチャ・オブジェクト - 高さ
     *  @description
     *
     *      カメラの高さ（crocro.jscam.option.h）と同じ値です。
     *      指定するキャンバスの高さは、カメラの高さ（デフォルトは240）と同じ値にしてください。
     */
    /**
     *  @variable   (crocro.jscam.CaptureObject).cnvsObj
     *  @title  キャプチャ・オブジェクト - キャンバス・オブジェクト
     *  @description
     *
     *      指定したIDのキャンバスのDOM要素です。
     */
    /**
     *  @variable   (crocro.jscam.CaptureObject).cntxtObj
     *  @title  キャプチャ・オブジェクト - コンテクスト・オブジェクト
     *  @description
     *
     *      指定したIDのキャンバスの、2Dコンテクストです。
     */
    /**
     *  @variable   (crocro.jscam.CaptureObject).cntxtImg
     *  @title  キャプチャ・オブジェクト - イメージ・データ
     *  @description
     *
     *      指定したIDのキャンバスの、2Dコンテクストから、getImageData(0, 0, 横幅, 高さ)したオブジェクトです。
     */
    //== キャンバス用変数の初期化
    this.w = crocro.jscam.option.w;  this.h = crocro.jscam.option.h;  this.c = 4;
    this.cnvsObj = document.getElementById(id);
    this.cntxtObj = this.cnvsObj.getContext("2d");
    this.cntxtImg = this.cntxtObj.getImageData(0, 0, this.w, this.h);
    this.putImg = function(cptr) {      // 画像表示
        var d = this.cntxtImg.data;
        var sz = this.w * this.h;
        var c = this.c;
        for (var i = 0; i < sz; i++) {
            var j = i * c;
            var p = cptr[i];
            d[j    ] = (p >> 16) & 0xFF;
            d[j + 1] = (p >> 8) & 0xFF;
            d[j + 2] = p & 0xFF;
            d[j + 3] = 0xFF;
        }
        this.cntxtObj.putImageData(this.cntxtImg, 0, 0);
    };


    /**
     *  @variable   (crocro.jscam.CaptureObject).setBackDataType(arr)
     *  @title  キャプチャ・オブジェクト - 戻りデータ種類設定
     *  @description
     *
     *      キャプチャ実行時に取得するデータの種類を配列で指定します。
     *      配列の順番は自由です。
     *
     *      データの種類には、以下を指定可能です。
     *      pixelSwf、pixelRaw、pixelBinを指定した場合は、最初に指定した画像がCanvasに描画されます。
     *
     *      <div>pixelSwf - Flash上に描画されている画像の画素配列です。
     *          一次元の配列で、1画素の値は0x000000～0xFFFFFF（RGBが16進数で2桁ずつ）になります。</div>
     *      <div>pixelRaw - Webカメラが取得した画像の画素配列です。
     *          一次元の配列で、1画素の値は0x000000～0xFFFFFF（RGBが16進数で2桁ずつ）になります。</div>
     *      <div>pixelBin - 2値化した画像の画素配列です。事前に2値化がおこなわれている必要があります。
     *          一次元の配列で、1画素の値は0x000000～0xFFFFFF（RGBが16進数で2桁ずつ）になります。</div>
     *      <div>labelData - ラベルの情報が配列で入っています。
     *          各配列はオブジェクトになっており、
     *          tX, tY（上XY）、bX, bY（下XY）、lX, lY（左XY）、rX, rY（右XY）、
     *          cX, cY（中心XY）、cnt（ドット数）といった値が格納されています。</div>
     *      <div>label2dArr - 1画素につき1つの値で画面上のラベルの配置が入っています。
     *          これは一次元の配列です。値が0のマスが地のマスになります。
     *          1以降の値のマスは、その値がラベル番号になっています。</div>
     *      <div>dotsData - ドット・パターンを検出した時の値です。
     *          ltX, ltY（左上XY）rtX, rtY（右上XY）rbX, rbY（右上XY）lbX, lbY（左下XY）、
     *          rtt（判定時に回転させた角度）が入っています。</div>
     *      <div>markerData - マーカーを検出した時の値です。
     *          ltX, ltY（左上XY）rtX, rtY（右上XY）rbX, rbY（右上XY）lbX, lbY（左下XY）、
     *          rtt（判定時に回転させた角度）が入っています。<br>
     *          また、mtchThrshldPer（一致閾値％）、mtchThrshldCnt（一致閾値ドット数）、
     *          mtchCnt（一致数）、mtchMax（一致可能最大数）、mtchPer（一致％）も利用できます。</div>
     *
     *  @param  arr     戻りデータ種類の配列。
     */
    //== 戻りデータ種類設定
    this.backDataTypes = ["pixelSwf"];  // 戻りデータ種類
    this.setBackDataType = function(arr) {
        if (arr instanceof Array) this.backDataTypes = arr;
    }

    //== キャプチャ用変数の初期化
    this.id = id;
    this.callback = "callback" + this.id;
    var my = this;


    /**
     *  @variable   (crocro.jscam.CaptureObject).setExtrFnc(fnc)
     *  @title  キャプチャ・オブジェクト - コールバック終了時の追加処理
     *  @description
     *
     *      キャプチャが終了した際に、常時呼び出されるfunctionオブジェクトを指定します。
     *
     *      指定したfunctionオブジェクトは「function(resObj)」とすることで、
     *      setBackDataTypeで指定したオブジェクトを受け取れます。
     *
     *  @param  fnc     コールバック実行させるfunctionオブジェクト。
     */
    //== コールバック終了時の追加処理
    this.extrFnc = null;
    this.setExtrFnc = function(fnc) {
        this.extrFnc = fnc;
    };

    //== コールバック初期化
    (function() {
        crocro.jscam.CaptureObject[my.callback] = function (arr) {
            // キャンバスへの描画
            for (var i = 0; i < arr.length; i ++) {
                if (typeof arr[i] === "undefined") continue;
                if (arr[i].name == "pixelSwf"
                 || arr[i].name == "pixelRaw"
                 || arr[i].name == "pixelBin"
                ) {
                    my.putImg(arr[i].data);     // 出力
                    break;                      // 1回目のみ描画
                }
            }

            // 戻り値の変換
            var resObj = {};
            for (var i = 0; i < arr.length; i ++) {
                if (typeof arr[i] === "undefined") continue;
                resObj[arr[i].name] = arr[i].data;
            }

            // 追加関数の実行
            if (my.extrFnc)      my.extrFnc(resObj);        // 追加関数
            if (my.onceCallBack) my.onceCallBack(resObj);   // 1回のみのコールバック
            my.onceCallBack = null;
        }
    })()


    /**
     *  @variable   (crocro.jscam.CaptureObject).capture(callBack)
     *  @title  キャプチャ・オブジェクト - コールバック終了時の追加処理
     *  @description
     *
     *      キャプチャを実行します。引数にfunctionオブジェクトを指定した場合は、
     *      一度だけ実行されるコールバック関数になります。
     *      
     *      このfunctionオブジェクトは「function(resObj)」とすることで、
     *      setBackDataTypeで指定したオブジェクトを受け取れます。
     *
     *  @param  callBack        コールバック実行させるfunctionオブジェクト。未指定の場合は無視される。
     */
    //== キャプチャ
    this.onceCallBack = null;
    this.capture = function(callBack) {
        my.onceCallBack = callBack; // コールバックの初期化

        // キャプチャ
        var swfCam = crocro.jscam.swfCam;
        if (! swfCam.enable) return;    // キャプチャ不可
        try {
            if (swfCam.checkEnable()) {
                swfCam.captureCallback( // キャプチャ
                    "crocro.jscam.CaptureObject." + my.callback,
                    my.backDataTypes);
            }
        } catch(e) {}
    };


    /**
     *  @variable   (crocro.jscam.CaptureObject).detect(callBack)
     *  @title  キャプチャ・オブジェクト - 検知
     *  @description
     *
     *      ドットパターンやマーカーを発見すると、コールバックされるようにします。
     *      引数にfunctionオブジェクトを指定した場合は、
     *      一度だけ実行されるコールバック関数になります。
     *
     *      このfunctionオブジェクトは「function(resObj)」とすることで、
     *      setBackDataTypeで指定したオブジェクトを受け取れます。
     *
     *  @param  callBack        コールバック実行させるfunctionオブジェクト。未指定の場合は無視される。
     */
    //== 検知
    this.detect = function(callBack) {
        my.onceCallBack = callBack; // コールバックの初期化

        // 発見
        var swfCam = crocro.jscam.swfCam;
        if (! swfCam.enable) return;    // キャプチャ不可
        try {
            if (swfCam.checkEnable()) {
                swfCam.detectCallback(  // キャプチャ
                    "crocro.jscam.CaptureObject." + my.callback,
                    my.backDataTypes);
                return;
            }
        } catch(e) {}

        // まだ初期化されていない場合は時間を置く（事前に設定する可能性が高い関数なので）
        setTimeout(function(){
            my.detect(callBack);
        }, 200);
    };


    /**
     *  @variable   (crocro.jscam.CaptureObject).outputImage(id, type)
     *  @title  キャプチャ・オブジェクト - 画像の出力
     *  @description
     *
     *      指定したidのDOM要素内に、画像を作成して挿入します。
     *      typeは、pngやjpegなどの、HTML5のcanvasで指定可能な画像形式を指定します。
     *      setBackDataTypeで指定したオブジェクトを受け取れます。
     *
     *  @param  id      画像を出力させるのDOM要素のID。
     *  @param  type    作成する画像の形式。空文字の場合はデフォルトの形式で出力されます。
     */
    //== 画像の出力
    this.outputImage = function(id, type) {
        var imgSrc = this.cnvsObj.toDataURL(type);
        document.getElementById(id).src = imgSrc;
    };
};


    /**
     *  @variable   crocro.jscam.makeCaptureObject(id)
     *  @title  キャプチャー・オブジェクトの作成
     *  @description
     *
     *      指定したidのcanvasに対応したキャプチャー・オブジェクトを作成します。
     *
     *  @param  id      canvasのid。
     *  @return キャプチャー・オブジェクト。
     */
//== キャプチャー・オブジェクトの作成
crocro.jscam.makeCaptureObject = function(id) {
    return new crocro.jscam.CaptureObject(id);
};