Получать Blob в WebSocket и отображать как изображение в холсте

Я создаю простое приложение WebSocket, которое передает бинарные снимки текущего холста другим слушателям.

Текущий снимок холста отправляется с использованием WebSocket как:

var image = context.getImageData(0, 0, canvas.width, canvas.height);
var buffer = new ArrayBuffer(image.data.length);
var bytes = new Uint8Array(buffer);
for (var i=0; i<bytes.length; i++) {
    bytes[i] = image.data[i];
}
websocket.send(buffer);

Попытка отображения данных на принимающей стороне как:

var bytes = new Uint8Array(blob.size);
var image = context.createImageData(canvas.width, canvas.height);
for (var i=0; i<image.length; i++) {
    image[i] = bytes[i];
}
context.drawImage(image, 0, 0);

Капля получена правильно, но изображение по-прежнему не отображается.

Любая идея?

Ответы

Ответ 1

Установка атрибута binaryType WebSocket сразу после инициализации соединения сделала трюк. Это можно сделать так:

var wsUri = "ws://localhost:8080/whiteboard/websocket";
var websocket = new WebSocket(wsUri);
websocket.binaryType = "arraybuffer";

Это позволит передавать как текстовые, так и двоичные данные.

Ответ 2

Возможно, вы уже видели эту страницу.

http://www.adobe.com/devnet/html5/articles/real-time-data-exchange-in-html5-with-websockets.html

найдите "Получение двоичного сообщения" на этой странице или лучше прочитайте целую страницу.

Я думаю, что лучше отлаживать события onmessage 1-й линии и проверять объект event.data. Как вы говорите, они способны захватывать двоичные данные и отправлять их на сервер, это устраняет сомнения в том, что ваш браузер может не поддерживать двоичные данные через веб-сокет.

Теперь мое единственное сомнение - "действительно ли сервер отправляет двоичные данные?" можете ли вы просто попытаться создать видимый элемент img html и присвоить полученные данные src prop этому элементу только для проверки данных? не знаю, может ли это помочь websocket для двоичной передачи данных и декодирования

Ответ 5

ваш последний код должен выглядеть следующим образом

var bytes = new Uint8Array(blob);
var image = context.createImageData(canvas.width, canvas.height);
for (var i=0; i<bytes.length; i++) {
    image.data[i] = bytes[i];
}
context.drawImage(image, 0, 0);