图片传输服务器img网页播放,Python使用websocket将图片流推送至服务端在浏览器播放视频...

本文介绍了一种使用Python的cv2库获取摄像头视频帧,经过处理后通过websocket传输到服务端,服务端再将图片帧发送给客户端在网页上实现视频播放的方法。通过调整图片质量和带宽,可以实现不同清晰度的视频流。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先说下实现原理,如下图:

90e00b021236

001.png

Python使用cv2拉取摄像头的视频帧,压缩、解码、编码等处理后将图片base64编码后通过websocket发送给服务端,服务端将此帧图片存下来,当有客户端请求图片数据时服务端不断地将图片帧发送给请求websocket客户端。客户端不断的刷新图片以达到视频播放的效果。

可以根据代码中quality参数设置图片的质量4流畅3高清2标清1超清,本人测试在1M带宽的网络环境可以达到1秒10帧、延迟低的效果只是画面效果不好。标清则需要大约5M带宽,高清大概需要10M带宽,超清需要20M带宽。

Python端代码如下:

#向服务端发送数据的线程

import cv2

import base64

import websocket

import threading

class SendThread (threading.Thread):

def __init__(self, video_url, ws_server_url, camera_id):

threading.Thread.__init__(self)

#"rtsp://admin:a1234567@192.168.8.11:554/h264/ch1/main/av_stream"

self._video_url = video_url

self._ws = None

self._ws_server_url = ws_server_url

self._capture = None

self._send = True

#视频播放质量4流畅3标清2高清1超清<

### Python 处理 RTSP 视频流转码并通过 WebSocket 发送至客户端 要实现将 RTSP 流转码并通过 WebSocket 传输浏览器端,并在 HTML Canvas 上渲染,可以按照以下方法完成: #### 后端部分:使用 `opencv` 和 `websocket_server` 1. **读取 RTSP 流** 使用 OpenCV 的 VideoCapture 功能可以从 RTSP 地址捕获视频帧。每帧都可以视为一张图片,随后可以通过编码压缩后发送给客户端。 ```python import cv2 import numpy as np cap = cv2.VideoCapture("rtsp://your_rtsp_url") # 替换为实际的 RTSP URL if not cap.isOpened(): print("无法打开RTSP流") exit() while True: ret, frame = cap.read() if not ret: break _, buffer = cv2.imencode('.jpg', frame) # 将帧转换为 JPEG 编码 jpg_as_text = base64.b64encode(buffer).decode('utf-8') # 转换为 Base64 字符串以便于传输 yield jpg_as_text # 返回每一帧的数据供后续处理 ``` 2. **设置 WebSocket 服务器** 利用 `websocket_server` 库创建一个简单的 WebSocket 服务端,用于接收来自前端的请求并将视频推送到客户端。 ```python from websocket_server import WebsocketServer import base64 PORT = 8124 def new_client(client, server): # 当有新的客户端连接时触发 print(f"New client connected and was given id {client['id']}") def client_left(client, server): # 客户端断开连接时触发 print(f"Client({client['id']}) disconnected") def message_received(client, server, message): # 收到来自客户端的消息时触发 pass server = WebsocketServer(host="127.0.0.1", port=PORT) server.set_fn_new_client(new_client) server.set_fn_client_left(client_left) server.set_fn_message_received(message_received) def send_frame(server, frame_data): server.send_message_to_all(frame_data) # 广当前帧数据 try: video_stream_generator = read_rtsp_frames() # 假设这是上面定义的函数 for frame in video_stream_generator: send_frame(server, f"data:image/jpeg;base64,{frame}") # 构造消息并广 except KeyboardInterrupt: pass server.run_forever() ``` #### 前端部分:通过 WebSocket 接收数据并在 Canvas 渲染 1. **建立 WebSocket 连接** 在 HTML 页面中引入 JavaScript 来管理 WebSocket 链接和 Canvas 绘制逻辑。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>RTSP Stream Viewer</title> </head> <body> <canvas id="videoCanvas"></canvas> <script> const canvas = document.getElementById('videoCanvas'); const ctx = canvas.getContext('2d'); let ws; function connectWebSocket() { ws = new WebSocket(`ws://${window.location.host}/ws`); ws.onmessage = function(event) { const img = new Image(); img.src = event.data; // 解析从服务器发来的Base64字符串 img.onload = () => { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); // 将图像绘制到Canvas上 }; }; ws.onerror = function(error) { console.error("WebSocket Error:", error); }; ws.onclose = function() { setTimeout(connectWebSocket, 3000); // 如果连接关闭,则重试重新连接 }; } window.addEventListener('load', connectWebSocket); </script> </body> </html> ``` 以上代码实现了完整的流程:从 RTSP 源读取视频流、将其压缩为 JPEG 图像并通过 WebSocket 发送给前端页面;最后利用 HTML5 Canvas API 实现实时渲染效果[^1][^2]。 --- #### 性能优化建议 为了进一步提升系统的效率与稳定性,可考虑以下几个方面: - **降低分辨率或比特率**:减少单张图片大小从而减轻带宽压力。 - **启用硬件加速编解码器**:如果可能的话,采用 GPU 加速技术加快图像处理速度。 - **选用更高效的压缩算法**:比如 H.264 或 VP9 等现代标准替代传统的 MPEG/JPEG 方案。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值