jQuery webcam plugin调用摄像头

王伟廷发布于2019-08-20 17:17 / 3500人阅读

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

个人网站欢迎来访

简介

原来做项目遇到了调用摄像头功能，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 摄像头调用

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

转载请注明本文地址：https://www.ucloud.cn/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