利用HTML5 MediaDevices API调用手机摄像头并结合JavaScript库实现人脸识别
warning:
这篇文章距离上次修改已过435天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html>
<head>
<title>人脸识别示例</title>
<script src="path/to/clmtrackr.js"></script>
<script src="path/to/clm.js"></script>
<style>
#videoElement {
width: 320px;
height: 240px;
}
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<video id="videoElement" autoplay></video>
<canvas id="canvas"></canvas>
<script>
let video = document.getElementById('videoElement');
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
let tracker = new clm.tracker();
let ctrack = new clm.tracker({ useWebWorker: true });
ctrack.init();
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
.then(function(stream) {
video.srcObject = stream;
})
.catch(function(err) {
console.log("错误： " + err);
});
}
setInterval(function() {
context.clearRect(0, 0, canvas.width, canvas.height);
if (ctrack.getState() === 3) {
ctrack.draw(context);
let positions = ctrack.getCurrentPosition();
console.log(positions);
}
}, 10);
</script>
</body>
</html>这个示例代码展示了如何使用HTML5 MediaDevices API获取视频流，并将其显示在<video>元素中。同时，它使用了setInterval方法和clmtrackr库来实时检测视频中的脸部并绘制关键点，实现了人脸识别的功能。这个示例简洁明了，并且注重于教学如何将现代的API和库结合使用。
评论已关闭