基本页面

<!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. 【Spring Boot】Spring Boot之整合RabbitMQ并实现消息的发送和接收

    一.项目配置 1)引入maven坐标 <!--amqp--> <dependency> <groupId>org.springframework.boot</ ...

  2. Linux多网卡绑定（bond）及网络组(team)

    Linux多网卡绑定(bond)及网络组(team)   很多时候,由于生产环境业务的特殊需求,我们需要对服务器的物理网卡实施特殊的配置,从而来满足不同业务场景下对服务器网络的特殊性要求.如高并发的网 ...

  3. MinGW-w64离线安装

    1.下载 如果你能从在线 安装,那最好就在线安装吧. 如果你能连上官网,那可以选择从官网去下载,地址:https://osdn.net/projects/mingw/releases/ https:/ ...

  4. 追光的人beta冲刺总结

    所属课程 软件工程1916 作业要求 Beta冲刺博客汇总 团队名称 追光的人 作业目标 beta阶段总结 队员学号 队员博客 221600219 小墨 https://www.cnblogs.com ...

  5. 项目Beta冲刺（2/7）（追光的人）(2019.5.24)

    所属课程 软件工程1916 作业要求 Beta冲刺博客汇总 团队名称 追光的人 作业目标 描述Beta冲刺每日的scrum和PM报告两部分 队员学号 队员博客 221600219 小墨 https:/ ...

  6. 【大数据】设置SSH免密钥（转）

    设置SSH免密钥 关于ssh免密码的设置,要求每两台主机之间设置免密码,自己的主机与自己的主机之间也要求设置免密码. 这项操作可以在admin用户下执行,执行完毕公钥在/home/admin/.ssh ...

  7. hiveserver2和zookeeper的HA搭建（转）

    最近公司新项目申请资源,虚拟机资源打开时候使用source login.sh的脚本来进行登录注册,好奇心驱使下看了看里面的shell脚本,使用到了hiveserver2的zookeeper连接,百度一 ...

  8. python--模块学习之xml模块

    xml即可扩展标记语言,它可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言. 本文主要学习的ElementTree是python的XML处理模块,它提供了一个轻量级的对象 ...

  9. ASP.NET Core Docker Nginx分权，多网站部署

    https://www.cnblogs.com/esofar/p/10694319.html

  10. Linux下Python3源码安装

    1.下载 wget https://www.python.org/ftp/python/3.7.4/Python-3.7.4.tgz 2.解压 tar -xzvf Python-3.7.4.tgz 3 ...