基本页面

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title>webcam</title>

        <style type="text/css">

            #webcam {

                width: auto;

                height: auto;

                float: left;

            }

            #base64image {

                display: block;

                width: 320px;

                height: 240px;

            }

        </style>

        <!-- 基本的jquery引用，.5版本以上 -->

        <script src="jquery.min.js"></script>

        <!-- webcam插件引用 -->

        <script src="jquery.webcam.js"></script>

    </head>

    <body>

        <div id="webcam"></div>

        <input id="snapBtn" type="button" value="拍照" />

        <img id="base64image" src='' />

        <script type="text/javascript">

            var pos = ,

                ctx = null,

                image = [];

            var w = ;

            var h = ;

            $(document).ready(function() {

                jQuery("#webcam").webcam({

                    width: ,

                    height: ,

                    mode: "callback",

                    swffile: "jscam_canvas_only.swf", // 这里引入swf文件，注意路径

                    onTick: function(remain) {},

                    onSave: function(data) {

                        var col = data.split(";");

                        var img = image;

                        for(var i = ; i < ; i++) {

                            var tmp = parseInt(col[i]);

                            img.data[pos + ] = (tmp >> ) & 0xff;

                            img.data[pos + ] = (tmp >> ) & 0xff;

                            img.data[pos + ] = tmp & 0xff;

                            img.data[pos + ] = 0xff;

                            pos += ;

                        }

                        if(pos >=  *  * ) {

                            // 将图片显示到canvas中

                            ctx.putImageData(img, , );

                            // 取得图片的base64码

                            var base64 = canvas.toDataURL("image/png");                    

                            // 将图片base64码设置给img

                            var base64image = document.getElementById('base64image');

                            base64image.setAttribute('src', base64);

                            pos = ;

                        }

                    },

                    onCapture: function() {

                        webcam.save();

                        // Show a flash for example

                    },

                    debug: function(type, string) {

                        console.log('type:' + type + ',string:' + string);

                        // Write debug information to console.log() or a div

                    },

                    onLoad: function() {

                        // Page load

                    }

                });

                window.addEventListener("load", function() {

                    var canvas = document.getElementById("canvas");

                    if(canvas.getContext) {

                        ctx = canvas.getContext("2d");

                        ctx.clearRect(, , , );

                        var img = new Image();

                        img.onload = function() {

                            ctx.drawImage(img, , );

                        }

                        image = ctx.getImageData(, , , );

                    }

                }, false);

                $('#snapBtn').on('click', function() {

                    webcam.capture();

                });

            });

        </script>

    </body>

</html>

,可是运行的时候,一直会报错

error: Flash movie not yet registered!

真的是经过一番查找,原来是这个东西必须得在服务器环境下运行.!!!!

于是放到tomcat服务器下,立马就OK了.

jQuery-webcam使用的更多相关文章

  1. jQuery webcam plugin

    jQuery webcam plugin The jQuery webcam plugin is a transparent layer to communicate with a camera di ...

  2. 使用 jquery.webcam 进行asp.net 拍照

    HTML 代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index. ...

  3. jQuery Webcam Plugin jscam.swf文件反编译工具使用说明

    jQuery webcam plugin是一个在ie,firefox,chrome下都可以用的摄像头摄像及拍照用的插件. (http://www.xarg.org/project/jquery-web ...

  4. 10个最好的 jQuery 视频插件(转)

    在这篇文章中已经收集了 10 个最佳的 jQuery 视频插件,帮助开发人员容易地实现网站播放影片功能.可以显示视频和视频播放列表. 1. Bigvideo.js BigVideo.js 是一个 jQ ...

  5. 10个最好的 jQuery 视频插件

    在这篇文章中已经收集了10个最佳的jQuery视频插件,帮助开发人员容易地实现网站播放影片功能.可以显示视频和视频播放列表. 1. Bigvideo.js BigVideo.js 是一个jQuery插 ...

  6. jQuery+PHP+Mysql在线拍照和在线浏览照片

    本文用示例讲述了如何使用jQuery与PHP及Mysql结合,实现WEB版在线拍照.上传.显示浏览的功能,ajax交互技术贯穿本文始末,所以本文的读者要求具备相当熟悉jQuery及其插件使用和javs ...

  7. flash jquery 调用摄像头 vue chrome49浏览器

    flash jquery 调用摄像头 vue chrome49浏览器 这个摄像头,不能一个页面加载多个,只能一个页面显示一次,所以 调用的时候,记得加v-if 把组件销毁,然后从新加载新的 <! ...

  8. jQuery-webcam（.NET）实现WEB摄像头监控

    jQuery-webcam是一个非常好用的摄像头监控工具,DEMO可官方下载地址http://www.xarg.org/project/jquery-webcam-plugin/ 1.下载解压后,jq ...

  9. [转]使用jquery-webcam插件，实现人脸采集并转base64

    项目需求:在ie或chrome浏览器下,调用电脑摄像头(确保使用的是笔记本电脑,或者摄像头功能正常使用的台式机),进行人脸图像采集预览,并将图片的base64码传入到后台进行后续操作.该demo适用于 ...

随机推荐

  1. warning警告问题解决1

    warning警告问题, 这时可以不去管它, 但如果想解决, 可以这样做: c:\python\lib\site-packages\locust\core.py:17: MonkeyPatchWarn ...

  2. HTTP Status 500 - javax.servlet.ServletException: java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/core/LoopTag

    我在项目中导入了jar,还是不能使用EL表达式,一运行就出现了下面的额错误: org.apache.jasper.JasperException: javax.servlet.ServletExcep ...

  3. 7-zip命令行详解

    一.简介 7z,全称7-Zip, 是一款开源软件.是目前公认的压缩比例最大的压缩解压软件. 主要特征: # 全新的LZMA算法加大了7z格式的压缩比 # 支持格式: * 压缩 / 解压缩:7z, XZ ...

  4. MongoDB 模糊查询like

    1.LIKE模糊查询userName包含A字母的数据(%A%)-- SQL:SELECT * FROM UserInfo WHERE userName LIKE "%A%" -- ...

  5. VisualStudio中集成扩展调试SOS

    SOS扩展也是可以和VisualStudio进行集成的,这样真的方便了我们调试一些性能要求比较高的程序,当程序运行一段时间后我们用VS附加到进程,然后查看一些重要的对象数据,但是此时我们看不到.NET ...

  6. yugabyte与cockroachdb 的几个区别

    下图是来自官方文档  说明 今天打算尝试使用yugabyte做为hasura graphql-engine 的pg 引擎,发现比较完美,仔细看官方文档,原来yugabyte 底层实现直接是基于原生pg ...

  7. centos 部署的时候安装不上Mariadb，缺少依赖文件

    并不存在这个sock文件 使用systemctl status mariadb.service 查看报错信息 提示libsystemd.so.0文件不存在, 安装systemd-libs包,解决问题, ...

  8. Django 基础篇(二)视图与模板

    视图 在django中,视图对WEB请求进行回应 视图接收reqeust对象作为第一个参数,包含了请求的信息 视图就是一个Python函数,被定义在views.py中 #coding:utf- fro ...

  9. 将两个各有n个元素的有序表归并成一个有序表,其最多的比较次数

    最多的比较次数是当两个有序表的数据刚好是插空顺序的时候,比如:第一个序列是1,3,5,第二个序列是2,4,6,把第二个序列插入到第一个序列中,先把第二个序列中的第一个元素2和第一个序列依次比较,需要比 ...

  10. C++后端工程师需要看的书籍

    C++基础书籍<C++ primer><深度探索C++对象模型><Effective C++><more effective C++><STL源码 ...