Python+WebSocket+Nodejs实现在网页中显示图像数据_websocket显示图像

作者：weixin_40725706 | 2024-03-07 11:19:50

踩

websocket显示图像

参考：Python读视频流发送给前端H5呈现-websocket实现方法

WebSocket + Nodejs 的简单使用

通过Python获取图像数据并发送给服务器，然后浏览器页面从服务器获取数据并显示，原理似乎就是这样，对前端的了解只是知道有HTML、CSS、JS这几个东西

Nodejs环境配置

先是安装Nodejs,参考的Node.js 安装配置

然后安装websocket模块，运行cmd到Nodejs安装目录下执行命令

-g是全局安装

--registry=https://registry.npm.taobao.org是淘宝镜像，毕竟公司电脑不能科学上网

三个我都试了，所以也不知道到底是哪个起作用的，但反正能用


npm install -g ws --registry=https://registry.npm.taobao.org
npm install -g websocket --registry=https://registry.npm.taobao.org
npm install -g nodejs-websocket --registry=https://registry.npm.taobao.org

然后还得下个jQuery，不然浏览器里的JS报错

npm install -g jquery --registry=https://registry.npm.taobao.org

装完后目录下会有个文件夹，里边有个jquery.min.js，复制到Nodejs安装目录下，主要是客户端html文件也在这使用时不用加路径

创建服务器

在Nodejs安装目录下新建一个服务端server.js文件：


let WebSocketServer = require('ws').Server,
    wss = new WebSocketServer({ port: 3303 });
 
wss.on('connection', function (ws) {
    console.log('客户端已连接');
    ws.on('message', function (message) {
        wss.clients.forEach(function each(client) {
            client.send(message);
        });
        console.log(message);
    });
});

创建客户端页面

然后再新建一个客户端页面HTML文件：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <img id="resImg" src="" />
</div>
<script src="jquery.min.js" ></script>
<script>
        let ws = new WebSocket("ws://127.0.0.1:3303/");
        ws.onopen = function(evt) {
            console.log("Connection open ...");
            ws.send("Hello WebSockets!");
        };
 
        ws.onmessage = function(evt) {
            $("#resImg").attr("src",evt.data);
            console.log( "Received Message: " + evt.data);
           // ws.close();
        };
 
        ws.onclose = function(evt) {
            console.log("Connection closed.");
        };
 
</script>
</body>
</html>

最后各种乱七八糟文件：

通过Python采集和发送图像

python要先安装websocket模块，用pip进行安装

pip install websockets -i https://pypi.tuna.tsinghua.edu.cn/simple

然后新建脚本文件：


import asyncio
import websockets
import base64
from cv2 import cv2
import numpy as np
import time
 
 
tex_name=["test0.jpg","test1.jpg","test2.jpg"]
 
# 向服务器端实时发送视频流帧数据
async def send_msg(websocket):
    while 1:
        for i in range(len(tex_name)):
            time.sleep(1)
            img = cv2.imread(tex_name[i])
            
            img_encode = cv2.imencode('.jpg', img)[1]# '.jpg'表示把图像数据以jpg格式编码
 
            #cv2.imshow("Display",img)
            #cv2.waitKey(1)
 
            data = np.array(img_encode)
            img = data.tostring()
 
            # 以base64进行编码并发送给服务端
            img = base64.b64encode(img).decode()
            await websocket.send("data:image/jpeg;base64,"+img)
 
# 客户端主逻辑
async def main_logic():
    async with websockets.connect('ws://127.0.0.1:3303') as websocket:
        await send_msg(websocket)
 
asyncio.get_event_loop().run_until_complete(main_logic())

循环读取3张本地图片并转为base64编码发送给服务器

运行

开启服务器

cmd中cd到Nodejs安装目录并开启服务器

node server.js

开启客户端

用浏览器打开就行

cmd中会打印提示

但是收不到图像数据

运行脚本

运行python脚本，向服务器发送图像数据

浏览器页面中显示出图像，cmd中打印出图像的base64编码

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/205290