「crocro.jscam」の導入の仕方

　「crocro.jscam」をWebページに組み込む方法を解説します。

　注意点があります。WebカメラやHTML5のセキュリティの問題から、サーバー上でしか動作いたしません。ローカルでは実行することができません。

　そのためまずは、サンプルをローカルで強制的に実行する方法を解説します。

ローカルで実行する方法

　ローカルでサーバーを起動する際は、山本祐次様が、MITライセンスで公開している「HTTP Server Anywhere」が便利です。

　配布ページには「1.0.1」と「1.0.0」があるので、「1.0.1」を使うのがよいでしょう。

　「HTTP Server Anywhere」をダウンロードしたら、ZIPフォルダ内にある「server.jar」をサンプルフォルダに入れてください。

　Java実行環境がある場合は、「server.jar」をダブルクリックすることでサーバーが起動します。

「http://127.0.0.1/index.html」を開くと、同じフォルダの「index.html」が、サーバー上のセキュリティで閲覧できます。

自分のWebページで利用する際

　以下のようなファイル構成にします（ファイル構成の変更法は後述）。

  • target.html - （導入したいHTMLページ）
  • jscam.js
  • jscam.swf

　まずは、「body」タグ内の、Webカメラを表示したい場所に以下のように書きます。

    <script language="javascript">
        crocro.jscam.write();
    </script>

　また、キャプチャした画像をHTML5のCanvasに取得するので、「canvas」タグもid付きで書いておきます。

　さらにここでは、コールバックで取得したデータを書き出す場所（resData）を「div」タグで用意しています。

    <input type="button" onClick="captureImg()" value="キャプチャ">
    <br>
    <canvas id="cnvsCap" width="320" height="240"></canvas>
    <div id="resData"></div>

　次に、ヘッダー内に「jscam.js」を読み込むためのタグを書きます。

    <script type="text/javascript" src="jscam.js"></script>

　最後にカメラの初期化です。こちらは、ヘッダー内の「script」タグ内に書いてください。ここではjQueryを使用した例です。

　ボタンをクリックすると、キャプチャが行われます。

　また、以下のようなデータや処理を設定しています。詳しい使い方は、サンプルやリファレンスをご覧ください。

メソッド 内容
setFilter FlashのWebカメラに処理させる内容。配列で指定。
setBackDataType キャプチャ時にコールバックで取得するデータの種類。配列で指定。
setExtrFnc キャプチャ時にコールバックでデータを受け取るためのfunctionオブジェクト。 
    var cap;
    $(document).ready(function() {
        // JSカメラ初期化
        crocro.jscam.initSwfCam();
        crocro.jscam.setFilter(["bin", "label", "hidePaint"]);
        cap = crocro.jscam.makeCaptureObject("cnvsCap");

        // コールバックの設定
        cap.setBackDataType(["pixelSwf", "labelData"]);
        cap.setExtrFnc(function(resObj){    // 各戻り値ごとの処理
            var resArr = [];
            if ("labelData" in resObj) {
                var ld = resObj.labelData;
                resArr.push("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);
                }
            }
            $("#resData").html(resArr.join("<br>"));
        })
    });

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

　完全なソースコードは、サンプル シンプルをご覧ください。

ファイル構成を変える

　以下のようなファイル構成にしたいとします。

  • target.html - （導入したいHTMLページ）
  • js_lib/jscam.js
  • js_lib/jscam.swf

　この場合は、設定を以下のように変更します。

    <script type="text/javascript" src="js_lib/jscam.js"></script>

    <script language="javascript">
        crocro.jscam.write({dir: "js_lib/"});
    </script>
Cronus Crown（クロノス・クラウン）のトップページに戻る
(c)2002-2024 Cronus Crown　(c)1997-2024 Masakazu Yanai
ご意見・お問い合わせはサイト情報 弊社への連絡までお願いします
個人情報の取り扱い、利用者情報の外部送信について