### Python WebSocket 视频传输 客户端服务端 示例代码 #### 一、概述 WebSocket 协议允许客户端和服务端之间的全双工通信通道，在单个 TCP 连接上实现即时交互。虽然 WebSocket 主要用于文本消息传递，也可以通过 Base64 编码等方式来处理二进制数据流，比如视频帧。 #### 二、准备工作 为了简化开发过程并专注于核心功能，建议使用 `websockets` 库作为基础框架[^1]。该库提供了简洁易用的 API 来创建 WebSocket 服务器和客户端应用。 安装依赖项： ```bash pip install websockets numpy opencv-python ``` #### 三、服务端代码示例 以下是简单的 WebSocket 服务器代码片段，能够接收来自客户端发送过来的图像帧，并将其广播给其他连接上的客户端： ```python import asyncio import base64 import cv2 from websockets.server import serve connected_clients = set() async def handler(websocket, path): global connected_clients try: # 将新加入的客户端添加到集合中 connected_clients.add(websocket) async for message in websocket: img_data = base64.b64decode(message.split(",")[1]) nparr = np.frombuffer(img_data, np.uint8) frame = cv2.imdecode(nparr, cv2.IMREAD_COLOR) # 对收到的数据做进一步处理... # 广播给所有已连接的客户端 await asyncio.wait([client.send(f"data:image/jpeg;base64,{message}") for client in connected_clients]) finally: # 当某个客户端断开连接时移除它 connected_clients.remove(websocket) start_server = serve(handler, "localhost", 8765) asyncio.get_event_loop().run_until_complete(start_server) print("Server started at ws://localhost:8765") asyncio.get_event_loop().run_forever() ``` #### 四、客户端代码示例 这里展示了一个基本的 HTML 页面配合 JavaScript 和 OpenCV.js 使用摄像头捕捉实时画面并通过 WebSocket 发送到服务器的方法；同时也展示了如何从服务器获取更新后的图片显示出来。 HTML 文件 (index.html): ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Video Stream via WebSocket</title> <script src="https://docs.opencv.org/4.x/opencv.js"></script> <body> <video id="local_video" autoplay playsinline></video><br/> <img id="remote_image"/> <script type="text/javascript"> let videoElement = document.getElementById('local_video'); navigator.mediaDevices.getUserMedia({ video: true }).then(stream => { videoElement.srcObject = stream; }); const socket = new WebSocket('ws://localhost:8765'); // Convert canvas content into a data URL and send it over the network. function captureFrameAndSend() { let cap = new cv.VideoCapture(videoElement); let mat = new cv.Mat(); cap.read(mat); const image = document.createElement('canvas').getContext('2d'); const imageData = image.getImageData(0, 0, videoElement.videoWidth, videoElement.videoHeight); cv.matToImageData(mat, imageData); image.putImageData(imageData, 0, 0); // Send captured frame as JPEG encoded string to server socket.send(image.canvas.toDataURL('image/jpeg')); setTimeout(captureFrameAndSend, 10); // Capture frames every 10ms } if ('WebSocket' in window) { socket.onopen = () => console.log("Connected!"); socket.onerror = error => console.error(`Error ${error.message}`); socket.onclose = event => console.warn(`Closed! Code:${event.code} Reason:${event.reason}`); socket.onmessage = ({data}) => { document.getElementById('remote_image').src = data; }; captureFrameAndSend(); } else{ alert("Your browser does not support WebSockets."); } </script> </body> </html> ```