勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード

   2024/01/13  jQuery

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

  関連記事

jQueryでHTMLの特定要素をループ時に逆順で処理する方法

jQueryでリスト(li)タグ等の特定要素をeach()でループ処理する場合、 ...

フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法

formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力 ...

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...

タブアンダー広告をjQueryで再現する方法

サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...

CAPTCHAに代わる無料のツール「Cloudflare Turnstile」の導入方法

CAPTCHAと言えばGoogleのreCAPTCHAを思い浮かべるが、稀にCl ...