jQuery webcam plugin呼叫攝像頭

Big_fat_cat發表於2019-02-16
jQueryWebPlugin

個人網站歡迎來訪

簡介

原來做專案遇到了呼叫攝像頭功能，php小白遇到這情況立刻就去網上搜尋，最後用的
https://www.helloweba.com/vie…，太爛了，作者也沒說如何去使用，如果用的是框架開發更是很麻煩

今天再次發現一款比較靈活的外掛jQuery webcam plugin，資源連結：http://www.xarg.org/project/j…【demo】

使用方法

部分參考：http://www.cnblogs.com/loyung…

  • width: 320, height: 240,//這兩個引數考慮到顯示效果320*240為標準的顯示模式，不可更改（外掛硬傷）。如果要修改大小其實也是可以的，修改jscam.swf原始檔
  • mode：// 儲存方式可以按以下三種方式callback | save | stream
  • swffile：//可以選擇解壓後jscam_canvas_only.swf或jscam.swf，jscam_canvas_only加快了每次呼叫裝置的效率，因為他只有jscam.swf的1/3
  • onTick: function(remain) {}//定時觸發，定時拍照
  • onSave：//關鍵地方，設定提交資料處理後臺做影像引數設定
  • onCapture：//點選拍照儲存
  • onLoad：//外掛載入事件，通常這裡羅列裝置列表
jQuery("#webcam").webcam({

    width: 320,
    height: 240,
    mode: "callback",
    swffile: "/jscam_canvas_only.swf", // canvas only doesn`t implement a jpeg encoder, so the file is much smaller

    onTick: function(remain) {

        if (0 == remain) {
            jQuery("#status").text("Cheese!");
        } else {
            jQuery("#status").text(remain + " seconds remaining...");
        }
    },

    onSave: function(data) {

        var col = data.split(";");
    // Work with the picture. Picture-data is encoded as an array of arrays... Not really nice, though =/
    },

    onCapture: function () {
        webcam.save();

       // Show a flash for example
    },

    debug: function (type, string) {
        // Write debug information to console.log() or a div, ...
    },

    onLoad: function () {
    // Page load
        var cams = webcam.getCameraList();
        for(var i in cams) {
            jQuery("#cams").append("<li>" + cams[i] + "</li>");
        }
    }
});

上面的js程式碼再定義一個<div id=”webcam”></div>，就可以開啟攝像頭了，但是要和php互動還要做一些修改

完整demo

下面程式碼中的註釋僅是個人理解，並非作者原有，僅供參考

html+js

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery-webcam-master</title>
    <link href="cs.css" rel="stylesheet" type="text/css">
    <script src="jquery-1.7.2.min.js"></script>
    <script src="jquery.webcam.min.js"></script>
    <script type="text/javascript">
        $(function() {

            var pos = 0, ctx = null, saveCB, image = [];
//建立畫布指定寬度和高度
            var canvas = document.createElement("canvas");
            canvas.setAttribute(`width`, 320);
            canvas.setAttribute(`height`, 240);
//如果畫布成功建立
            if (canvas.toDataURL) {
//設定畫布為2d，未來可能支援3d
                ctx = canvas.getContext("2d");
//截圖320*240，即整個畫布作為有效區(cutx?)
                image = ctx.getImageData(0, 0, 320, 240);

                saveCB = function(data) {
//把data切割為陣列
                    var col = data.split(";");
                    var img = image;
//繪製影像(這裡不是很理解演算法)
//引數data  只是每行的資料  ，例如320*240 大小的照片，一張完整的照片下來需要240個data，每個data有320個rgb
                    for(var i = 0; i < 320; i++) {
                        //轉換為十進位制
                        var tmp = parseInt(col[i]);
                        img.data[pos + 0] = (tmp >> 16) & 0xff;
                        img.data[pos + 1] = (tmp >> 8) & 0xff;
                        img.data[pos + 2] = tmp & 0xff;
                        img.data[pos + 3] = 0xff;
                        pos+= 4;
                    }
//當繪製320*240畫素的圖片時發給後端php
                    if (pos >= 4 * 320 * 240) {
//把影像放到畫布上,輸出為png格式
                        ctx.putImageData(img, 0, 0);
                        $.post("upload.php", {type: "data", image: canvas.toDataURL("image/png")});
                        pos = 0;
                    }
                };

            } else {
                saveCB = function(data) {
//把資料一點點的放入image[]
                    image.push(data);
                    pos+= 4 * 320;
                    if (pos >= 4 * 320 * 240) {
                        $.post("upload.php", {type: "pixel", image: image.join(`|`)});
                        pos = 0;
                    }
                };
            }
            $("#webcam").webcam({
                width: 320,
                height: 240,
                mode: "callback",
                swffile: "jscam_canvas_only.swf",

                onSave: saveCB,

                onCapture: function () {
                    webcam.save();
                },

                debug: function (type, string) {
                    console.log(type + ": " + string);
                }
            });
//            /**
//             * 獲取canvas畫布的內容 getImageData
//             * 內容放回到canvas畫布 putImageData
//             * 獲取ImgData的每一個畫素 ImgData.data
//             * getImageData(起始點的橫座標, 起始點的縱座標, 獲取的寬度, 獲取的高度)
//             * putImageData(繪製點的橫座標, 繪製點點縱座標, imgData的起始點橫座標, imgData的起始點縱座標, 寬度, 高度)
//             */
        });
    </script>
</head>
<body>
<div id="webcam"></div>
<input type="button" onclick="webcam.capture();" value="點選觸發" >
</body>

</html>

php後臺處理

後臺是涉及的是php繪圖技術，在php.ini中開啟extension=php_gd2.dll，如果是框架開發，在上面的js中$.post非同步給框架【TP】中控制器的某個方法

<?php
//$str = file_get_contents("php://input");
//file_put_contents("upload.jpg",  pack("H*", $str));
//var_dump($_POST[`image`]);

if ($_POST[`type`] == "pixel") {
    // input is in format 1,2,3...|1,2,3...|...
    $im = imagecreatetruecolor(320, 240);

    foreach (explode("|", $_POST[`image`]) as $y => $csv) {
        foreach (explode(";", $csv) as $x => $color) {
            imagesetpixel($im, $x, $y, $color);
        }
    }
} else {
    // input is in format: data:image/png;base64,...
    $im = imagecreatefrompng($_POST[`image`]);
}
imagepng($im,"circle".time().".png");//儲存，指定路徑
imagedestroy($im);
// do something with $im

原始碼編譯

該外掛有個缺點就是畫素大小不能調整，如果要調整畫素大小需要編譯src目錄下的原始碼，我沒有親自測試，提供編譯成功的例子 http://www.cnblogs.com/iasp/p…【jQuery Webcam Plugin jscam.swf檔案反編譯工具使用說明】

demo下載

原作者本人【https://github.com/infusion/j…】

我自己的demo：

相關文章