BinaryImageStream

BinaryImageStream

Deprecated

This class has been migrated to WslinkImageStream, based on wslink
When all clients have been migrated to wslink, this class will be removed.

constructor(endpointURL, stillQuality=100, interactiveQuality=50, mimeType=’image/jpeg’)

Create an instance of a binary image stream over WebSocket.

enableView(enabled)

Toggle ON or OFF the streaming of a given view to the client.

startInteractiveQuality()

Trigger a call on the server to update the image quality to interactive.

stopInteractiveQuality()

Trigger a call on the server to update the image quality to still.

updateQuality(stillQuality=100, interactiveQuality=50)

Update compression setting regarding the still and interactive mode.

connect({view_id=-1, size=[500,500]})

Establish WebSocket connection with server.

destroy()

Remove listener and free resources.

onImageReady(callback) : subscription

Attach listener for when an image is received.

Source

index.js
/* global WebSocket Blob window URL */

import Monologue from 'monologue.js';

const IMAGE_READY = 'image.ready';

// DEPRECATED: replaced by WslinkImageStream
export default class BinaryImageStream {
constructor(
endpointURL,
stillQuality = 100,
interactiveQuality = 50,
mimeType = 'image/jpeg'
) {
this.endpoint = endpointURL;
this.ws = null;
this.textMode = true;
this.metadata = null;
this.activeURL = null;
this.fps = 0;
this.mimeType = mimeType;
this.lastTime = +new Date();
this.view_id = -1;
this.stillQuality = stillQuality;
this.interactiveQuality = interactiveQuality;

this.lastImageReadyEvent = null;
}

enableView(enabled) {
this.ws.send(
JSON.stringify({
view_id: this.view_id,
enabled,
})
);
}

startInteractiveQuality() {
this.ws.send(
JSON.stringify({
view_id: this.view_id,
quality: this.interactiveQuality,
})
);
}

stopInteractiveQuality() {
this.ws.send(
JSON.stringify({
view_id: this.view_id,
quality: this.stillQuality,
})
);
}

invalidateCache() {
this.ws.send(
JSON.stringify({
view_id: this.view_id,
invalidate_cache: true,
})
);
}

updateQuality(stillQuality = 100, interactiveQuality = 50) {
this.stillQuality = stillQuality;
this.interactiveQuality = interactiveQuality;
}

/* eslint-disable camelcase */
connect({ view_id = -1, size = [500, 500] }) {
return new Promise((resolve, reject) => {
if (!this.ws) {
this.ws = new WebSocket(this.endpoint);
this.textMode = true;

this.view_id = view_id;
this.width = size[0];
this.height = size[1];

this.ws.onopen = () => {
this.ws.send(
JSON.stringify({
view_id,
})
);
resolve();
};

this.ws.onmessage = (msg) => {
if (this.textMode) {
this.metadata = JSON.parse(msg.data);
} else {
const imgBlob = new Blob([msg.data], {
type: this.mimeType,
});
if (this.activeURL) {
window.URL.revokeObjectURL(this.activeURL);
this.activeURL = null;
}
this.activeURL = URL.createObjectURL(imgBlob);
const time = +new Date();
this.fps = Math.floor(10000 / (time - this.lastTime)) / 10;
this.lastTime = time;

this.lastImageReadyEvent = {
url: this.activeURL,
fps: this.fps,
metadata: this.metadata,
};

this.emit(IMAGE_READY, this.lastImageReadyEvent);
}
this.textMode = !this.textMode;
};
}
});
}
/* eslint-enable camelcase */

destroy() {
this.off();
if (this.ws) {
this.ws.close();
this.ws = null;
}
}

onImageReady(callback) {
return this.on(IMAGE_READY, callback);
}

getLastImageReadyEvent() {
return this.lastImageReadyEvent;
}
}

Monologue.mixInto(BinaryImageStream);