サンプル基本 - ソースコード

説明

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

　このページでは、この「crocro.jscam」のサンプルである「サンプル基本」のソースコードを掲載します。

動作を確認する：サンプル基本

ソースコード

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

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>「crocro.jscam」 - サンプル 基本 - クロノス・クラウン</title>
    <script
        type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
    ></script>
    <script type="text/javascript" src="jscam.js"></script>
    <script language="javascript">
        // 変数
        var cap;

        // 起動時処理
        $(document).ready(function() {
            // JSカメラ初期化
            crocro.jscam.initSwfCam();
            cap = crocro.jscam.makeCaptureObject("cnvsCap");

            // コールバックの設定
            cap.setBackDataType(["pixelSwf", "pixelRaw", "pixelBin",
                "labelData", "label2dArr", "dotsData", "markerData"]);

            cap.setExtrFnc(function(resObj){    // 各戻り値ごとの処理
                var resArr = [];
                if ("pixelSwf" in resObj) {
                    resArr.push("pixelSwf : " + resObj.pixelSwf.length);
                }
                if ("pixelRaw" in resObj) {
                    resArr.push("pixelRaw : " + resObj.pixelRaw.length);
                }
                if ("pixelBin" in resObj) {
                    resArr.push("pixelBin : " + resObj.pixelBin.length);
                }
                if ("label2dArr" in resObj) {
                    resArr.push();
                    resArr.push("<hr>label2dArr : " + resObj.label2dArr.length
                        + " (16ドットずつスキップさせてラベルを表示)");
                    var miniMtrxArr = [];
                    for (var y = 0; y < cap.h; y += 16) {
                        var miniMtrx = "";
                        for (var x = 0; x < cap.w; x += 16) {
                            var p = y * cap.w + x;
                            var i = resObj.label2dArr[p];
                            miniMtrx += (i < 10 ? "0" : "") + i + " ";
                        }
                        miniMtrxArr.push(miniMtrx);
                    }
                    resArr.push(miniMtrxArr.join("<br>"));
                }
                if ("labelData" in resObj) {
                    var ld = resObj.labelData;
                    resArr.push("<hr>labelData.length : " + ld.length);
                    for (var i = 0; i < ld.length; i ++) {
                        var s = "";
                        $.each(ld[i], function(k, v) {s += k + ":" + v + ", "});
                        resArr.push("labelData[" + i + "] : " + s);
                    }
                }
                if ("dotsData" in resObj) {
                    var s = "";
                    var dd = resObj.dotsData;
                    $.each(dd, function(k, v) {s += k + ":" + v + ", "});
                    s += "<br>"
                    s += "lt(" + dd.ltX + ", " + dd.ltY + ") / "
                        + "rt(" + dd.rtX + ", " + dd.rtY + ")<br>";
                    s += "lb(" + dd.lbX + ", " + dd.lbY + ") / "
                        + "rb(" + dd.rbX + ", " + dd.rbY + ")";
                    resArr.push("<hr>dotsData : " + s);
                }
                if ("markerData" in resObj) {
                    var s = "";
                    var md = resObj.markerData;
                    $.each(md, function(k, v) {s += k + ":" + v + ", "});
                    s += "<br>"
                    s += "lt(" + md.ltX + ", " + md.ltY + ") / "
                        + "rt(" + md.rtX + ", " + md.rtY + ")<br>";
                    s += "lb(" + md.lbX + ", " + md.lbY + ") / "
                        + "rb(" + md.rbX + ", " + md.rbY + ")";
                    resArr.push("<hr>markerData : " + s);
                }
                $("#resData").html(resArr.join("<br>"));
            })

            // 検出
            cap.detect(function() {
                alert("最初の検出！");
            });

            // ドット・パターンの設定
            viewDots();

            // マーカーの設定
            viewMarker();
        });

        // キャプチャ
        function captureImg() {
            cap.capture();      // キャプチャ
        }

        // 画像出力
        function outputImg() {
            cap.capture(function() {
                var dId = "img" + new Date().getTime();
                $("#output").append($("<img>").attr("id", dId));
                cap.outputImage(dId, "");
            });
        }

        // 画像削除
        function delImg() {
            $("#output").empty();
        }

        // 種類切り替え
        function swicthTyp() {
            var val = $("input:radio[@name='swtchTyp']:checked").val();
            var fltr = [];

            if (val == "onlyDots") {
                fltr.push(
                    "bin", "label"
                    ,"detectDots", "drawDots", "drawClipDots"
                    ,"hidePaint");
                crocro.jscam.setFilter(fltr);
                return;
            }
            if (val == "onlyMrkr") {
                fltr.push(
                    "bin", "label"
                    ,"detectMarker", "drawMarker", "drawClipMarker"
                    ,"hidePaint");
                crocro.jscam.setFilter(fltr);
                return;
            }

            if (val.indexOf("bin") >= 0) fltr.push("bin");
            if (val.indexOf("lbl") >= 0) fltr.push("label");
            if (val.indexOf("prm") >= 0) fltr.push("drawLabel");
            if (val.indexOf("dotPtrn") >= 0) {
                fltr.push("detectDots", "drawDots", "drawClipDots");
            }
            if (val.indexOf("mrkr") >= 0) {
                fltr.push("detectMarker", "drawMarker", "drawClipMarker");
            }
            if (val == "onlyPrm") fltr.push("hidePaint", "bin", "label", "drawLabel");
            if (val != "onlyPrm") fltr.push("showPaint");
            if (val.indexOf("hidePaint") >= 0) fltr.push("hidePaint");

            crocro.jscam.setFilter(fltr);
        }

        // ラベル・カットオフ設定
        function chngLblRng() {
            // マーカーの作成
            crocro.jscam.setsetLabelCutOff($("#lblMin").val(), $("#lblMax").val());
        }

        // ドット・パターン設定
        var dotsArr = crocro.jscam.util.swapXY(4, 4, [
            [1,1,0,1],
            [1,0,0,1],
            [0,0,0,1],
            [1,1,1,1]
        ]);

        // ドットパターン表示
        function viewDots() {
            // ドットパターンの作成
            crocro.jscam.util.makeDots("dots", dotsArr, 50, true,
                function(x, y, prm){
                    dotsArr[x][y] = prm;
                    crocro.jscam.setDots(dotsArr);
                }
            );
        }

        // マーカー設定
        var mrkrArr = crocro.jscam.util.swapXY(16, 16, [
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            [1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1],
            [1,1,1,0,1,1,1,0,0,0,0,0,0,1,1,1],
            [1,1,1,0,1,1,1,0,0,0,0,0,0,1,1,1],
            [1,1,1,0,1,1,1,0,0,0,0,0,0,1,1,1],
            [1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1],
            [1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1],
            [1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1],
            [1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1],
            [1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1],
            [1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1],
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
        ]);

        // マーカー表示
        function viewMarker() {
            // マーカーの作成
            crocro.jscam.util.makeMarker("marker", mrkrArr, 13, true,
                function(x, y, prm){
                    mrkrArr[x][y] = prm;
                    crocro.jscam.setMarker(mrkrArr);
                }
            );
        }

        // マーカー一致閾値の変更
        function chngMtchThrshld() {
            // マーカーの作成
            crocro.jscam.setMarkerMatchThreshold($("#setMtchThrshld").val());
        }
    </script>
