内容简介:jQuery webcam plugin调用摄像头
原来做项目遇到了调用摄像头功能,php小白遇到这情况立刻就去网上搜索,最后用的
https://www.helloweba.com/view-blog-178.html,太烂了,作者也没说如何去使用,如果用的是框架开发更是很麻烦今天再次发现一款比较灵活的插件jQuery webcam plugin,资源链接: http://www.xarg.org/project/jquery-webcam-plugin/【demo】
使用方法
部分参考: http://www.cnblogs.com/loyung/p/4661886.html
-
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代码再定义一个
完整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/6540123.html【jQuery Webcam Plugin jscam.swf文件反编译 工具 使用说明】
以上所述就是小编给大家介绍的《jQuery webcam plugin调用摄像头》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- html5调用手机摄像头
- Firefox 60 预计五月上线:打击网站调用摄像头偷拍行为
- 8千个城市2千万摄像头暴露:2018摄像头安全报告
- 如何构建一个简单的摄像头组件
- [译] 充分利用多摄像头 API
- 实战:如何使用 JavaScript 访问设备前后摄像头
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。