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

最新推荐文章于 2025-10-22 03:41:21 发布

原创

最新推荐文章于 2025-10-22 03:41:21 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ios播放器 #Safari浏览器自动播放 #人脸识别 #tracking.js

本文介绍了一种解决iOS Safari浏览器中视频无法自动播放的方法，并提供了一个基于HTML5的示例代码，展示了如何使用tracking.js进行面部跟踪。

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