「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カメラを表示したい場所に以下のように書きます。

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

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

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

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

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

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

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

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

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

メソッド 内容
setFilter FlashのWebカメラに処理させる内容。配列で指定。
setBackDataType キャプチャ時にコールバックで取得するデータの種類。配列で指定。
setExtrFnc キャプチャ時にコールバックでデータを受け取るためのfunctionオブジェクト。 
  1.     var cap;
  2.     $(document).ready(function() {
  3.         // JSカメラ初期化
  4.         crocro.jscam.initSwfCam();
  5.         crocro.jscam.setFilter(["bin", "label", "hidePaint"]);
  6.         cap = crocro.jscam.makeCaptureObject("cnvsCap");
  7.  
  8.         // コールバックの設定
  9.         cap.setBackDataType(["pixelSwf", "labelData"]);
  10.         cap.setExtrFnc(function(resObj){    // 各戻り値ごとの処理
  11.             var resArr = [];
  12.             if ("labelData" in resObj) {
  13.                 var ld = resObj.labelData;
  14.                 resArr.push("labelData.length : " + ld.length);
  15.                 for (var i = 0; i < ld.length; i ++) {
  16.                     var s = "";
  17.                     $.each(ld[i], function(k, v) {s += k + ":" + v + ", "});
  18.                     resArr.push("labelData[" + i + "] : " + s);
  19.                 }
  20.             }
  21.             $("#resData").html(resArr.join("<br>"));
  22.         })
  23.     });
  24.  
  25.     // キャプチャ
  26.     function captureImg() {
  27.         cap.capture();      // キャプチャ
  28.     }

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

ファイル構成を変える

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

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

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

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