为保证项目能正常运行，请使用最新的chrome浏览器。打开浏览器，在浏览器地址中输入chrome://flags/#enable-experimental-web-platform-features ，在 Experimental Web Platform features 这一项点击 “启用” 来开启该实验性的功能。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>人脸识别Demo</title>
    <style>
    * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    #main {
        position: relative;
    }

    .item {
        border: 3px dotted rgba(255, 255, 255, 0.7);
        position: absolute;
    }
    </style>
</head>

<body>
    <div id="main">
        <img id="face-image" src="./index.jpg" alt="image" crossorigin="anonymous" />
    </div>
    <script type="text/javascript">
    window.onload = main();

    function main() {
        const faceDetector = new FaceDetector({ fastMode: true, maxDetectedFaces: 10 });

        const image = document.getElementById('face-image');

        faceDetector.detect(image)
            .then(detectedFaces => {
                console.log(detectedFaces);

                for (var i = detectedFaces.length - 1; i >= 0; i--) {
                    var h = detectedFaces[i].boundingBox.height;
                    var w = detectedFaces[i].boundingBox.width;
                    var l = detectedFaces[i].boundingBox.left;
                    var t = detectedFaces[i].boundingBox.top;

                    var item = "<div class='item' style='width: " + w + "px; height: " + h + "px; top: " + t + "px; left: " + l + "px;'></div>";

                    document.getElementById('main').innerHTML += item;
                }
            })
            .catch((e) => {
                console.error("Face Detection failed, boo.", e);
            });
    }
    </script>
</body>

</html>

ps: 需要自己找一张带人脸图像(多个或单个)图片，或者直接一张集体照。命名为index.jpg