「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-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 弊社への連絡
までお願いします。