Send Opencv::Mat image from Qt application to HTML client, using websocket

I wrote an application in C++ using Qt 5.7, basically is a websocket server, using qwebsocket for this, capable to send an image elaborated with OpenCV to an HTML client.

In order to do this I encode the image in base64, transmit it and on the client put the encoded string in the src of an image tag.

SERVER

imgIn = cv::imread("/home/me/color.png", CV_LOAD_IMAGE_UNCHANGED);
std::vector<uchar> buffer;
cv::imencode(".png",imgIn,buffer);
std::string s = base64_encode(buffer.data(),buffer.size());
pClient->sendTextMessage(QString::fromStdString(s));


CLIENT

<img id="ItemPreview" src="" style="border:5px solid black" />


websocket.onmessage = function (evt) {
console.log( "Message received :", evt.data );
document.getElementById("ItemPreview").src = "data:image/png;base64," + evt.data;
};


The images comes from a video elaboration, I extract frames, do some image processing and send them to view in the HTML client the video. When computation arises, or the client is remote (but same wifi network) I experience some lag, the video is not smooth.

Is there a better way to transmit images over websocket? Maybe using some other technique than base64 encoding to reduce the data transmitted and the computation speed.

I know TCP protocol used by websocket is not ideal to stream videos as UDP would be preferred to avoid lags, but since the images are small (320*240 ~ 100kb) I would try this way.

• Hi sir! Did you find any solution for this? I also have the same question. Thanks! – Bahramdun Adil Oct 31 '17 at 5:24