随着flash被禁用,flash上传附件的方式已成为过去,现在开始用html5上传了.本片文章就是介绍如何使用html5拍照,其实挺简单的原理:

调用摄像头采集视频流,利用canvas的特性生成base64图片,

其完整代码如下,需要使用https访问才不会有调用摄像头安全问题,另外IE内核是无法使用的.这个可以作为一个单独页面来被父页面调用

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>html5拍照</title>

<style type="text/css">

body{overflow-y:auto;overflow-x:auto;margin:0;}

#cameraBtn,#cameraDiv{padding:5px;}

.big-btn-blue{ display:inline-block; min-width:80px; height:30px; margin:0 5px; padding:0 15px; vertical-align:top; line-height:30px; text-align:center; font-size:14px; font-family: "微软雅黑";

 color:#fff; border-radius:2px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; cursor:pointer; }

.big-btn-blue{ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;}/*动画*/

.big-btn-blue{ border:1px solid #3194dd; background-color:#3194dd;}/*纯蓝色*/

</style>

<script type="text/javascript">

//访问用户媒体设备的兼容方法

function getUserMedia(constrains,success,error){

    if(navigator.mediaDevices.getUserMedia){

        //最新标准API

        navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);

    } else if (navigator.webkitGetUserMedia){

        //webkit内核浏览器

        navigator.webkitGetUserMedia(constrains).then(success).catch(error);

    } else if (navigator.mozGetUserMedia){

        //Firefox浏览器

        navagator.mozGetUserMedia(constrains).then(success).catch(error);

    } else if (navigator.getUserMedia){

        //旧版API

        navigator.getUserMedia(constrains).then(success).catch(error);

    }else{

        alert("不支持的浏览器");

    }

}

//成功的回调函数

function success(stream){

    //兼容webkit内核浏览器

    var CompatibleURL = window.URL || window.webkitURL;

    //将视频流设置为video元素的源

    try {

        video.srcObject = stream;

    } catch (e) {

        video.src = CompatibleURL.createObjectURL(stream);

    }

    //播放视频

    video.play();

}

//异常的回调函数

function error(error){

   alert("访问用户媒体设备失败,"+error.name+""+error.message);

}

/**

 * 获取当前静态页面的参数

 * 返回值和使用方法类似java request的getparamater

 * 不同: 当取得的为数组(length>1)时调用toString()返回(逗号分隔每个元素)

 * @param {Object} name

 * @return {TypeName}

 */

function getPara(name,search){

    var p = getParas(name,search);

    if(p.length==0){

        return null;

    }else if(p.length==1){

        return p[0];

    }else{

        return p.toString();

    }

}

/**获取当前静态页面的参数

 * 返回值和使用方法类似java request的getparamaterValues

 * @param {Object} name 要取出的参数名,可以在参数字符串中重复出现

 * @param {Object} search 手工指定要解析的参数字符串,默认为当前页面后跟的参数

 * @return {TypeName}

 */

function getParas(name,search){

    if(!search){

        search = window.location.search.substr(1);//1.html?a=1&b=2

    }

    var para = [];

    var pairs = search.split("&");//a=1&b=2&b=2&c=2&b=2

    for(var i=0;i<pairs.length;i=i+1){

        var sign = pairs[i].indexOf("=");

        if(sign == -1){//如果没有找到=号，那么就跳过，跳到下一个字符串（下一个循环）。

            continue;

        }

        var aKey = pairs[i].substring(0,sign);

        if(aKey==name){

            para.push(unescape(pairs[i].substring(sign+1)));

        }

    }

    return para;

}

//开启摄像头

function captureInit(){

    if ((navigator.mediaDevices!=undefined && navigator.mediaDevices.getUserMedia!=undefined)

            || navigator.getUserMedia!=undefined

            || navigator.webkitGetUserMedia!=undefined

            || navigator.mozGetUserMedia!=undefined){

        document.getElementById("help").style.display="none";

        //调用用户媒体设备，访问摄像头,改为触发事件

        getUserMedia({video:{width:imgWidth,height:imgHeight}},success,error);

        if(captureState==0){

            captureState=1;//标记此按钮已点击

        }

    } else {

        captureState=0;//异常标识按钮没点

        alert("你的浏览器不支持访问用户媒体设备或访问地址不是https开头,您可以点击右侧下载解决方案");

        document.getElementById("help").style.display="inline-block";

    }

}

//注册拍照按钮的单击事件

function capture(){

    //绘制画面

    if(captureState==0){

        alert("请先开启摄像头");

        return;

    }

    context.drawImage(video,0,0,imgWidth,imgHeight);//后面两个长宽

    //canvas.toDataURL("image/png");//即可得到base64编码

    captureState=2;

}

//确认按钮返回给父页面的函数

function queren(){

    if(captureState!=2){

        alert("请先开启摄像头并拍照");

        return;

    }

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

    var pics={};

    pics.filetypeid=filetypeid;//返回给前端

    pics.base64=base64;

    if(window.opener){

        window.opener[cb](pics);// /FileUploadTmp/为项目临时文件夹相对路径

        window.close();

    }else if(window.parent){

        window.parent[cb](pics);

        window.parent.$("#dialog_ifr_html").dialog("close");//close会导致flash未执行完就销毁,页面JS报错

    }else{

        window.close();

    }

}

</script>

</head>

<body>

<div id="cameraBtn">

    <input type="button" id="init" onclick="captureInit()" value="开启摄像头"/>

    <input type="button" id="capture" onclick="capture()" value="拍照"/>

    <input type="button" id="queren" onclick="queren()" value="确定"/>

    <span id="help" style="display:none;"><a href="/static/ad/down/camera.doc">点此下载无法拍照的解决方案</a></span>

</div>

<div id="cameraDiv">

    <!-- 视频流 -->

      <video id="video" autoplay style="width: 300px;height: 200px"></video>

     <!--描绘video截图-->

    <canvas id="canvas" width="300" height="200"></canvas>

</div>

<script type="text/javascript">

var cb=getPara("cb")||"setImg";

var filetypeid=getPara("filetypeid")||"filetypeid";//附件类型id

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

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

var context=canvas.getContext("2d");

var imgWidth=getPara("width")||"300";//这个值div的宽一致

var imgHeight=getPara("height")||"200";//这个值div的高一致

var captureState=0;//未开启,1已开启,2已拍照,为2才可点击确认按钮

var style = getPara("style")||"big-btn-blue";

video.style.width=imgWidth;

video.style.height=imgHeight;

var st = style.split(",");

document.getElementById("init").className=st[0];

document.getElementById("capture").className=st[1]||st[0];

document.getElementById("queren").className=st[2]||st[0];

document.getElementById("help").className=st[3]||st[0];

</script>

</body>

</html>

相信略懂js和html5的人都能看懂代码,非常的简单.而且都不需要用到jquery.

另外备注下:IE内核浏览器是无法实现的.因为不支持getUserMedia方法.

注:文章内容来自于本人在CSDN上发布的文章

html5调用摄像头并拍照的更多相关文章

  1. html5调用摄像头实现拍照

    技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...

  2. HTML5调用摄像头实现拍照功能（兼容各大主流浏览器）

    本人亲測,兼容各大主流浏览器,HTML5太强大了,须要的留下邮箱哦 假设想要立即收到,则可到我的资源下载 http://download.csdn.net/detail/laijieyao/81699 ...

  3. web HTML5 调用摄像头的代码

    最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...

  4. [转]html5调用摄像头实例

    原文:https://blog.csdn.net/binquan_liang/article/details/79489989 最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章 ...

  5. HTML之调用摄像头实现拍照和摄像功能

    应该有很多人知道,我们的手机里面有个功能是“抓拍入侵者”,说白了就是在解锁应用时如果我们输错了密码手机就会调用这一功能实现自动拍照. 其实在手机上还有很多我们常用的软件都有类似于这样的功能,比如微信扫 ...

  6. html5调用摄像头截图

    关于html5调用音视频等多媒体硬件的API已经很成熟,不过一直找不到机会把这些硬件转化为实际的应用场景,不过近年来随着iot和AI的浪潮,我觉得软硬结合的时机已经成熟.那我们就提前熟悉下怎么操作这些 ...

  7. java javacv调用摄像头并拍照

    调用摄像头并拍张照片,我一开始用的java的jmf媒体框架,但这个有很多的局限性不好使并且很有麻烦,兜了一圈发现javacv东西,研究之后这东西简单,方便:废话不多说了来重点. javacv官网:点击 ...

  8. 【Java】调用摄像头进行拍照并保存【详细】以及处理no jniopencv_core in java.library.path的一种方法

    [之前困扰笔者的问题描述]   date:2019.12.18 网上教程很多,但是没有看见完整的,所以写一个出来. 调用摄像头需要javaCV的jar包和openCV的jar包,现在已经不需要安装包了 ...

  9. getUserMedia API及HTML5 调用摄像头和麦克风

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

随机推荐

  1. accurate, accuse

    accurate accurate(不是acute)和precise是近义词,precise里有个pre,又和excise(切除, 不是exercise),concise一样有cise.Why? 准确 ...

  2. JavaScript 链表

    ------------恢复内容开始------------ 背景 数组并不总是组织数据的最佳数据结构,原因如下.在很多编程语言中,数组的长度是固定的,所以当数组已被数据填满时,再要加入新的元素就会非 ...

  3. 【并发编程】Java并发编程-看懂AQS的前世今生

    在我们可以深入学习AbstractQueuedSynchronizer(AQS)之前,必须具备了volatile.CAS和模板方法设计模式的知识,本文主要想从AQS的产生背景.设计和结构.源代码实现及 ...

  4. 解决CSV文件用Excel打开乱码问题

    这篇文章适合有一定编码基础的人看,纯手动解决乱码问题请参见: 转码保存后,重新打开即可. 转码操作如下: 编辑器->另存为->ASCII码格式文件/UTF-8含BOM格式->保存. ...

  5. springboot项目中集成ip2region遇到的问题及终极解决办法

    1.问题回顾 按照ip2region项目的官方集成到springboot项目后,运行测试一切都ok,没有任何问题.但是当项目打成可执行的jar包后再运行,却显示找不到ip2region.db,无法找到 ...

  6. spring-cloud-alibaba-dependencies版本问题

    org.springframework.cloud的spring-cloud-alibaba-dependencies管理的nacos最新版本是0.9.0.RELEASE,已经不再维护了,用起来有版本 ...

  7. Hive实战UDF 外部依赖文件找不到的问题

    目录 关于外部依赖文件找不到的问题 为什么要使用外部依赖 为什么idea 里面可以运行上线之后不行 依赖文件直接打包在jar 包里面不香吗 学会独立思考并且解决问题 继承DbSearcher 读取文件 ...

  8. 安全防御之防xss、SQL注入、与CSRF攻击

    XSS攻击 个人理解,项目中最普通的就是通过输入框表单,提交js代码,进行攻击例如在输入框中提交 <script>alert("我是xss攻击");</scrip ...

  9. 深入理解java虚拟机(一)

    java历史 1996.01.23发布Jdk1.0 1998.12.04发布jdk1.2(里程碑的版本)注意:集合容器Collection和Map都是从1.2开始 1999.04.27HotSpot虚 ...

  10. CVE 2021-44228 Log4j-2命令执行复现及分析

    12月11日:Apache Log4j2官方发布了2.15.0 版本,以修复CVE-2021-44228.虽然 2.15.0 版本解决了Message Lookups功能和JNDI 访问方式的问题,但 ...