基本页面

<!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. Ubuntu中wine程序安装windows软件中文乱码如何解决

    1.安装wine sudo apt install wine 2.安装中文程序方法 下载exe文件 在命令行执行 wine 文件名.exe 3.中文乱码原因分析 查看/home/用户名/.wine/d ...

  2. zabbix4.0自动发现主机

    一.自动发现主机的需求 由于机房设备拆分,迁移服务器后,原来的监控失效.再重新搭建监控平台后,批量主机手动添加真的是很麻烦. 所以就用到了zabbix的自动发现功能 二.配置自动发现服务 配置--&g ...

  3. Flask 开启多进程或多线程

    2018-07-15 23:31:20 yang9315 阅读数 7703更多 分类专栏: python   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接 ...

  4. Tomcat配置域名、ip访问及解决80端口冲突

    1.先在tomcat下的conf下找到server.xml文件,用记事本打开后,首先对端口号进行修改,以前一直以为8080是默认的端口号,其实默认的端口号是80 <Connector port= ...

  5. Locust性能测试6-命令行参数详解

    前言 当我们在linux上使用locust工具压测的时候,会使用no-web模式,然后需要收集运行的日志,方便查找问题. 命令行参数 输入locust --help 查看所有的命令行参数 > l ...

  6. underscore 工具

    =============== 通知: 博主已迁至<掘金>码字,博客园可能以后不再更新,掘金地址:https://juejin.im/post/5a1a6a6551882534af25a8 ...

  7. python连接redis哨兵集群

    一.redis集群模式有多种, 哨兵模式只是其中的一种实现方式, 其原理请自行谷歌或者百度 二.python 连接 redis 哨兵集群 1. 安装redis包 pip install redis 2 ...

  8. Helm 安装部署Kubernetes的dashboard

    Kubernetes Dashboard 是 k8s集群的一个 WEB UI管理工具,代码托管在 github 上,地址:https://github.com/kubernetes/dashboard ...

  9. LVS+DR+apache+keepalived负载均衡

    1.首先准备两台服务器.三台也可以我这里是两台 IP:192.168.52.33 IP:192.168.52.34 VIP:192.168.52.100 2.关闭防火墙 systemctl  stop ...

  10. 验证码破解 | Selenium模拟登录简书

    使用超级鹰打码平台处理登录的文字点击验证码 import time from io import BytesIO from PIL import Image from selenium import ...