基本页面

<!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. Jquery学习笔记，全面实用,需要的可以留下邮箱，给大家发原稿文档

    JQuery 第一章:Jquery概念介绍 1.1 Jquery介绍 (1)并不是一门新语言.将常用的.复杂的操作进行函数化封装,直接调用,大大降低了使用JavaScript的难度,改变了使用Java ...

  2. 【转载】【凯子哥带你学Framework】Activity界面显示全解析（下）

    如何验证上一个问题 首先,说明一下运行条件 //主题 name="AppTheme" parent="@android:style/Theme.Holo.Light.No ...

  3. 【异常】java.lang.ArithmeticException: Non-terminating decimal expansion; no exact representable decimal result.

    异常原因:没有指定数据精度导致数据运算无法正常结算 如执行下面的除法: ).divide(BigDecimal.valueOf()).intValue(); 指定精度后就可以了: ).divide(B ...

  4. 202. 快乐数.Set去重作用实际作用

    编写一个算法来判断一个数是不是“快乐数”. 一个“快乐数”定义为:对于一个正整数,每一次将该数替换为它每个位置上的数字的平方和,然后重复这个过程直到这个数变为 1,也可能是无限循环但始终变不到 1.如 ...

  5. 2019年杭电多校第一场 1009题String(HDU6586+模拟+单调栈)

    题目链接 传送门 题意 给你一个字符串,要你构造一个长为\(k\)的子串使得每个字母出现的次数在\([L_i,R_i](0\leq i\leq26)\)间且字典序最小. 思路 做这种题目就是要保持思路 ...

  6. 201671030122 杨凡亿 实验十四 团队项目评审&课程学习总结

    项目 内容 课程名称 2016级计算机科学与工程学院软件工程(西北师范大学) 作业要求 实验十四 团队项目评审&课程学习总结 课程学习目标 (1)掌握软件项目评审会流程(2)反思总结课程学习内 ...

  7. 转载于山边小溪的博客--编写跨浏览器兼容的 CSS 代码的金科玉律

    http://www.cnblogs.com/lhb25/archive/2010/06/19/1760786.html   原始网页 作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很 ...

  8. async await 总结

    1.async await成对出现,await再async定义的函数内 2.async定义的是函数 3.async 返回一个Promise 4.async 函数中 return 的结果将作为回调的参数 ...

  9. 数据库 = filesystem + transcation + dsl + dslengine

    数据库 = filesystem + transcation + dsl + dslParser

  10. sqlg rdbms 上实现的Apache TinkerPop

    sqlg 可以让关系型数据库支持Apache TinkerPop,当前支持的数据库有postgresql,hsqldb,h2,mariadb,mysql,mssqlserver 以下是一个简单的使用 ...