Получение изображения через websocket

Я использую 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);
        }
    }

Какие-нибудь предложения по устранению этого?

Ответ 1

Фокус websockify + websock.js - прозрачная поддержка потоковых двоичных данных (подробнее об этом ниже). Данные, которые вы получаете из очереди приема, уже декодированы base64. Однако схема URI данных ожидает кодировку с кодировкой base64, поэтому вам необходимо кодировать данные изображения в base64. Вы можете использовать встроенный window.btoa() для base64 кодировать двоичную кодированную строку:

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

Или, для большей эффективности вы можете использовать модуль Base64 из include/base64.js, но вам нужно будет передать ему массив байтов, который вы получите от rQshiftBytes:

msg(ws.rQshiftBytes());

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

Что касается использования base64 в websockify:

Websockify использует base64 для кодирования данных для поддержки браузеров, которые не поддерживают двоичные данные напрямую. В дополнение к таким популярным браузерам Hixie, как iOS Safari и настольным Safari, некоторые версии браузеров в дикой природе используют HyBi, но не имеют двоичной поддержки. И, к сожалению, в случае с Chrome у них также была ошибка WebIDL в то же время, которая предотвращает обнаружение двоичной поддержки перед созданием соединения.

Кроме того, основной вариант использования WebSockets для Opera, firefox 3.6-5, IE 8 и 9 - web-socket-js. web-socket-js поддерживает HyBi, но не имеет двоичной поддержки и, вероятно, не будет, потому что большинство старых браузеров, на которые он нацелен, не поддерживают родные двоичные типы (Blob и Typed Arrays).

Доля рынка браузеров, поддерживающих HyBi и двоичные данные, в настоящее время довольно низкая. Однако в будущем Websockify обнаружит (либо путем обнаружения объекта, либо обнаружения версии браузера), поддерживает ли браузер двоичные данные и использует их напрямую, без необходимости кодирования/декодирования base64.

Задержки (и ЦП) накладных расходов на кодирование/декодирование base64 довольно низки и обычно вымываются за счет сетевых задержек. Накладные расходы на базовую обработку данных с кодировкой base64 составляют около 25% (т.е. исходные данные становятся на 33% больше), но он дает вам двоичные данные через WebSockets в основном во всех браузерах в дикой природе (с помощью web-socket-js polyfill/shim который используется прозрачно при помощи websockify при необходимости).