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

最新推荐文章于 2024-05-22 11:54:15 发布

blueBings

最新推荐文章于 2024-05-22 11:54:15 发布

阅读量1.2k

点赞数

分类专栏： js 文章标签： ios播放器 Safari浏览器自动播放人脸识别 tracking.js

本文链接：https://blog.csdn.net/mentalitys/article/details/119350950

版权

js 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

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

blueBings

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用tracking.js 实现移动端webapp浏览器调用摄像头并检测人脸

直接使用<videoid="video" >发现ios的自带浏览器Safari 有问题解决问题：1.视频不能直接播放（需要触发），2.且直接全屏显示，<!doctype html><html><head> <meta charset="utf-8"> <title>tracking.js - face with camera</title> <link rel="style...
复制链接

扫一扫

专栏目录