Question

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

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

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

直到现在我有：

开启讯息功能。当我发送图像时，我在控制台中获得了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。您可以使用builtin 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

关于在websockify中使用base64：

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和Typed Arrays）。

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

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

通过websocket接收图像

1 个答案: