Как передать картинку через WebSocket?
От: asmcoder  
Дата: 23.10.16 16:27
Оценка:
Использую библиотеку Poco для создания сервера.
Отсылаю картинку так:
int s, len;
char* buff = CWebSocketServer::FileToBuffer( len );
WebSocket ws( request, response );
s = ws.sendFrame( buff, len, WebSocket::FRAME_BINARY ); // 54682 передано


Клиент на AngularJS принимает данные:
    var ws = new WebSocket("ws://127.0.0.1:8000/ws");
...
    ws.onmessage = function (msg) {
    console.log("Message received: " + msg.data ); // [object Blob] принят
    console.log("Message length: " + msg.data.size); // 54682 байта в блобе
    // тут начинаю пытаться перевести блоб в Base64 
    var bytes = new Uint8Array( msg.data );
    var len = bytes.length; // но почему-то получаю нулевую длину
...
    }

HTML:
<img ng-src="data:image/JPEG;base64,{{image}}">


Почему создается нулевой массив в Uint8Array ?
Правильно ли я вообще делаю?
angularjs websocket poco
Re: Как передать картинку через WebSocket?
От: Sharov Россия  
Дата: 23.10.16 17:18
Оценка:
Здравствуйте, asmcoder, Вы писали:

Вот это вот смущает:
A> var bytes = new Uint8Array( msg.data );

Похожее обсуждение на SO:
1)http://stackoverflow.com/questions/28175852/sending-a-png-image-over-a-websocket-and-rendering-the-received-image
2)http://stackoverflow.com/questions/9292133/receiving-image-through-websocket
Кодом людям нужно помогать!
Re[2]: Как передать картинку через WebSocket?
От: asmcoder  
Дата: 23.10.16 18:19
Оценка:
Здравствуйте, Sharov, Вы писали:

S>Здравствуйте, asmcoder, Вы писали:


S>Вот это вот смущает:

S>A> var bytes = new Uint8Array( msg.data );

S>Похожее обсуждение на SO:

S>1)http://stackoverflow.com/questions/28175852/sending-a-png-image-over-a-websocket-and-rendering-the-received-image
S>2)http://stackoverflow.com/questions/9292133/receiving-image-through-websocket

Спасибо за ссылки, но что-то не получается. Может от того что только начал заниматься яваскриптом и AngularJS

Попробовал просто $scope.image = window.btoa(msg.data);
Консоль ошибку не выдает но и картинка не отображается.

ссылка на блоб тоже не помогла, т.к. сервер не знает как обработать такую ссылку
var blob = new Blob([msg.data], { type: 'image/jpeg' });
var url = URL.createObjectURL(blob); //http://127.0.0.1:8000/cdfafb64-614c-4aab-83f6-888f32034bed
Re[3]: Как передать картинку через WebSocket?
От: Sharov Россия  
Дата: 23.10.16 20:34
Оценка:
Здравствуйте, asmcoder, Вы писали:


A>Попробовал просто $scope.image = window.btoa(msg.data);

A>Консоль ошибку не выдает но и картинка не отображается.

$scope.$apply() попробуйте. Иногда помогает.

A>ссылка на блоб тоже не помогла, т.к. сервер не знает как обработать такую ссылку

A>
A>var blob = new Blob([msg.data], { type: 'image/jpeg' });
A>var url = URL.createObjectURL(blob); //http://127.0.0.1:8000/cdfafb64-614c-4aab-83f6-888f32034bed
A>


Я к сожалению эпизодически соприкасаюсь с этими технологиями (писал UI для своего сервиса на angularjs + ws), поэтому кроме ссылок буду мало полезен. Но попробуйте тоже самое сделать без ангуляра, просто передайте клиенту картинку и попытайтесь ее отрендерить, в plain js, точь-в-точь ка на SO.
Кодом людям нужно помогать!
Re[4]: Как передать картинку через WebSocket?
От: asmcoder  
Дата: 26.10.16 19:39
Оценка: 5 (1)
S>Я к сожалению эпизодически соприкасаюсь с этими технологиями (писал UI для своего сервиса на angularjs + ws), поэтому кроме ссылок буду мало полезен. Но попробуйте тоже самое сделать без ангуляра, просто передайте клиенту картинку и попытайтесь ее отрендерить, в plain js, точь-в-точь ка на SO.

Спасибо за помощь.
Оказалось, что нужно установить для вебсокета binaryType="arraybuffer"
Кому интресно процесс описан здесь
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.