html5调用摄像头并拍照

随着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调用摄像头并拍照

相关文章
