html5 调用手机摄像头详解

最新推荐文章于 2024-08-10 08:38:24 发布

想旅游咯

最新推荐文章于 2024-08-10 08:38:24 发布

阅读量1.1w

点赞数 4

分类专栏： web前端

web前端专栏收录该内容

109 篇文章 2 订阅

订阅专栏

html5 调用手机摄像头详解

首先，我们看看HTML代码结构，当然，这部分的DOM内容应该是在用户允许使用其摄像头事件出发后，动态加载生成的。
注意：我们采用的是 640X480的分辨率，如果采用JS动态生成，那么您是可以灵活控制分辨率的。

代码如下:

<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

JavaScript
只要上面的HTML元素创建完成，那么JavaScript部分将简单的超乎你想象的简单：

代码如下:

// 设置事件监听，DOM内容加载完成，和jQuery的$.ready() 效果差不多。
window.addEventListener("DOMContentLoaded", function() {
// canvas 元素将用于抓拍
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
// video 元素，将用于接收并播放摄像头的数据流
video = document.getElementById("video"),
videoObj = { "video": true },
// 一个出错的回调函数，在控制台打印出错信息
errBack = function(error) {
if("object" === typeof window.console){
console.log("Video capture error: ", error.code);
}
};
// Put video listeners into place
// 针对标准的浏览器
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// 对拍照按钮的事件监听
document.getElementById("snap").addEventListener("click", function() {
// 画到画布上
context.drawImage(video, 0, 0, 640, 480);
});
}, false);

最后，记得讲您的网页放到web服务器下面，然后通过http协议来访问哦。
另外，需要浏览器版本较新，并且支持HTML5的相关新特性才可以。
译者不算称职啦，没有按原文来翻译。使用的浏览器是chrome 28。
最后，贴上完整的代码，比较呆板。

代码如下:

<!DOCTYPE html>
<html>
<head>
<title> 浏览器webcamera </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="renfufei@qq.com">
<meta name="Description" content="inveted by: http://davidwalsh.name/browser-camera">
<script>
// 设置事件监听，DOM内容加载完成，和jQuery的$.ready() 效果差不多。
window.addEventListener("DOMContentLoaded", function() {
// canvas 元素将用于抓拍
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
// video 元素，将用于接收并播放摄像头的数据流
video = document.getElementById("video"),
videoObj = { "video": true },
// 一个出错的回调函数，在控制台打印出错信息
errBack = function(error) {
if("object" === typeof window.console){
console.log("Video capture error: ", error.code);
}
};
// Put video listeners into place
// 针对标准的浏览器
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// 对拍照按钮的事件监听
document.getElementById("snap").addEventListener("click", function() {
// 画到画布上
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>
</head>
<body>
<div>


<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
</div>
</body>
</html>

实例2

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
        <title>webcam demo</title>
  <meta name="author" content="terry - gbin1.com">
  <meta name="description" content="HTML5 webcam demo">
  <meta name="keywords" content="HTML5,webcam,gbin1.com, gbin1, gbtags">
  <link href='http://fonts.googleapis.com/css?family=Revalia' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/jquery.qtip.css" type="text/css" media="screen">
  <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="js/photobooth_min.js"></script>
  <script type="text/javascript" src="js/jquery.qtip.min.js"></script>
  <script type="text/javascript" src="js/gbin1.js"></script>
  <style>
   body{
    font-size:12px;
    background: #333;
    font-family: 'Revalia', cursive, arial;
   }

   div#pictures,div#webcam{
    margin: 10px 0 0;
   }

   h1{
    margin: 20px 0;
   }

   div#from{
    margin:20px 0px;
   }

   div#from a{
    color: #FFF;
    font-size:12px;
    background: #1557C3;
    margin: 20px 0;
    border-radius: 5px;
    padding:10px;
    line-height: 25px;
   }

   h1 a{
    background: #333;
    border-radius: 5px;
    padding: 5px;
    float:right;
    cusor: hand;
    color: #FFF;
    text-decoration: none;
    margin-left: 20px;
   }

   #main{
    width: 800px;
    margin: 10px auto;
    background: #FFF;
    color: #333;
    border: 2px solid #FFF;
    box-shadow: 0px 0px 10px #CCC;
    padding:20px;
    border-radius: 5px;
   }

   #main article{
    margin-bottom: 50px;
    background: #F8F8F8;
    border-radius: 5px;
    padding:20px;
    border: 1px solid #bbb;
   }

   #main #webcam{
    height: 400px;
    width: 100%;
   }

   #main #plist{
    margin: 20px 0;
    font-weight: bold;
    border-radius: 5px;
    background: #CCC;
    padding:10px;
   }

   #main img{
    margin-bottom: 50px;
    background: #F8F8F8;
    border-radius: 10px;
    box-shadow: 0px 0px 5px #888;
   }

   .clear{
    clear:both;
   }

   #main ul{
    list-style:none;
    margin:0;
    padding:0;
   }

   #main .photobooth{
    border: 1px solid #ccc;
    border-radius: 5px;
   }

  </style>
</head>
<body>

  <section id="main">
   <h1> HTML5 Webcam <a href="http://www.gbin1.com" id="site">By GBin1.com</a> </h1>
   <article>
   <h1>click the controll menu below, you can controll crop, hue, brightness, take picture </h1>
   <div id="webcam"></div>
   <div id="plist"> picture list </div>
   <div id="pictures"><div class="nopic">no pictures</div></div>
   <div id="from">
    <a href="http://www.gbin1.com/gb/">via gbtags.com</a>
   </div>
   <div class="clear"></div>
   </article>
  </section>
</body>
</html>

实例3---移动设备---

---PC------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<script type="text/javascript">
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function () {
// Grab elements, create settings, etc.
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);
};

// Put video listeners into place
if (navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function (stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if (navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function (stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);

// Trigger photo take
document.getElementById("snap").addEventListener("click", function () {
context.drawImage(video, 0, 0, 640, 480);
});
</script>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">
Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
</body>
</html>