Chat freely about anything...

User avatar
By craiglindley
#41526 Hello,

I have an ArduCAM mini connected to my ESP8266 (NodeMCU Amica) running in the Arduino environment. I'm try to use a websocket connection to Firefox for displaying the images acquired by the camera. I'm using the arduinoWebSockets library from https://github.com/Links2004/arduinoWebSockets.

I have an HTML page with connect/disconnect buttons and an capture image button. With this code I can connect to the websockets server and pass a "capture" message. The websockets server code always sees this message and it then acquires an image and attempts to pass it back to the browser as an arraybuffer. I'm using the following to send the jpeg encoded image back to the server:
Code: Select all webSocket.sendBIN(0, imageBuffer, i);


I've already dumped the imageBuffer and it looks like a valid JPEG image.

The onmessage function in the HTML should receive the data but never does. I know this because the alert is not triggered.
Code: Select allfunction StartCamera() {
var url = $('#wsURL').val();
sl_ws = new WebSocket(url);
sl_ws.binaryType = 'arraybuffer';

sl_ws.onopen = function() {
alert("WebSocket Connected");
};

sl_ws.onerror = function() {
alert("WebSocket Error");
};

sl_ws.onmessage = function(event) {
alert("WebSocket Data Received");
var wsRecvMsg = event.data;
var cameraStream = new Uint8Array(wsRecvMsg);
var camerascreen = document.getElementById('camerascreen');
camerascreen.src = 'data:image/jpeg;base64,'+encode(cameraStream);
};


When I turn on the debug feature in the arduinoWebSockets code I see the image data was sent. Here is the output from the serial monitor.

Code: Select allcaptureImage called
Image captured
sendImage called
Image size: 8192
[WS][0][sendFrame] ------- send massage frame -------
[WS][0][sendFrame] fin: 1 opCode: 2 mask: 0 length: 8019 headerToPayload: 0
[WS][0][sendFrame] sending Frame Done (11017us).
Image data sent: 8019


If I click the capture button three times, I get a websocket error from Firefox and an additional message saying the

Image corrupt or truncated. URI in this note truncated due to length.

Does anyone have an idea of what I am doing wrong?

BTW I am using the stable version of the esp8266 Arduino code.

TIA
User avatar
By craiglindley
#41557 I figured this out myself. Whenever I attempted to send an array of data bytes greater than about 2500 bytes from the server, Firefox would not trigger the onmessage function for some reason. The fix was to send the data in smaller (2000 byte) chunks using continuation frames. This worked perfectly.

To make this work I had to add three functions to the WebSocketServer[.cpp and .h] code to support continuation frames as follows:
Code: Select all        // Next three functions added by Craig A. Lindley
        void sendFirstBINFrame(uint8_t num, uint8_t * payload, size_t length);
        void sendNextBINFrame(uint8_t num, uint8_t * payload, size_t length);
        void sendLastBINFrame(uint8_t num, uint8_t * payload, size_t length);


The first function sets the opcode in the frame header but doesn't set the FIN bit
The second functions sets the opcode to 0 meaning a continuation frame and doesn't set the FIN bit
The final function sets the opcode to 0 but sets the FIN bit

Hope this helps other out.
User avatar
By ffaheem
#71978 HI there.

Im going through the exact same issue as you were but i cant figure out exactly what code i should put in WebSocketClient.h

Could you please share that?

Thanks