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>

html5 调用手机摄像头详解相关推荐

原生html调手机拍照,如何让HTML5调用手机摄像头拍照——实践就是一切
原文:如何让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家,学编程最重要的是实践,我这虽然有完善的代码,但是希望大家都可以自己写出属于自己的代码 HTML5 Th ...
html5调用手机摄像头
在一个响应式网站项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api 然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 input fil ...
html5调用手机摄像头，实现拍照上传功能
http://www.glve.net/html5-calls-cell-phone-cameras-to-achieve-photo-upload-feature.html 今天做手机网站,想实现手 ...
使用HTML5+调用手机摄像头和相册
前言: 前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法 ...
html调起苹果手机摄像头_使用HTML5+调用手机摄像头和相册
前言: 前端时间使用HTML5作了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了很多时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法 ...
Html5调用手机摄像头并实现人脸识别
需求混合App开发,原生壳子+webApp,在web部分调用原生摄像头功能并且在网页指定区域显示摄像头内容,同时可以手动拍照并进行人脸识别,将识别结果显示在网页上. 技术栈 vue.Html5.vi ...
html5调用手机摄像头和相册,h5 调用手机摄像头/相册
html 部分 js 部分 getBase64: function (file, callback) { var maxWidth = 640 if (file.files && fi ...
getUserMedia API及HTML5 调用手机摄像头拍照
https://segmentfault.com/a/1190000011793960
HTML5通过js调用手机摄像头
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

html5 调用手机摄像头详解

html5 调用手机摄像头详解相关推荐

最新文章

热门文章