FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード
2024/01/13
FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画像をフォーム等でアップロードする方法のメモ。jQuery webcam pluginというのがswfも同梱されてて非常に便利だった。
jQuery webcam plugin
http://www.xarg.org/project/jquery-webcam-plugin/
使い方
撮影ページ
<?php $id = md5(uniqid(rand(), true)); ?> <!DOCTYPE html> <html> <head> </head> <body> <div id="jquery_camera"></div> <button id="btn">キャプチャ</button> </div> <?php if($_GET['id']){ ?> <img src="<?php echo $_GET['id']?>.jpg"> <?php } ?> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="./jquery.webcam.min.js"></script> <script type="text/javascript"> $(function(){ var width = 320; var height = 240; $("#jquery_camera").webcam({ width: width, height: height, mode: "save", swffile: "./jscam.swf", onTick: function() {}, onSave : function () { window.location = "./index.php?id=<?php echo $id;?>"; }, // Capture時に呼び出される onCapture: function() { webcam.save('./upload.php?id=<?php echo $id;?>'); }, debug: function() {}, onLoad: function() { $("#btn").click(function(){ webcam.capture(); }); } }); }) </script> </body> </html>
保存ページ
<?php $name = $_REQUEST['id']; $str = file_get_contents("php://input"); file_put_contents("/hoge/webcam/{$name}.jpg", pack("H*", $str)); ?>
その他
これならIEでも撮影できる。ただスマホだとflash使えない場合が多いので、他の方法も探しておいたほうが良さそう。
関連記事
-
-
日付の範囲指定用プラグイン「DateRangePicker」の利用方法
日付型のデータを検索する際に開始・終了日のテキストボックスを用意し、それぞれにタ ...
-
-
jQueryで対象の要素をまとめて親要素で囲む方法
あるシステムで出力されているHTMLタグを指定した親要素で囲みたいというケースが ...
-
-
サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法
画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...
-
-
IE11でフォーム送信時に二重登録される
Internet Explorer11でform送信時にデータが二重登録されると ...
-
-
pjaxについてのメモ
ずっと気になっていたpjaxについてのメモ。 ■参考サイト http://chi ...