网站建设文案策划,变装 Wordpress 小说,中国工信部备案查询系统,建设个人网站用到的技术本来有一台设备是要搞成无线的形式的#xff0c;设备的摄像头的数据可以在一台局域网连接的平板上查看#xff0c;因为试着使用 RTMP 推流#xff0c;感觉延时太大了#xff0c;而 Webrtc 感觉有太麻烦了#xff0c;所以一开始看到这篇文章使用 UDP 协议进行推流#xff…本来有一台设备是要搞成无线的形式的设备的摄像头的数据可以在一台局域网连接的平板上查看因为试着使用 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 langen
head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleWebSocket 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 idimageContainer img idimageDisplay src# altReceived 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如果是在同一台机子上跑的话就不需要换 ip 地址不然则需要查询 websocket 服务器的 ip 地址并进行替换。
就可以在浏览器的网页中看到设备传过来的视频流了。 延时性低代码也比较简单当然还有很多可以改进的地方。
参考文章
【Python】基于OpenCV与UDP实现的视频流传输
