html5打开摄像头代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta content="text/htmlcharset=UTF-8" http-equiv="content-type">
<title>Smart Home - Camera</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<script src="js/jq.js"></script>
<script type="text/javascript">
/*
*/
function init(t){
accessLocalWebCam("camera_box")
}
// Normalizes window.URL
window.URL = window.URL || window.webkitURL || window.msURL || window.oURL
// Normalizes navigator.getUserMedia
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia|| navigator.mozGetUserMedia ||
navigator.msGetUserMedia
function isChromiumVersionLower() {
var ua = navigator.userAgent
var testChromium = ua.match(/AppleWebKit\/.* Chrome\/([\d.]+).* Safari\//)
return (testChromium &&(parseInt(testChromium[1].split('.')[0]) <19))
}
function successsCallback(stream) {
document.getElementById('camera_errbox').style.display = 'none'
document.getElementById('camera_box').src = (window.URL
&&window.URL.createObjectURL) ?
window.URL.createObjectURL(stream) : stream
}
function errorCallback(err) {
}
function accessLocalWebCam(id) {
try {
// Tries it with spec syntax
navigator.getUserMedia({ video: true }, successsCallback, errorCallback)
} catch (err) {
// Tries it with old spec of string syntax
navigator.getUserMedia('video', successsCallback, errorCallback)
}
}
</script>
<style type="text/css">
#camera_errbox{
width:320pxheight:autoborder:1px solid #333333padding:10px
color:#ffftext-align:leftmargin:20px auto
font-size:14px
}
#camera_errbox b{
padding-bottom:15px
}
</style>
</head>
<body onLoad="init(this)" oncontextmenu="return false" onselectstart="return false">
<div class="Screen_outer">
<div id="mainbox" class="Screen_inner">
<div id="bt_goback"></div>
<div class="logobox"></div><div id="t_iconbox"
class="icon_12"></div><div id="t_text">
<div id="el_title" class="font_h2">Camera</div>
<div id="el_descr" class="font_2"></div>
</div>
<div class="t_descri_bt"></div>
<div class="sp_title"><span
class="sp_title_text">Camera</span><div class="sp_oc
sp_oc_1"></div></div>
<dl id="el_actionbox" class="menu_btbox" style="text-align:center">
<video id="camera_box" autoplay="" src=""></video>
<div id="camera_errbox">
<b>请点击“允许”按钮，授权网页访问您的摄像头！</b>
<div>若您并未看到任何授权提示，则表示您的浏览器不支持Media Capture或您的机器没有连接摄像头设备。</div>
</div>
</dl>
</div>
</div>
</body>
</html>
1）获取视频流添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源
var video = document.getElementByIdx_x_x("video")
navigator.getUserMedia({video:true}, function (stream) {
video.src = window.webkitURL.createObjectURL(stream)
}, function (error) { alert(error)})
2）拍照
关于拍照功能，采用HTML5的Canvas实时捕获Video标签的内容，Video元素能作为Canvas图像的输入
function scamera() {
var videoElement = document.getElementByIdx_x_x('video')
var canvasObj = document.getElementByIdx_x_x('canvas1')
var context1 = canvasObj.getContext('2d')
context1.fillStyle = "#ffffff"
context1.fillRect(0, 0, 320, 240)
context1.drawImage(videoElement, 0, 0, 320, 240)
}
3）图片获取
要从Canvas获取图片数据，其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像
var imgData=canvas.toDataURL(“image/png”)
imgData格式如下：”data:image/pngbase64,xxxxx“
真正图像数据是base64编码逗号之后的部分
http://zhidao.baidu.com/link?url=skQIjjO2rwrx3Q0CtcI0SJB4LaMuqHIxL7lr0a2-lx6uWcCiodydy1pNPbD0zlKEQQD2aiK-25SnjheCefSxMQ91HRtGL3KEOZN4cyHkXba
希望对你有所帮助
HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。但实际上用html5调用手机摄像头存在很多问题：
1）谷歌的发布的Chrome到了21版本后，才新增了一个用于高质量视频音频通讯的getUserMedia API，该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能
2）两个浏览器均不支持访问多个摄像头：chrome不支持访问后置摄像头，pera支持访问后置摄像头的
android手机，浏览器chrome32版本下实现了浏览器调用设备摄像头进行拍照。主要分3个步骤来完成:
1）获取视频流
添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源
var video = document.getElementByIdx_x_x("video")navigator.getUserMedia({video:true}, function (stream) {
video.src = window.webkitURL.createObjectURL(stream)
}, function (error) { alert(error) })
2）拍照
关于拍照功能，采用HTML5的Canvas实时捕获Video标签的内容，Video元素能作为Canvas图像的输入
function scamera() {
var videoElement = document.getElementByIdx_x_x('video')
var canvasObj = document.getElementByIdx_x_x('canvas1')
var context1 = canvasObj.getContext('2d')
context1.fillStyle = "#ffffff"
context1.fillRect(0, 0, 320, 240)
context1.drawImage(videoElement, 0, 0, 320, 240)
}
3）图片获取
要从Canvas获取图片数据，其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像
var imgData=canvas.toDataURL(“image/png”)imgData格式如下：”data:image/pngbase64,xxxxx“
真正图像数据是base64编码逗号之后的部分
