h5人脸检测自动拍照加百度接口检测

最新推荐文章于 2024-12-13 10:54:02 发布

赞赞007

最新推荐文章于 2024-12-13 10:54:02 发布

阅读量1k

点赞数

文章标签：百度 vue.js webview

本文链接：https://blog.youkuaiyun.com/qq_39509000/article/details/121994061

版权

这是一个使用H5和Vue.js实现的基于百度AI的人脸检测与自动拍照应用。网页通过`<video>`元素捕获前置摄像头的实时画面，并使用`tracking-min.js`和`face-min.js`库进行人脸检测。当检测到人脸后，会提示用户保持静止，等待2秒后自动拍照。照片以Base64格式保存，并可以进一步调用接口进行人脸识别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang=en style="font-size: 37.5px">
<head>
    <meta charset=utf-8>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>百度ai</title>
    <script src="__PUBLIC__/Mobile/face/static/tracking-min.js"></script>
    <script src="__PUBLIC__/Mobile/face/static/face-min.js"></script>
    <script src="__PUBLIC__/Mobile/tccjqcss/lib/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/Mobile/face/static/vue.min.js" type="text/javascript"></script>
</head>
<style>
    .face-capture {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .face-capture video, .face-capture canvas {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 2;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .face-capture canvas {
        z-index: 2;
    }
    .face-capture .img-cover {
        position: absolute;
        height: 10rem;
        width: 10rem;
        z-index: 5;
        margin-top: -2rem;
    }
    .face-capture .rect {
        border: 2px solid #0aeb08;
        position: fixed;
        z-index: 3;
    }
    .face-capture .control-container {
        margin-top: 10rem;
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 4;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .face-capture .title {
        text-align: center;
        color: white;
        font-size: 18px;
        margin-top: 3rem;
    }
    .face-capture .close {
        width: 0.8rem;
        height: 0.8rem;
    }
</style>
<body>
<div id="app">
    <div v-show="showContainer" class="face-capture" id="face-capture">
        <video  ref="refVideo" id="video" autoplay playsinline webkit-playsinline="true"></video>
        <img src="__PUBLIC__/Mobile/face/jiancett.png" id="img" alt="cover"  class="img-cover"/>
        <div class="control-container face-capture">
            <p class="title">{
 {scanTip}}</p>
            <if condition="$beat eq 2">
                <a οnclick="manual()"style=" z-index: 999;">
                <img class