I found similar question between C++ and javascript Display image from blob using javascript and websockets
The Server side is same as before.
The Client side, 'ws.binaryType' has to be set to 'arraybuffer' to receive blob object. And It should be encoded by base64 and 'encode' function which is referred from link I wrote above.
The code:
javascript
var img = document.getElementById("liveImg");
var arrayBuffer;
var ws = new WebSocket("ws://localhost:8080/camera");
ws.binaryType = 'arraybuffer';
ws.onopen = function(){
console.log("connection was established");
};
ws.onmessage = function(evt){
arrayBuffer = evt.data;
img.src = "data:image/jpeg;base64," + encode(new Uint8Array(arrayBuffer));
};
function encode (input) {
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
while (i < input.length) {
chr1 = input[i++];
chr2 = i < input.length ? input[i++] : Number.NaN; // Not sure if the index
chr3 = i < input.length ? input[i++] : Number.NaN; // checks are needed here
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output += keyStr.charAt(enc1) + keyStr.charAt(enc2) +
keyStr.charAt(enc3) + keyStr.charAt(enc4);
}
return output;
}
html
I replaced canvas tag to img tag
<html>
<head>
<title>livecamera</title>
<img id="liveImg" width="480" height="360"></canvas>
<script type="text/javascript" src="./client.js"></script>
</head>
</html>