Python读视频流发送给前端H5呈现-websocket实现方法
今天一个同事用Python做了一个关于机器视觉的处理，他希望处理的视频结果能够在H5页面上实时呈现出来，方便客户通过浏览器查看。折腾了一天终于搞定，现总结方法如下：
需求
Python读视频流进行处理，处理结果呈现在H5网页上，要求延时不能大于0.5秒。
分析
Python处理每一帧的图片，处理好以后发送到前端呈现，所以前端最好使用canvas或img标签呈现图片，通过实时更改canvas或img的图片可以达到视频呈现的效果。通过分析，我们决定使用图片的base64编码作为发送的图片数据，所以最终选择了img标签实现视频呈现。 实时显示图片使用轮询效率太低，我们选择使用node.js搭建WebSocket服务器，Python和JS与WebSocket服务器进行通信实现功能。
步骤
WebSocket服务器
使用node.js实现，需要安装ws（此处有坑，可以看看网上关于node.js中ws的安装方法）。 server.js内容如下：
let WebSocketServer = require(ws).Server,
wss = new WebSocketServer({
port: 8188 });
wss.on(connection, function (ws) {
console.log(客户端已连接);
ws.on(message, function (message) {
wss.clients.forEach(function each(client) {
client.send(message);
});
console.log(message.length);
});
});
需要注意的是：
wss.clients.forEach(function each(client) {
client.send(message);
});
这里需要添加一个广播，网上很多代码都没有写广播，有了广播Python端和JS端就可以监听当前socket服务器中的新消息了。
python端代码
python端代码如下：
通过上面的代码我们可以实现实时视频数据往socket服务器推送。
H5网页代码
H5页面中代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<img id="resImg" src="" />
</div>
<script src="js/jquery-3.3.1.min.js" ></script>
<script>
let ws = new WebSocket("ws://127.0.0.1:8188/");
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>
最后我们通过node.js启动server.js
node server.js
打开h5页面就可以查看python推送过来的视频流了，非常流畅。从目前效果看无论是延时还是帧频都完全可以满足要求。
