在html5中使用navigator.getUserMedia打开相机，要怎样进行关闭？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在html5中使用navigator.getUserMedia打开相机，要怎样进行关闭？相关的知识，希望对你有一定的参考价值。
在浏览器中打开摄像头，使用它navigator.getUserMedia根据不同浏览器获取摄像头对象，这时候需要授权打开摄像头//获取摄像头对象
“navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;navigator.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))；即可关闭。
html5中的video这个标签是引入视频的，通过navigator.getUserMedia去获取摄像头的视频流，所以要在事件里用关闭的代码都不能执行关闭摄像头，只有关闭网页，摄像头才关闭。
以下为html5打开摄像头代码：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=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:320px; height:auto; border:1px solid #333333; padding:10px;
color:#fff; text-align:left;margin: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>
-——代码结束
参考技术B为便于使用这个接口，先做一下兼容性处理
1、大概的写了下 拍照结果： $(document).ready(init); function init() //。
2、为了便于使用这个接口，先做一下兼容性处理navigator.getUserMedia = navigator.getUserMedia || 。
3、navigator.webkitGetUserMedia || navigator.mozGetUserMedia; //Google。
以上是关于在html5中使用navigator.getUserMedia打开相机，要怎样进行关闭？的主要内容，如果未能解决你的问题，请参考以下文章