29、利用 WebSocket 和 FastAPI 实现实时人脸检测系统

利用 WebSocket 和 FastAPI 实现实时人脸检测系统

1. WebSocket 实现差异

WebSocket 的实现与以往有所不同，这里不希望两个任务并发执行，而是希望接收新图像，并在图像传入时持续进行检测。因此， detect 函数有自己的无限循环。通过在该函数上使用 create_task ，将其安排在事件循环中，使其开始处理队列中的图像。然后是常规的 WebSocket 循环，调用 receive 函数。可以说 detect 函数在“后台”运行。同时，要确保在 WebSocket 关闭时取消该任务，以便正确停止无限循环。

2. 从浏览器通过 WebSocket 发送图像流

要从浏览器捕获图像并通过 WebSocket 发送，主要涉及 JavaScript 代码，具体步骤如下：
1. 启用相机输入并建立 WebSocket 连接 ：借助浏览器的 MediaDevices API 列出设备上所有可用的相机输入，构建一个选择表单，让用户选择要使用的相机。以下是具体的 JavaScript 实现：

window.addEventListener('DOMContentLoaded', (event) => {
  const video = document.getElementById('video');
  const canvas = document.getEleme