无法通过flask-socketIO服务器在HTML客户端中显示来自python客户端的视频流答案

【问题标题】：Cant display my video stream from a python client in the HTML client through a flask-socketIO server无法通过flask-socketIO服务器在HTML客户端中显示来自python客户端的视频流
【发布时间】：2019-08-09 08:03:20
【问题描述】：

我想在 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....... 我假设是编码图像开始

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

提前致谢

【问题讨论】：

标签： javascript python socket.io opencv3.0 flask-socketio

【解决方案1】：

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);

【讨论】：