python 基于 websocket 的简单将视频推流到网页

本来有一台设备是要搞成无线的形式的，设备的摄像头的数据可以在一台局域网连接的平板上查看，因为试着使用 RTMP 推流，感觉延时太大了，而 Webrtc 感觉有太麻烦了，所以一开始看到这篇文章使用 UDP 协议进行推流，感觉挺有趣的。

但是因为我们要最后显示在 web 端，但是 web 使用 websocket，所以就使用 websocket 来进行推流了。

在这里插入图片描述
大体的架构图如上，带有摄像头的设备起一个 websocket server 的 python 服务，然后一个 html 的页面和这个服务器进行 websocket 连接，然后服务器就不断地推送帧图像的字节流给 web 客户端，在 html 页面就可以看到 websocket 服务器的摄像头的视频了。

在带摄像头的设备上启动这段 python 代码，作为 websocket 服务器。

import asyncio  
import cv2  
import websockets  
import numpy as np  async def camera_stream(websocket, path):  cap = cv2.VideoCapture(0) try:  while True:  ret, frame = cap.read()  if not ret:  break  buffer = cv2.imencode('.jpg', frame)[1]  await websocket.send(buffer.tobytes())  await asyncio.sleep(0.05)  finally:  cap.release()  start_server = websockets.serve(camera_stream, "0.0.0.0", 8080)  asyncio.get_event_loop().run_until_complete(start_server)  
asyncio.get_event_loop().run_forever()

在另外一个设备新建一个 html 文件，并打开

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>WebSocket Image Receiver</title>  <style>  #imageContainer {  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  height: 100vh;  }  img {  max-width: 100%;  max-height: 90vh;  }  </style>  
</head>  
<body>  <div id="imageContainer">  <img id="imageDisplay" src="#" alt="Received Image">  </div>  <script>  const socket = new WebSocket('ws://0.0.0.0:8080');  const imageElement = document.getElementById('imageDisplay');  socket.onopen = function(event) {  console.log('Connected to the WebSocket server.');  };  socket.onmessage = function(event) {  const imgBlob = new Blob([event.data], { type: 'image/jpeg' });  const imgUrl = URL.createObjectURL(imgBlob);  imageElement.src = imgUrl;  };  socket.onerror = function(error) {  console.error('WebSocket Error:', error);  };  socket.onclose = function(event) {  console.log('Disconnected from the WebSocket server.');  };  </script>  
</body>  
</html>