jQuery webcam plugin調用攝像頭

王偉廷發布于2019-08-20 17:17 / 3501人閱讀

摘要：個人網站歡迎來訪簡介原來做項目遇到了調用攝像頭功能，小白遇到這情況立刻就去網上搜索，最后用的，太爛了，作者也沒說如何去使用，如果用的是框架開發更是很麻煩今天再次發現一款比較靈活的插件，資源鏈接使用方法部分參考這兩個參數考慮到顯示效果為標準的

個人網站歡迎來訪

簡介

原來做項目遇到了調用攝像頭功能，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("" + cams[i] + "");
        }
    }
});

上面的js代碼再定義一個
，就可以打開攝像頭了，但是要和php交互還要做一些修改

完整demo

下面代碼中的注釋僅是個人理解，并非作者原有，僅供參考

html+js




    
    jQuery-webcam-master

php后臺處理

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

 $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：

git下載：https://github.com/mytheshow/...

百度云下載：鏈接：http://pan.baidu.com/s/1hsBqwfE 密碼：u2c2

云服務器 GPU云服務器 JQuery調用 webrtc調用攝像頭 linux調用攝像頭 webrtc 攝像頭調用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83462.html

jQuery webcam plugin調用攝像頭

摘要：個人網站歡迎來訪簡介原來做項目遇到了調用攝像頭功能，小白遇到這情況立刻就去網上搜索，最后用的，太爛了，作者也沒說如何去使用，如果用的是框架開發更是很麻煩今天再次發現一款比較靈活的插件，資源鏈接使用方法部分參考這兩個參數考慮到顯示效果為標準的個人網站歡迎來訪簡介原來做項目遇到了調用攝像頭功能，php小白遇到這情況立刻就去網上搜索，最后用的https://www.helloweba....

darkerXi 2019-07-01 12:22 評論0 收藏0
使用jquery-webcam插件，實現人臉采集并轉base64

摘要：項目需求在或瀏覽器下，調用電腦攝像頭確保使用的是筆記本電腦，或者攝像頭功能正常使用的臺式機，進行人臉圖像采集預覽，并將圖片的碼傳入到后臺進行后續操作。該適用于和以上，以下版本的未測試。前期插件準備版本以上即可地址作者主頁地址這里。項目需求：在ie或chrome瀏覽器下，調用電腦攝像頭（確保使用的是筆記本電腦，或者攝像頭功能正常使用的臺式機），進行人臉圖像采集預覽，并將圖片的base6...

chenatu 2019-08-20 18:18 評論0 收藏0
使用jquery-webcam插件，實現人臉采集并轉base64

摘要：項目需求在或瀏覽器下，調用電腦攝像頭確保使用的是筆記本電腦，或者攝像頭功能正常使用的臺式機，進行人臉圖像采集預覽，并將圖片的碼傳入到后臺進行后續操作。該適用于和以上，以下版本的未測試。前期插件準備版本以上即可地址作者主頁地址這里。項目需求：在ie或chrome瀏覽器下，調用電腦攝像頭（確保使用的是筆記本電腦，或者攝像頭功能正常使用的臺式機），進行人臉圖像采集預覽，并將圖片的base6...

cnio 2019-08-01 17:15 評論0 收藏0
使用Webcam實現拍照功能

摘要：先看了下基于實現的超酷攝像頭拍照功能，結果發現我的瀏覽器不支持，連都沒運行起來，放棄。于是選擇插件，參照示例，實現了拍照功能，但是發現每次打開瀏覽器，都會出現是否允許使用攝像頭的選擇框，好煩，而且的代碼太繁瑣。開發環境：Grails 3.2.3，jQuery 1.11.3 最近做項目，遇到一個正常但又少見的需求——拍照，于是在Google上搜索js 拍照，出現的都是Html5的實現，...

hedzr 2019-08-20 14:08 評論0 收藏0
使用Webcam實現拍照功能

摘要：先看了下基于實現的超酷攝像頭拍照功能，結果發現我的瀏覽器不支持，連都沒運行起來，放棄。于是選擇插件，參照示例，實現了拍照功能，但是發現每次打開瀏覽器，都會出現是否允許使用攝像頭的選擇框，好煩，而且的代碼太繁瑣。開發環境：Grails 3.2.3，jQuery 1.11.3 最近做項目，遇到一個正常但又少見的需求——拍照，于是在Google上搜索js 拍照，出現的都是Html5的實現，...

DangoSky 2019-08-14 17:23 評論0 收藏0