通过websocket接收图像

Question

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

我认为我已经设法成功从我的python服务器发送图像,但我无法将图像显示到我的画布.

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

到现在为止我有:

开启消息功能.当我发送图像时,我MESSAGERECEIVED在控制台中得到12

  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

关于在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透明地使用).