通过websocket接收图像 [英] Receiving image through websocket

问题描述

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

I am using websockify to display images from a python server to a HTML5 canvas.

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

I think that I have manage to successfully send images from my python server but I am not able to display the images to my canvas.

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

I think the problem has to do with the number of bytes that I am trying to display on canvas and I believe that I am not waiting until the whole image is received and then displaying the image to the canvas.

直到现在我有：

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

The on message function. When I sent an image I get 12 MESSAGERECEIVED in console

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

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

The msg function where I receive the string and I am trying to display it on canvas. I invoking the method 12 times for each picture. The format of the sting is '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);
        }
    }

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

Any suggestions on how to fix this?

推荐答案

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

The focus of websockify+websock.js is to transparently support streaming binary data (more on that below). The data you get off the receive queue is already base64 decoded. However, the data URI scheme is expecting a base64 encoded string so you need to encode the image data to base64. You can use the builtin window.btoa() to base64 encode a binary coded string:

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

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

Or, for greater efficiency you can use the Base64 module from include/base64.js but you will need to pass it an array of bytes as your would get from 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错误，这会阻止在建立连接之前检测二进制支持。

Websockify uses base64 to encode the data to support browsers which don't support binary data directly. In addition to such popular Hixie only browsers such as iOS Safari and desktop Safari, some browsers versions in the wild use HyBi but are missing binary support. And unfortunately, in the case of Chrome, they also had a WebIDL bug around that same time which prevents detecting binary support before making a connection.

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

Also, the main option for using WebSockets on Opera, firefox 3.6-5, IE 8 and 9 is web-socket-js. web-socket-js supports HyBi but does not have binary support and probably won't because most of the older browsers that it targets don't support native binary types (Blob and Typed Arrays).

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

The market share of browsers which support HyBi and binary data is currently pretty low. However, in the future, Websockify will detect (either by object detection or browser version detection) whether the browser supports binary data and use that support directly without the need for base64 encode/decode.

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

The latency (and CPU) overhead of base64 encode/decode is pretty low and usually washed out by network latencies anyhow. The bandwidth overhead of base64 encoded data is about 25% (i.e. raw data becomes 33% larger), but it does give you binary data over WebSockets on basically all browsers in the wild (with the web-socket-js polyfill/shim which is used transparently by websockify if needed).

这篇关于通过websocket接收图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！