fastapi如何使用websocket将摄像头画面推送给前端

1. 首先需要安装 fastapi 和 uvicorn

   pip install fastapi uvicorn

2. 导入 FastAPI 和 WebSocket

   from fastapi import FastAPI, WebSocket

3. 创建 FastAPI 实例和 WebSocket 连接

   app = FastAPI()

   @app.websocket("/ws")
   async def websocket_endpoint(websocket: WebSocket):
       await websocket.accept()
       while True:
           # 获取摄像头的数据
           frame = get_camera_frame()
           # 将数据发送给前端
           await websocket.send_bytes(frame)

4. 在前端使用 JavaScript 接收 WebSocket 数据

   const socket = new WebSocket('ws://localhost:8000/ws');

   socket.addEventListener('open', (event) => {
       console.log('WebSocket connected');
   });

   socket.addEventListener('message', (event) => {
       // 接收到数据后进行处理
       const imageBytes = event.data;
       const imageUrl = `data:image/jpeg;base64,${btoa(String.fromCharCode(...new Uint8Array(imageBytes)))}`;
       // 将图片显示在页面上
       document.getElementById('camera').src = imageUrl;
   });

5. 启动 FastAPI 服务器

   uvicorn main:app --reload --port 8000

6. 在前端打开页面，即可实时接收摄像头数据

   <img id="camera" src="" />