サンプル 定期撮影カメラ - ソースコード

説明

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

　このページでは、この「crocro.jscam」のサンプルである「サンプル 定期撮影カメラ」のソースコードを掲載します。

ソースコード

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

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4.     <title>「crocro.jscam」 - サンプル 定期撮影カメラ - クロノス・クラウン</title>
  5.     <script
  6.         type="text/javascript"
  7.         src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
  8.     ></script>
  9.     <script type="text/javascript" src="jscam.js"></script>
  10.     <script language="javascript">
  11.         // 変数
  12.         var cap;
  13.         var flgStop = false;
  14.  
  15.         // 起動時処理
  16.         $(document).ready(function() {
  17.             // JSカメラ初期化
  18.             crocro.jscam.initSwfCam();
  19.             cap = crocro.jscam.makeCaptureObject("cnvsCap");
  20.  
  21.             // コールバックの設定
  22.             cap.setBackDataType(["pixelRaw"]);
  23.             crocro.jscam.ready(function() { // 準備ができたら開始
  24.                 getImg();   // 画像出力
  25.             });
  26.         });
  27.  
  28.         // 画像取得
  29.         function getImg() {
  30.             cap.capture(function() {
  31.                 var dId = "img" + new Date().getTime();
  32.                 $("#output").append($("<img>").attr("id", dId));
  33.                 cap.outputImage(dId, "");
  34.             });
  35.  
  36.             if (! flgStop) setTimeout(getImg, 3000);
  37.         }
  38.  
  39.         // 画像削除
  40.         function delImg() {
  41.             $("#output").empty();
  42.         }
  43.  
  44.         // 停止
  45.         function stop() {
  46.             flgStop = true;
  47.         }
  48.     </script>
  49. </head>
  50. <body bgcolor="#ffffff">
  51.  
  52.     <div class="boxOut">
  53.         <div style="float: left;">
  54.             <script language="javascript">
  55.                 crocro.jscam.write();
  56.             </script>
  57.         </div>
  58.         <div style="float: left; margin-left: 2em;">
  59.             <canvas id="cnvsCap" width="320" height="240"></canvas>
  60.         </div>
  61.         <div style="clear: both;"></div>
  62.         <input type="button" onClick="delImg()" value="画像削除">
  63.         <input type="button" onClick="stop()" value="停止">
  64.         <br>
  65.         <div id="output"></div>
  66.     </div>
  67.  
  68. </body>
  69. </html>
Cronus Crown（クロノス・クラウン）のトップページに戻る
(c)2002-2025 Cronus Crown　(c)1997-2025 Masakazu Yanai
ご意見・お問い合わせはサイト情報 弊社への連絡までお願いします
個人情報の取り扱い、利用者情報の外部送信について