使用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>

使用tracking.js 实现移动端webapp浏览器调用摄像头并检测人脸相关推荐

【javascript】浏览器调用摄像头扫二维码踩坑记录
前言最近做一个项目需要用浏览器调用摄像头扫二维码,然后就踩了几个坑记录下. 踩坑记录我一开始发现了zxing这个库,他分为https://www.npmjs.com/package/@zxing/ ...
浏览器调用摄像头getUserMedia
浏览器调用摄像头getUserMedia 2018年启动QQ浏览器会启动摄像头的新闻闹得沸沸扬扬. 前段时间公司让研究一下这个浏览器启用摄像头的功能,希望能够实现浏览器网页扫描二维码的功能.现在写下来 ...
服务器项目前端调用摄像头失败,浏览器调用摄像头失败：NotSupportedError Only secure origins are allowed...
通过浏览器调用摄像头失败:NotSupportedError Only secure origins are allowed 错误报告 NotSupportedError Only secure or ...
chrome浏览器调用摄像头
chrome浏览器调用摄像头 //var 是定义变量var canvans = document.getElementById("canvas");var video = docu ...
解决PC浏览器调用摄像头失败(本地可以,线上失败)
解决PC浏览器调用摄像头失败(本地可以,线上失败) 原因:浏览器为了安全http协议获取不到摄像头权限解决方案 1.切换https 如果域名可以使用https,切换为https即可 2.修改浏览器设 ...
如何让浏览器调用摄像头时，摄像头读取的是本地文件而不是进行摄像
如何让浏览器调用摄像头时,摄像头显示的画面是选择好的本地视频文件开始播放,而不是开始摄像,有偿问答
调用摄像头_摄像头 | 浏览器调用摄像头并实现截图保存的效果
为了在QT上实现打开摄像头,拍照等操作.就写了这个. 1. 写一个vue组件先写一个vue的组件,其内容基本如下: <el-button type="primary" @ ...
js－移动端android浏览器中input框被软键盘遮住的问题解决方案
我遇到的问题:在一个页面里有一个弹出层之前我给我的最外层加了固定定位用了下面的方法也不好使:没有办法我将之改为绝对定位层级变高在加上一个顶部标签通过js计算顶部高度来实现满屏遮挡: <sect ...
JS通过浏览器调用摄像头，基于windows操作系统。
方法一: <!doctype html> <html lang="en"> <head><title>GET VIDEO</t ...

使用tracking.js 实现移动端webapp浏览器调用摄像头并检测人脸

使用tracking.js 实现移动端webapp浏览器调用摄像头并检测人脸相关推荐

最新文章

热门文章