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使えない場合が多いので、他の方法も探しておいたほうが良さそう。
関連記事
-
-
画像の登録フォームにてjQueryプラグイン(piCEdit)を用いてWebカメラの映像を撮影させる方法
form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...
-
-
八地方区分→都道府県→路線→駅名の連携したセレクトメニュー の実装方法
八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...
-
-
jQueryで画像(
タグ内)のsrc情報を取得する場合
すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...
-
-
Lightboxで画像拡大時に文字タイトルとリンクをつける
lightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ...
-
-
さくらのレンタルサーバでCookieが正常に保存できない場合の対応方法
さくらインターネットのレンタルサーバでjquery.cookie.jsを用いてC ...