Получение изображения через веб-сокет

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.Вы можете использовать встроенный 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-5IE 8 и 9 - это web-socket-js .web-socket-js поддерживает HyBi, но не имеет бинарной поддержки и, вероятно, не будет, потому что большинство старых браузеров, на которые он ориентирован, не поддерживают собственные двоичные типы (Blob и Typed Arrays).

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

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