jQuery webcam plugin调用摄像头-白红宇

jQuery webcam plugin调用摄像头

阅读量：6295 次

发布时间：2019-06-22

本文共 2178 字，大约阅读时间需要 7 分钟。

简介

原来做项目遇到了调用摄像头功能，php小白遇到这情况立刻就去网上搜索，最后用的

，太烂了，作者也没说如何去使用，如果用的是框架开发更是很麻烦

今天再次发现一款比较灵活的插件jQuery webcam plugin，资源链接：【demo】

使用方法

部分参考：

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代码再定义一个<div id="webcam"></div>，就可以打开摄像头了，但是要和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