Corrupted data server side?

[xseignard]

Hello,

First thanks for your lib!

I have succesfully run it on my mac, but now on a rpi3 I have some problems on the front end side.

Here are the relevant parts of my code:

ofApp.h

#include "ofMain.h"
#include "ofxCv.h"
#include "ofxLibwebsockets.h"
#include "ofxCvPiCam.h"

class ofApp : public ofBaseApp {
public:
  void setup();
  void update();
  ofxCvPiCam cam;
  ofxLibwebsockets::Server server;
  ofxCv::ObjectFinder finder;
};

ofApp.cpp

Mat frame;
ofImage img;
void ofApp::setup() {
  img.allocate(800, 600, OF_IMAGE_COLOR);
  cam.setup(800, 600);
  server.setup(9092);
}
void ofApp::update() {
  frame = cam.grab();
  if (!frame.empty()) finder.update(frame);
  if (currentTime - lastFrame > FRAME_INTERVAL) {
    toOf(frame, img);
    server.sendBinary(img);
  }
}

And front side:

const canvas = document.querySelector('#canvas');
canvas.width = 640;
canvas.height = 600;
const ctx = canvas.getContext('2d');
const canvasData = ctx.getImageData(0, 0, 800, 600);
const data = canvasData.data;
const ws = new WebSocket('ws://192.168.2.37:9092');
ws.binaryType = 'arraybuffer';
ws.onopen = () => console.log('open');
ws.onmessage = e => {
    // console.log(e);
    const byteArray = new Uint8Array(e.data);
    let index = 0;
    for (let i = 0; i < data.length; i += 4) {
        data[i] = byteArray[index];
        index++;
        data[i + 1] = byteArray[index];
        index++;
        data[i + 2] = byteArray[index];
        index++;
        data[i + 3] = 255;
    }
    ctx.putImageData(canvasData, 0, 0);
};

And I end up with the following error (JavaScript side) be it immediatly or after a short while:

WebSocket connection to 'ws://192.168.2.37:9092/' failed: Invalid frame header

With a data frame (Opcode -1)

Any idea?

Regards