h5前端人脸识别
调用摄像头,获取视频流,并转成base64文件,清测可用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>人脸识别</title>
</head>
<style>
.checkagain {
background-color: #f44242;
height: 35px;
position: fixed;
width: 90%;
margin-left: 5%;
transform: translateY(2.5%);
border-radius: 3px;
font-size: 14px;
text-align: center;
line-height: 35px;
bottom: 70px;
color: #ffffff;
}
.videodiv {
width: 200px;
height: 200px;
background-color: #999999;
border-radius: 100px;
margin-top: 30px;
margin-left: calc((100% - 200px) / 2);
overflow: hidden;
}
.video {
position: relative;
left: -100px;
}
</style>
<body>
<div class="videodiv">
<video id="video" controls="false" muted="true" width="400px" class="video"></video>
</div>
<div class="checkagain" onclick="startRecord()">开始录制</div>
<div class="checkagain" style="bottom: 25px;" onclick="stopRecord()">结束录制</div>
<script type="text/javascript">
var video = document.querySelector('video');
var mediaRecorder
var recorderFile
var mediaStream
var stopRecordCallback
openCamera()
function startRecord() {
mediaRecorder.start();
setTimeout(() => {
console.log('setTimeout')
stopRecord(function() {
console.log(recorderFile);
blobToBase64(recorderFile).then(function(base64) {
console.log(base64);
});
console.log("录制成功");
}, mediaStream);
}, 4 * 1000);
}
function openCamera() {
getUserMedia(function(error, stream) {
if (error) {
console.log(error);
} else {
console.log(stream)
mediaRecorder = new MediaRecorder(stream);
mediaStream = stream;
//存储数据流
let chunks = [];
video.srcObject = stream;
video.play();
mediaRecorder.ondataavailable = function(e) {
console.log('e=',e)
mediaRecorder.blobs.push(e.data);
chunks.push(e.data);
console.log('chunks',chunks)
};
console.log('mid')
mediaRecorder.blobs = [];
mediaRecorder.onstop = function() {
//数据流转换为 blob
recorderFile = new Blob(chunks, { type: mediaRecorder.mimeType });
chunks = [];
if (null != stopRecordCallback) {
stopRecordCallback();
}
};
}
});
}
function getUserMedia(callback) {
console.log("获取设备信息");
// 这个用来控制你需要调取的设备
const constraints = {
audio: true, // 调用录音
video: {
deviceId: "default",
facingMode: "user", //调用前置摄像头
width: 1024,
height: 600
}
};
navigator.getUserMedia =
navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (navigator.getUserMedia) {
// 返回一个promise 需要详细了解https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/mediaDevices 前往这个地址
navigator.mediaDevices
.getUserMedia(constraints)
.then(function(stream) {
console.log("then");
console.log(stream)
callback(false, stream);
})
.catch(function(error) {
callback(error);
});
} else {
callback(new Error("您的浏览器暂不支持视频录制"));
}
}
//停止录制
function stopRecord(callback) {
console.log(mediaStream)
stopRecordCallback = callback;
mediaRecorder.stop();
closeStream(mediaStream);
}
//关闭流
function closeStream(stream) {
const tracks = stream.getTracks();
tracks.forEach(track => {
track.stop();
});
}
function blobToBase64(blob) {
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = e => {
resolve(e.target.result);
};
fileReader.readAsDataURL(blob);
fileReader.onerror = () => {
reject(new Error("文件流异常"));
};
});
}
</script>
</body>
</html>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbcgbj
系列文章
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01