可以调用，不过适合HTML5，浏览器版本也要高点，有些低版本的估计不支持
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
</body>
<script type="text/javascript">
var promisifiedOldGUM = function(constraints) {
// 第一个拿到getUserMedia，如果存在
var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia)
// 有些浏览器只是不实现它-返回一个不被拒绝的承诺与一个错误保持一致的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser-getUserMedia是不是在这个浏览器实现'))
}
// 否则，调用包在一个旧navigator.getusermedia承诺
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject)
})
}
// 旧的浏览器可能无法实现mediadevices可言，所以我们设置一个空的对象第一
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {}
}
// 一些浏览器部分实现mediadevices。我们不能只指定一个对象
// 随着它将覆盖现有的性能getUserMedia。.
// 在这里，我们就要错过添加getUserMedia财产。.
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = promisifiedOldGUM
}
// Prefer camera resolution nearest to 1280x720.
var constraints = {
audio: true,
video: {
width: 1280,
height: 720
}
}
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
var video = document.querySelector('video')
video.src = window.URL.createObjectURL(stream)
video.onloadedmetadata = function(e) {
video.play()
}
}).catch(function(err) {
console.log(err.name + ": " + err.message)
})
</script>
</html>
html5中的video这个标签是引入视频的，通过navigator.getUserMedia去获取摄像头的视频流，所以要在事件里用关闭的代码都不能执行关闭摄像头，只有关闭网页，摄像头才关闭。
以下为html5打开摄像头代码：
<!DOCTYPE html>
<html>
<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>
<div id="mainbox">
<div id="bt_goback"></div>
<div></div><div id="t_iconbox"
class="icon_12"></div><div id="t_text">
<div id="el_title">Camera</div>
<div id="el_descr"></div>
</div>
<div></div>
<div><span
class="sp_title_text">Camera</span><div class="sp_oc
sp_oc_1"></div></div>
<dl id="el_actionbox" 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、实现头的方法代码。
2、编写CSS样式的方法代码。
3、html上传代码。
4、JS处理方法代码。
5、测试结果如下。
注意事项：
JavaScript是一种网络脚本语言，在web应用开发中得到了广泛的应用，它经常被用来为网页添加各种动态功能，为用户提供更加流畅美观的浏览效果，通常JavaScript脚本被嵌入到HTML中来实现自己的功能。
