资讯专栏INFORMATION COLUMN

jQuery webcam plugin调用摄像头

王伟廷 / 3406人阅读

摘要:个人网站欢迎来访简介原来做项目遇到了调用摄像头功能,小白遇到这情况立刻就去网上搜索,最后用的,太烂了,作者也没说如何去使用,如果用的是框架开发更是很麻烦今天再次发现一款比较灵活的插件,资源链接使用方法部分参考这两个参数考虑到显示效果为标准的

个人网站欢迎来访
简介
原来做项目遇到了调用摄像头功能,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

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/83462.html

    相关文章

    • jQuery webcam plugin调用像头

      摘要:个人网站欢迎来访简介原来做项目遇到了调用摄像头功能,小白遇到这情况立刻就去网上搜索,最后用的,太烂了,作者也没说如何去使用,如果用的是框架开发更是很麻烦今天再次发现一款比较灵活的插件,资源链接使用方法部分参考这两个参数考虑到显示效果为标准的 个人网站欢迎来访 简介 原来做项目遇到了调用摄像头功能,php小白遇到这情况立刻就去网上搜索,最后用的https://www.helloweba....

      darkerXi 评论0 收藏0
    • 使用jquery-webcam插件,实现人脸采集并转base64

      摘要:项目需求在或浏览器下,调用电脑摄像头确保使用的是笔记本电脑,或者摄像头功能正常使用的台式机,进行人脸图像采集预览,并将图片的码传入到后台进行后续操作。该适用于和以上,以下版本的未测试。前期插件准备版本以上即可地址作者主页地址这里。 项目需求:在ie或chrome浏览器下,调用电脑摄像头(确保使用的是笔记本电脑,或者摄像头功能正常使用的台式机),进行人脸图像采集预览,并将图片的base6...

      chenatu 评论0 收藏0
    • 使用jquery-webcam插件,实现人脸采集并转base64

      摘要:项目需求在或浏览器下,调用电脑摄像头确保使用的是笔记本电脑,或者摄像头功能正常使用的台式机,进行人脸图像采集预览,并将图片的码传入到后台进行后续操作。该适用于和以上,以下版本的未测试。前期插件准备版本以上即可地址作者主页地址这里。 项目需求:在ie或chrome浏览器下,调用电脑摄像头(确保使用的是笔记本电脑,或者摄像头功能正常使用的台式机),进行人脸图像采集预览,并将图片的base6...

      cnio 评论0 收藏0
    • 使用Webcam实现拍照功能

      摘要:先看了下基于实现的超酷摄像头拍照功能,结果发现我的浏览器不支持,连都没运行起来,放弃。于是选择插件,参照示例,实现了拍照功能,但是发现每次打开浏览器,都会出现是否允许使用摄像头的选择框,好烦,而且的代码太繁琐。 开发环境:Grails 3.2.3,jQuery 1.11.3 最近做项目,遇到一个正常但又少见的需求——拍照,于是在Google上搜索js 拍照,出现的都是Html5的实现,...

      hedzr 评论0 收藏0
    • 使用Webcam实现拍照功能

      摘要:先看了下基于实现的超酷摄像头拍照功能,结果发现我的浏览器不支持,连都没运行起来,放弃。于是选择插件,参照示例,实现了拍照功能,但是发现每次打开浏览器,都会出现是否允许使用摄像头的选择框,好烦,而且的代码太繁琐。 开发环境:Grails 3.2.3,jQuery 1.11.3 最近做项目,遇到一个正常但又少见的需求——拍照,于是在Google上搜索js 拍照,出现的都是Html5的实现,...

      DangoSky 评论0 收藏0

    发表评论

    0条评论

    王伟廷

    |高级讲师

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <