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>
在浏览器中打开摄像头，使用它navigator.getUserMedia根据不同浏览器获取摄像头对象，这时候需要授权打开摄像头//获取摄像头对象
“navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedianavigator.getUserMedia({video:true,audio: true},gotStream,noStream)//”打开摄像头。
打开摄像头，并将摄像头实时流输出到浏览器中
<!DOCTYPE html><html><head><meta charset="UTF-8"<title></title>
</head><body>
<video id="video" width="1024" height="800" autoplay></video>
<button id="snap">截图</button>
<canvas id="canvas" width="1024" height="800"></canvas>
<script type="text/javascript">
var video = document.getElementById("video")
var canvas=document.getElementById("canvas")
var context=canvas.getContext('2d')
//获取摄像头对象
navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia
navigator.getUserMedia({video:true,audio: true},gotStream,noStream)//打开摄像头
//成功打开摄像头
function gotStream(stream){video.src =URL.createObjectURL(stream)；
video.onerror= function(){stream.stop()；
}stream.onended = noStream；
video.onloadedmetadata =function(){alert("成功打开摄像头")}；
}//打开摄像头失败
function noStream(error){alert(error)}
document.getElementById("snap").addEventListener("click",function(){
context.drawImage(video,0,0,1024,800)})
</script></body></html>
获取摄像头快照，可以实现在网页找照相的功能将摄像头内容绘制到网页上document.getElementById("snap").addEventListener("click",function(){context.drawImage(video,0,0,1024,800)})；即可关闭。
1，进入“选项”的“属性”窗口，发现声卡默认的“录音”显示为灰色，原来系统强制关闭了声卡的录音通道，在“混音器”下拉菜单中选择“PC Camera”，点击“确定”后d出一个“捕获”窗口。2，在“捕获”窗口中点“高级”按钮，勾选“自动增益控制”。再次进行测试，杂音比较小了，但声音不大。鉴于摄像头内置语音功能的效果太差了，笔者打算使用声卡的录音功能，便进入“控制面板”的“声音和音频设备属性”窗口，切换到“音频”页，找到“录音”一栏，将默认设备由“PC Camera”改为“SoundMAX HD Audio I”，这样声卡就成为时的录音设备。
3，注意，系统默认将摄像头内置的语音功能识别为USB声卡，所以在“设备管理器”中会出现两个声卡。如果正在使用HDMI一线通（与平板电视连接），建议关闭这个USB声卡，因为很多时候系统默认先识别USB声卡，此时会影响HDMI一线通的音频通道。 不过，在“设备管理器”中停用USB声卡后，就不能使用摄像头内置的语音功能了，此时除了将声卡设置为默认录音设备外，还必须选“仅使用默认设备”，否则在语音聊天时会出现没有声音的现象
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）