你的位置:首页 > 网页设计

[网页设计]web HTML5 调用摄像头的代码


最近公司要求做一个在线拍照的功能,具体代码如下:

<html>  <head>    <title>html5调用摄像头拍照</title>    <style type="text/css">    #camera {      width: 640px;      height: 525px;      position: fixed;      border: 1px solid #f0f0f0;      -moz-border-radius: 4px 4px 0 0;      -webkit-border-radius: 4px 4px 0 0;      border-radius: 4px 4px 0 0;      -moz-box-shadow: 0 0 4px rgba(0,0,0,0.6);      -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.6);      box-shadow: 0 0 4px rgba(0,0,0,0.6);    }    #buttons {      text-align: center;    }    .btn {      width: 99px;      height: 38px;      line-height: 32px;      margin: 0px 4px 0px 0px;      border: 1px solid #fff;      -moz-border-radius: 5px; /* Gecko browsers */      -webkit-border-radius: 5px; /* Webkit browsers */      border-radius: 5px; /* W3C syntax */      cursor: default;      text-align: center;      font-size: 14px;      color: #fff;    }    .btn_blue {      background-color: #5CACEE;    }    .btn_green {      background-color: #00EE00;    }    .hidden{ display:none }  </style>  </head>  <body>    <div id="camera">      <div id="contentHolder">        <video id="video" width="640" height="480" autoplay></video>        <canvas style="display:none;" id="canvas" width="640" height="480"></canvas>      </div>      <div id="buttons">        <button id="btn_snap" class="btn btn_blue">拍照</button>        <button id="btn_cancel" class="btn btn_blue" style="display:none;">取消</button>        <button id="btn_upload" class="btn btn_green" style="display:none;">上传</button>      </div>    </div>  </body></html><script type="text/javascript">    // 添加事件监听器    window.addEventListener("DOMContentLoaded", function () {      // 获取元素,创建设置等等      var canvas = document.getElementById("canvas"),          context = canvas.getContext("2d"),          video = document.getElementById("video"),          videoObj = { "video": true },          errBack = function (error) {            console.log("Video capture error: ", error.code);          };      // 添加video 监听器      if (navigator.getUserMedia) { // 标准        navigator.getUserMedia(videoObj, function (stream) {          video.src = stream;          video.play();        }, errBack);      } else if (navigator.webkitGetUserMedia) { // WebKit 前缀        navigator.webkitGetUserMedia(videoObj, function (stream) {          video.src = window.webkitURL.createObjectURL(stream);          video.play();        }, errBack);      }      else if (navigator.mozGetUserMedia) { // Firefox 前缀        navigator.mozGetUserMedia(videoObj, function (stream) {          video.src = window.URL.createObjectURL(stream);          video.play();        }, errBack);      }      else {        alert("浏览器不支持HTML5!");        //console.log('your browser not support getUserMedia');      }      document.getElementById("btn_snap").addEventListener("click", function () {        context.drawImage(video, 0, 0, 640, 480);      });    }, false);</script>

但是有一些缺点就是,无法调整摄像头的分辨率,导致拍摄的照片不清晰。