</head>
<body bgcolor="#ffffff">

    <div id="jscamAS" class="boxOut">
        <table border=0><tr><td valign="top">
            <script language="javascript">
                crocro.jscam.write();
            </script>
        </td><td valign="top" style="padding-left: 32px;">
            ●ドットパターン形式<br>
            <br>
            <div id="dots"></div>
        </td><td valign="top" style="padding-left: 32px;">
            ●マーカー形式<br>
            <br>
            <div id="marker"></div>
        </td></tr></table>
    </div>
    <div id="cntrl" style="line-height: 170%;" class="boxOut">
        <br>
        <input type="radio" value="non" name="swtchTyp" id="swtchTypNon" checked
            onClick="swicthTyp()"><label for="swtchTypNon">なし</label>
        <input type="radio" value="bin" name="swtchTyp" id="swtchTypBin"
            onClick="swicthTyp()"><label for="swtchTypBin">2値化</label>
        <input type="radio" value="bin+lbl" name="swtchTyp" id="swtchTypBinLbl"
            onClick="swicthTyp()"><label for="swtchTypBinLbl">2値化+ラベリング</label>
        <input type="radio" value="bin+lbl+prm" name="swtchTyp" id="swtchTypBinLblPrm"
            onClick="swicthTyp()"><label for="swtchTypBinLblPrm">2値化+ラベリング+情報</label>
        <input type="radio" value="onlyPrm" name="swtchTyp" id="swtchTypOnlyPrm"
            onClick="swicthTyp()"><label for="swtchTypOnlyPrm">情報のみ</label>
        <br>


        <span style="font-weight: bold;">ラベル認識範囲</span>　：　
        <input type="text" value="10" style="width: 3em;" id="lblMin">
        ～
        <input type="text" value="57600" style="width: 3em;" id="lblMax">
        ドット
        <input type="button" onClick="chngLblRng()" value="範囲変更">
        （57600は縦×横×3/4、縦×横は76800）
        <br>


        <span style="font-weight: bold;">ドットパターン検出</span>　：　
        <input type="radio" value="bin+lbl+dotPtrn+prm" name="swtchTyp" id="swtchTypBinLblDotPtrnPrm"
            onClick="swicthTyp()"><label for="swtchTypBinLblDotPtrnPrm">デバッグ表示</label>
        <input type="radio" value="onlyDots" name="swtchTyp" id="swtchTypDotPtrnPrm"
            onClick="swicthTyp()"><label for="swtchTypDotPtrnPrm">ドットパターンのみ</label>
        <br>


        <span style="font-weight: bold;">マーカー検出</span>　：　
        <input type="radio" value="bin+lbl+mrkr+prm" name="swtchTyp" id="swtchTypBinLblMrkrPrm"
            onClick="swicthTyp()"><label for="swtchTypBinLblMrkrPrm">デバッグ表示</label>
        <input type="radio" value="onlyMrkr" name="swtchTyp" id="swtchTypMrkrPrm"
            onClick="swicthTyp()"><label for="swtchTypMrkrPrm">マーカーのみ</label>
        　
        <input type="text" value="80" style="width: 3em;" id="setMtchThrshld">
        %以上一致で検出
        <input type="button" onClick="chngMtchThrshld()" value="閾値変更">


        <hr>
        <input type="button" onClick="captureImg()" value="1回ずつ描画">
        <input type="button" onClick="outputImg()" value="画像出力">
        <input type="button" onClick="delImg()" value="画像削除">
        <hr>
    <div id="jscamJS" style="">
        <table border=0><tr><td valign="top">
            <canvas id="cnvsCap" width="320" height="240"></canvas>
        </td><td valign="top">
            <div id="resData" style="height: 240px; overflow-y: scroll;"></div>
        </td></tr></table>
    </div>
    <div id="output"></div>
    <div id="dbg"></div>

</body>
</html>