通过 websocket 接收图片

Question

我正在使用websockify 将图像从 python 服务器显示到 HTML5 画布。

我认为我已经成功地从我的 python 服务器发送图像，但我无法将图像显示到我的画布上。

我认为问题与我试图在画布上显示的字节数有关，我相信我不会等到收到整个图像后再将图像显示到画布上。

到目前为止，我有：

on 消息功能。当我发送图像时，我在控制台中得到 12 MESSAGERECEIVED

  ws.on('message', function () {
    //console.log("MESSAGERECEIVED!")
            msg(ws.rQshiftStr());
  });

我收到字符串并尝试在画布上显示它的 msg 函数。我为每张图片调用该方法 12 次。刺痛的格式是'xÙõKþ°pãüCY：

function msg(str) {
        //console.log(str);
        console.log("RELOAD");

        var ctx = cv.getContext('2d');
        var img = new Image();
        //console.log(str);
        img.src = "data:image/png;base64," + str;
        img.onload = function () {
            ctx.drawImage(img,0,0);
        }
    }

关于如何解决此问题的任何建议？

Answer 1

websockify+websock.js 的重点是透明地支持流式二进制数据（更多内容见下文）。您从接收队列中获得的数据已经经过 base64 解码。但是，数据 URI 方案需要一个 base64 编码的字符串，因此您需要将图像数据编码为 base64。您可以使用内置的 window.btoa() 对二进制编码字符串进行 base64 编码：

img.src = "data:image/png;base64," + window.btoa(str);

或者，为了提高效率，您可以使用 include/base64.js 中的 Base64 模块，但您需要将一个字节数组传递给它，就像您从 rQshiftBytes 获得的一样：

msg(ws.rQshiftBytes());

img.src = "data:image/png;base64," + Base64.encode(data);  // str -> data

关于base64在websockify中的使用：

Websockify 使用 base64 对数据进行编码以支持不直接支持二进制数据的浏览器。除了诸如 iOS Safari 和桌面 Safari 等流行的仅 Hixie 浏览器外，一些流行的浏览器版本使用 HyBi，但缺少二进制支持。不幸的是，在 Chrome 的情况下，他们大约在同一时间也有一个 WebIDL 错误，这会阻止在建立连接之前检测二进制支持。

此外，在 Opera、firefox 3.6-5、IE 8 和 9 上使用 WebSockets 的主要选项是web-socket-js。 web-socket-js 支持 HyBi，但不支持二进制，并且可能不会，因为它所针对的大多数旧浏览器不支持本机二进制类型（Blob 和类型化数组）。

目前支持 HyBi 和二进制数据的浏览器的市场份额相当低。然而，在未来，Websockify 将检测（通过对象检测或浏览器版本检测）浏览器是否支持二进制数据并直接使用该支持，而不需要 base64 编码/解码。

base64 编码/解码的延迟（和 CPU）开销非常低，并且通常会被网络延迟所抵消。 base64 编码数据的带宽开销约为 25%（即原始数据变大了 33%），但它确实在基本上所有浏览器上通过 WebSockets 为您提供二进制数据（使用 web-socket-js polyfill/shim，即如果需要，websockify 会透明地使用）。