无法通过flask-socketIO服务器从HTML客户端中的python客户端显示我的视频流

Question

我想将我的jetson nano的视频流显示在HTML页面中，但看来我无法使其工作如我所愿。我在python中有flask-socketIO服务器，我有我的python客户端，它将每个帧发送到该服务器（这是我的网络摄像头所在的位置），然后服务器将数据广播到flask-socketIO渲染的HTML客户端在浏览器控制台中，我可以看到数据，但未显示图像。

我还尝试直接从服务器显示回数据，而不广播到HTML，但这是同样的问题。使用openCV时，我无法使用imshow来显示图像，但是可以使用imwrite将帧保存到磁盘后。

这是我的python客户端中的代码，基本上，它检索帧，将其转换为字节，然后编码为基数为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 ....开头。我认为是编码图像

有人知道为什么我不能显示图像吗？

提前感谢

我想将我的jetson nano的视频流显示在HTML页面中，但看来我无法使其工作如我所愿。我在python中有flask-socketIO服务器，我在使用python客户端，...

Answer 1

[data.buff是您必须解码为字符串的ArrayBuffer：