基本页面

<!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. 分析一个UBOOT的方法

    1. 编译完成后可以看到在主目录下生成了uboot.bin文件,为了方便分析,使用如下命令将其反汇编:arm-linux-objdump -D -m arm u-boot > u-boot.as ...

  2. JS 基本操作

    1.判断数据是否包含某些数据 var ary=[{age:20,name:"a"},{age:20,name:"b"},,{age:30,name:" ...

  3. Kubernetes 监控

    1. Weave Scope Weave Scope 容器地图 创建 Kubernetes 集群并部署容器化应用只是第一步.一旦集群运行起来,我们需要确保一起正常,所有必要组件就位并各司其职,有足够的 ...

  4. ELK快速入门（四）filebeat替代logstash收集日志

    ELK快速入门四-filebeat替代logstash收集日志 filebeat简介 Filebeat是轻量级单用途的日志收集工具,用于在没有安装java的服务器上专门收集日志,可以将日志转发到log ...

  5. Oracle rman备份还原

    备份脚本: oracle备份fullbak.sh 脚本 . /u01/prod/db/12.1.0/PROD_erpdbp.env LOGDATE="`date '+%Y%m%d'`&quo ...

  6. React源码 ReactContext

    我们知道在react当中,组件与组件的沟通是通过props,父组件通过props给子组件传递一些属性,父组件可以传递一些回调函数给子组件,让子组件在某些特定的时候,可以调用父组件的一些特性. 但是我们 ...

  7. php抽象工厂模式(Abstract factory pattern)

    练代码 <?php interface Button { public function render(); } interface GUIFactory { public function c ...

  8. 第三篇 -- XML Schema

    验证XML文档是否符合议定的XML结构有两种方法,分别是DTD模式与XML Schema.本文主要介绍XML Schema. 一.XML Schema的优点 XML Schema基于XML,没有专门的 ...

  9. Good Article Good sentence HDU - 4416 （后缀自动机）

    Good Article Good sentence \[ Time Limit: 3000 ms\quad Memory Limit: 32768 kB \] 题意 给出一个 \(S\) 串,在给出 ...

  10. ent 基本使用十七 分页与排序

    ent 提供了方便的数据分页以及排序处理 limit 分页 users, err := client.User. Query(). Limit(n). All(ctx) offset 分页 users ...