2022-08-30(开启关闭摄像头实例demo直接拷贝)
/场景:考试过程中 随机抽取题目拍照
//重点: 拍照功能耗费性能 所以 每一道随机题目不管做多少遍 都只拍照一次即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>camera</title>
<style>
#camera {
float: left;
margin: 20px;
}
#contentHolder {
width: 300px;
height: 300px;
margin-bottom: 10px;
}
#btn_snap {
margin: 0 auto;
border: 1px solid #f0f0f0;
background: #5CACEE;
color: #FFF;
width: 100px;
height: 36px;
line-height: 36px;
border-radius: 8px;
text-align: center;
cursor: pointer;
cursor: pointer;
/*禁止选择*/
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently not supported by any browser */
}
#imgBoxxx {
width: 200px;
margin: 60px 20px 20px;
/* border-radius: 50%; */
}
</style>
</head>
<body>
<div class="div1">dgdfgb</div>
<div id="camera">
<div id="contentHolder">
<video id="video" width="300" height="300" autoplay></video>
<canvas style="display:none;" id="canvas" width="300" height="300"></canvas>
</div>
<!-- <div id="btn_snap" onclick="myfunction()">拍照</div> -->
<ul>
<li data-id="1">11111111</li>
<li data-id="2">11111112</li>
<li data-id="3">11111113</li>
<li data-id="4">11111114</li>
<li data-id="5">11111115</li>
<li data-id="6">11111116</li>
<li data-id="7">11111117</li>
<li data-id="8">11111118</li>
<li data-id="9">11111119</li>
<li data-id="10">11111110</li>
<li data-id="11">1111111111</li>
<li data-id="12">11111112</li>
<li data-id="13">11111113</li>
<li data-id="14">11111114</li>
<li data-id="15">11111115</li>
<li data-id="16">11111116</li>
<li data-id="17">11111117</li>
<li data-id="18">11111118</li>
<li data-id="19">11111119</li>
<li data-id="20">11111120</li>
</ul>
<!-- <div id="btn_snap" onclick="myfunction()">拍照</div> -->
</div>
<script>
var questionNum; //题标
var oa = [];
var faceRandomNumArr = [];
for (var i = 0; i < 6; i++) {
var arrNum = parseInt(Math.random() * 10-3) + 2;
var flag = true;
for (var j = 0; j <= faceRandomNumArr.length; j++) {
if (arrNum == faceRandomNumArr[j]) {
flag = false;
break;
}
}
if (flag) {
faceRandomNumArr.push(arrNum);
} else {
i--;
}
}
console.log(faceRandomNumArr,'===00000')
var itemli = document.getElementsByTagName('li')
for (var i = 0; i < itemli.length; i++) {
itemli[i].index = i; //给每个li定义一个属性索引值，赋
itemli[i].onclick = function() {
console.log(this.getAttribute('data-id')); // \n换行 索引值从0开始
questionNum = this.getAttribute('data-id')
for (let i = 0; i < faceRandomNumArr.length; i++) {
if (faceRandomNumArr[i] == questionNum) {
//重点:拍照功能耗费性能 所以 每一道随机题目不管做多少遍 都只拍照一次即可
判断如果已经拍照过 那么就不再开启摄像头
if (oa.includes(questionNum)) {
return false
}
myfunction()
}
}
}
}
// navigator.mediaDevices.getUserMedia(constraints)
// .then(function(stream) {
// var video = document.querySelector('video');
// // 旧的浏览器可能没有srcObject
// if ("srcObject" in video) {
// video.srcObject = stream;
// } else {
// //避免在新的浏览器中使用它，因为它正在被弃用。
// video.src = window.URL.createObjectURL(stream);
// }
// video.onloadedmetadata = function(e) {
// video.play();
// };
// })
// .catch(function(err) {
// console.log(err.name + ": " + err.message);
// });
function myfunction() {
var canvas = document.getElementById("canvas"),
pzBtn = document.getElementById("btn_snap"),
context = canvas.getContext("2d"),
video = document.getElementById("video");
// alert('该页面会调用您的摄像头')
// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
// 使用getUserMedia，因为它会覆盖现有的属性。
// 这里，如果缺少getUserMedia属性，就添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function(constraints) {
// 首先获取现存的getUserMedia(如果存在)
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// 有些浏览器不支持，会返回错误信息
// 保持接口一致
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
//否则，使用Promise将调用包装到旧的navigator.getUserMedia
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
var constraints = {
audio: false,
video: {
width: 720,
height: 720
}
}
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
var video = document.querySelector('video');
// 旧的浏览器可能没有srcObject
if ("srcObject" in video) {
video.srcObject = stream;
} else {
//避免在新的浏览器中使用它，因为它正在被弃用。
video.src = window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function(e) {
video.play();
sessionStorage.setItem('flag', questionNum)
//拍照成功的都存储到数组中
oa.push(sessionStorage.getItem('flag'))
console.log(oa, '===')
setTimeout(function() {
var date = new Date().getTime();
// 点击，canvas画图
context.drawImage(video, 0, 0, 300, 300);
// 获取图片base64链接
var image = canvas.toDataURL('image/png');
// 定义一个img
var img = new Image();
//设置属性和src
img.id = "imgBox";
img.src = image;
//将图片添加到页面中
document.body.appendChild(img);
window.mediaStreamTrack = typeof video.srcObject.stop === 'function' ? video
.srcObject : video.srcObject.getTracks()[0];
window.mediaStreamTrack && window.mediaStreamTrack.stop();
// base64转文件
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {
type: mime
});
}
console.log(date);
console.log(dataURLtoFile(image, date + '.png'));
}, 500)
};
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});
};
</script>
</body>
</html>
