使用tracking.js 实现移动端webapp浏览器调用摄像头并检测人脸
东方宜
直接使用 <video id="video" >发现ios的自带浏览器Safari 有问题
解决问题：1.视频不能直接播放（需要触发），2.且直接全屏显示，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tracking.js - face with camera</title>
<link rel="stylesheet" href="assets/demo.css">
<script src="./tracking-min.js"></script>
<script src="./face-min.js"></script>
<!-- <script src="./stats.min.js"></script> -->
<script src="./mouth-min.js"></script>
<style>
video,
canvas {
margin-left: 230px;
margin-top: 120px;
position: absolute;
}
</style>
</head>
<body>
<div class="demo-frame">
<div class="demo-container">
<video id="video" width="500" height="440" preload autoplay loop muted webkit-playsinline='' playsinline=''
x5-playsinline='' x-webkit-airplay='allow'></video>
<!-- <video id="video" width="1000" height="440" preload autoplay loop muted contentType="video/mp4"></video> -->
<canvas id="canvas" width="500" height="440"></canvas>
</div>
</div>
<script>
window.onload = function () {
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
tracking.track('#video', tracker, { camera: true });
tracker.on('track', function (event) {
context.clearRect(0, 0, canvas.width, canvas.height);
event.data.forEach(function (rect) {
context.strokeStyle = '#a64ceb';
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
context.font = '11px Helvetica';
context.fillStyle = "#fff";
context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
});
});
function log(info) {
console.log(info)
// alert(info);
// alert(info);
}
function forceSafariPlayAudio() {
audioEl.load(); // iOS 9 还需要额外的 load 一下, 否则直接 play 无效
audioEl.play(); // iOS 7/8 仅需要 play 一下
}
var audioEl = document.getElementById('video');
// 可以自动播放时正确的事件顺序是
// loadstart
// loadedmetadata
// loadeddata
// canplay
// play
// playing
//
// 不能自动播放时触发的事件是
// iPhone5 iOS 7.0.6 loadstart
// iPhone6s iOS 9.1 loadstart -> loadedmetadata -> loadeddata -> canplay
// audioEl.addEventListener('loadstart', function() {
// log('loadstart');
// }, false);
// audioEl.addEventListener('loadeddata', function() {
// log('loadeddata');
// }, false);
// audioEl.addEventListener('loadedmetadata', function() {
// log('loadedmetadata');
// }, false);
// audioEl.addEventListener('canplay', function() {
// log('canplay');
// }, false);
audioEl.addEventListener('play', function () {
log('play');
// 当 audio 能够播放后, 移除这个事件
window.removeEventListener('touchstart', forceSafariPlayAudio, false);
}, false);
// audioEl.addEventListener('playing', function() {
// log('playing');
// }, false);
// audioEl.addEventListener('pause', function() {
// log('pause');
// }, false);
// 由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio,
// 因此我们通过一个用户交互事件来主动 play 一下 audio.
window.addEventListener('touchstart', forceSafariPlayAudio, false);
// var gui = new dat.GUI();
// gui.add(tracker, 'edgesDensity', 0.1, 0.5).step(0.01);
// gui.add(tracker, 'initialScale', 1.0, 10.0).step(0.1);
// gui.add(tracker, 'stepSize', 1, 5).step(0.1);
};
</script>
</body>
</html>
类似资料：