Python+WebSocket+Nodejs实现在网页中显示图像数据_websocket 图片流网页展示-CSDN博客

本文链接：https://blog.csdn.net/qq_36917144/article/details/117292871

参考：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编码发送给服务器