<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>摄像头</title>
<style type="text/css">
#video{
position: fixed;
left: -999999px;
top: -999999px;
}
</style>
</head>
<body>
<div>
<p>
<button onclick="openMedia()">打开</button>
<button onclick="closeMedia()">关闭</button>
</p>
<video id="video" class="bg"></video>
<canvas id="qr-canvas"></canvas>
</div>
<script type="text/javascript">
var video = document.querySelector('video');
var text = document.getElementById('text');
var canvas1 = document.getElementById('qr-canvas');
var context1 = canvas1.getContext('2d');
var mediaStreamTrack;
// 一堆兼容代码
// window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
// if (navigator.mediaDevices === undefined) {
// navigator.mediaDevices = {};
// }
// if (navigator.mediaDevices.getUserMedia === undefined) {
// navigator.mediaDevices.getUserMedia = function(constraints) {
// var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
// if (!getUserMedia) {
// return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
// }
// return new Promise(function(resolve, reject) {
// getUserMedia.call(navigator, constraints, resolve, reject);
// });
// }
// }
//摄像头调用配置
var mediaOpts = {
audio: false,
video: true,
// video: {
// facingMode: "environment"
// } // 或者 "user"
video: { 500, height: 500 }
// video: { facingMode: { exact: "environment" } }// 或者 "user"
}
// 回调
function successFunc(stream) {
mediaStreamTrack = stream;
video = document.querySelector('video');
if ("srcObject" in video) {
video.srcObject = stream;
} else {
video.src = window.URL && window.URL.createObjectURL(stream) || stream
};
video.play();
canvas_play();
}
// canvas播放
function canvas_play(){
canvas1.height = video.videoHeight ;
canvas1.width = video.videoWidth ;
context1.fillRect(0,0,canvas1.width,canvas1.height)
context1.drawImage(video,0,0,canvas1.width,canvas1.height);
setTimeout(()=>{
if(!video.paused){
canvas_play();
}
},100)
}
function errorFunc(err) {
alert(err.name);
}
// 正式启动摄像头
function openMedia() {
navigator.mediaDevices.getUserMedia(mediaOpts).then(successFunc).catch(errorFunc);
}
//关闭摄像头
function closeMedia() {
video.pause();
context1.fillStyle = "deeppink";
context1.clearRect(0, 0, canvas1.width, canvas1.height)
mediaStreamTrack.getVideoTracks().forEach(function(track) {
track.stop();
})
}
</script>
</body>
</html>