I am trying to do an experiment to stream screen content on an Android device to a remote web browser. I am using web socket to stream the content. I am using this library to implement a websocket server on Android device side: https://github.com/TooTallNate/Java-WebSocket. And I am trying to use HTML canvas on the browser side to receive the content. I am not a javascript programmer but need to write some websocket client code in javascript to receive content from Android device.
On Android side:
public void send(byte[] bytes) {
for (final WebSocket conn : connections) {
conn.send(bytes);
}
}
Basically it reads screenshots as bitmaps represented by byte[] in Java.
I am using this javascript code on browser to receive the data:
document.getElementById("open").onclick = function(evt) {
if (ws) {
return false;
}
ws = new WebSocket(serverAddr);
ws.onopen = function(evt) {
print("OPEN");
}
ws.onclose = function(evt) {
print("CLOSE");
ws = null;
}
ws.onmessage = function(evt) {
print("RESPONSE: " + evt.data);
console.log(evt);
}
ws.onerror = function(evt) {
print("ERROR: " + evt.data);
}
return false;
};
The print method just append strings to a div.
ws.onmessage is indeed invoked. I can see a lot of
RESPONSE: [object Blob]
printed out in the browser then I am trying to figure out what I actually received in javascript code. So I went to the console and see something like this:
Then I feel I am hitting a wall: I indeed received some object in javascript because it prints out "object Blob". And it should contain the bitmap data (the size is quite a large number). But that's all the information I can see from the console. How can I process the javascript if I don't know the details about it?
