# VideoRectImages
**Repository Path**: sunliusen/video-rect-images
## Basic Information
- **Project Name**: VideoRectImages
- **Description**: 播放视频并实时的框出视频中的人脸
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-04-19
- **Last Updated**: 2025-07-14
## Categories & Tags
**Categories**: Uncategorized
**Tags**: 前端视频解析
## README
# video-rect-images
## 采集视频中的人脸并框出
- 本`Demo`是通过face-api实现的。具体内容可前往Github：[face-api](https://github.com/vladmandic/face-api)
- 注： 返回大部分使用的都是`base64`
- `Demo`地址放在了码云上：[video-rect-images](https://gitee.com/sunliusen/video-rect-images)
## 目录结构
```
video-rect-images/
├── face-api.js-master/
│ ├── weights/ 模型
│ │ └── ...
├── js/ 脚本
│ └── ...
└── index.html
```
## 最后的效果图
# 一起来看看`AI`生成的文档
## 视频人脸检测项目说明
## 一、项目概述
该项目实现了一个在网页上对视频进行人脸检测的功能，通过使用 `face-api.js` 库，能够检测视频中的人脸，并在视频上绘制人脸检测框，同时将检测到的人脸区域截取并以图片形式展示在页面上。
## 二、HTML 结构
**页面标题与样式**
在 `` 部分，设置页面标题为 “视频人脸检测”。
定义了一些 CSS 样式，包括：
视频容器 `#videoContainer` 的样式，设置为相对定位；
视频 `#video` 和画布 `#canvas` 的样式，设置为绝对定位，并且 `#canvas` 禁止指针事件；
播放按钮 `#playBtn` 的样式；
展示截取人脸图片的区域 `#show-people` 中图片的样式。
**页面内容**
在 `` 部分：
有一个播放按钮 ``。
视频容器 `` 内包含：
一个 `