![](/img/trans.png)
[英]Python Flask-socketio working, not receiving data from JS client
[英]Cant display my video stream from a python client in the HTML client through a flask-socketIO server
我想在 HTML 页面中显示来自我的 jetson nano 的视频流,但似乎我无法使其正常工作。 我在python中有一个flask-socketIO服务器,我有我的python客户端将每一帧发送到这个服务器(这是我的网络摄像头连接的地方),然后服务器将数据广播到flask-socketIO渲染的HTML客户端中浏览器控制台,我可以看到数据,但没有显示图像。
我还尝试直接从服务器显示回数据而不广播到 HTML,但这是同样的问题。 使用 openCV 我无法使用 imshow 显示图像,但我可以使用 imwrite 将帧保存到磁盘。
这是来自我的 python 客户端的代码,基本上,它检索帧,将其转换为字节,然后编码为 base 64 并使用 socketIO 发出
while(stream):
ret, frame = cap.read()
_, buff = cv2.imencode('.jpeg', frame)
jpg_as_text = base64.b64encode(buff)
socketIO.emit('my image data', {'image': True, 'buff': jpg_as_text})
这里是服务器端。 它只是将数据从 python 客户端广播到 HTML 客户端:
@socketio.on('my image data')
def broadcast_img(data):
emit('imageStream', data, broadcast=True)
这是由服务器呈现的 HTML 客户端:
var ctx = document.getElementById("myStream").getContext('2d');
var socket = io();
socket.on('imageStream', function(data) {
console.log(data)
if(data.image) {
var img = new Image();
img.src = 'data:image/jpeg;base64,' + data.buff;
ctx.drawImage(img, 0, 0);
}
});
当我打开浏览器并检查控制台时,我可以看到 buff 的值。 它以 /9j/4AAQ 开始......我认为这是编码图像
有人知道为什么我不能显示图像吗?
提前致谢
data.buff
是一个ArrayBuffer
,您必须将其解码为字符串:
const decoder = new TextDecoder();
img.src = 'data:image/jpeg;base64,' + decoder.decode(data.buff);
此外,您不必对图像数据进行 Base64 解码。 您可能只发出二进制数据
_, buff = cv2.imencode('.jpeg', frame)
socketIO.emit('my image data', {'image': True, 'buff': BytesIO(buff).getvalue()})
并像这样在客户端上使用它:
const arrayBufferView = new Uint8Array(data.buff);
const blob = new Blob([arrayBufferView], {type: 'image/jpeg'});
img.src = URL.createObjectURL(blob);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.