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); };
Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 弊社への連絡
までお願いします。