9: The Camera view in the visualizer has a very poor performance compared to the real cameras output

[nunoguedelha]

Camera view In the visualizer has a very poor performance: pixelation, degraded resolution, color shift (e.g blue->red), delayed input (1min).

• Camera view poor performance: fake framegrabber image appears as scattered lines instead of a single one #102 => comments #issuecomment-1063569388 to #issuecomment-1068735006
• Camera view poor performance: delayed input #104
• Camera view poor performance: Pixelation (degraded resolution) #100
• Camera view poor performance: image flickering (side boundaries/size change) #103
• Camera view poor performance: color shift (e.g. red -> blue) #101 (fake framegabber outputs red line, but we see a blue one)

[nunoguedelha]

In addition, in some tests the image is occasionally flickering. Refer to https://github.com/ami-iit/component_ANA-Avatar-XPRIZE/issues/403.

[nunoguedelha]

At some point we suspected that the line scattering observed in the fake-framegrabber rendering was due to the simultaneous display of multiple frames, and thus related to the Historical requests (refer to this documentation section). This seems now to be a wrong lead, as we can see in the screenshot below that even a single frame includes multiple lines instead of a singe one for the fake framegrabber.

[nunoguedelha]

CC @traversaro @RiccardoGrieco

[nunoguedelha]

Logging the received image data on a yarp port

We publish the image data received through the plugin RealtimeTelemetryPlugin on a Yarp port /yarpjs/cameraEcho:o of type bottle.

For this we added the support of socket.io and yarp.js features in the visualizer plugin installation page:

yarp-openmct/openmctStaticServer/index.html

Lines 12 to 13 in 3d6105d

	<script src="/socket.io-client/socket.io.js"></script>
	<script src="/yarp.js"></script>

yarp-openmct/openmctStaticServer/index.html

Lines 28 to 33 in 3d6105d

	let socket = io();
	let echoPort = [];
	yarp.onInit(function() {
	echoPort = yarp.PortHandler.openPort('/yarpjs/cameraEcho:o', 'bottle');
	});
	yarp.init(socket);

yarp-openmct/openmctStaticServer/index.html

Line 143 in 3d6105d

openmct.install(RealtimeTelemetryPlugin(telemServerHost,telemServerPort,echoPort));

yarp-openmct/openmctStaticServer/realtime-telemetry-plugin.js

Lines 5 to 16 in 3d6105d

	function RealtimeTelemetryPlugin(telemServerHost,telemServerPort,echoPort) {
	return function (openmct) {
	var socket = new WebSocket('ws://' + telemServerHost + ':' + telemServerPort + '/realtime/');
	var listener = {};
	socket.onmessage = function (event) {
	point = JSON.parse(event.data);
	echoPort.write(JSON.stringify(point.value));
	if (listener[point.id]) {
	listener[point.id](point);
	}
	};

We then use the stream video plugin example of yarp.js repository to display the streamed images. We can see in the stream the same scattered lines instead of a single one, as we see in the Open-MCT based visualizer.

We can conclude that the line scattered lines issue occurs in the data transmission between the telemetry server and the Open-MCT based visualizer client.

Sending a fixed frame

If we break the telemetry server we get a constant sample and thus a fixed frame on the visualizer, similar to the output illustrated on #71 (comment), i.e with scattered lines.

This confirms the observation from the previous experiment. We then implement some changes in order to have the server send the raw image data buffer, and the client to apply the conversion to the URI format and base 64 (yarp.getImageSrc(...)):

yarp-openmct/openmctStaticServer/realtime-telemetry-plugin.js

Lines 10 to 21 in 34cae51

	socket.onmessage = function (event) {
	let data = JSON.parse(event.data);
	let point = {
	timestamp: data.timestamp,
	value: yarp.getImageSrc(data.value.compressionType,data.value.buffer.data),
	id: data.id
	};
	// echoPort.write(point.value);
	if (listener[point.id]) {
	listener[point.id](point);
	}
	};

This way it's easier to compare the data sent and received.

I'm suspecting an issue with the way the data transmission is scheduled, which could cause a race condition leading to concurrent data access in the case of big chunks of data, typically image data.

[nunoguedelha]

This way it's easier to compare the data sent and received.

• We log the data received on port /yarpjs/camLeftEye:i into a yarpview port
• After running the telemetry server and client visualizer, we disconnect the framegrabber ouput:

  yarp disconnect /icubSim/camLeftEye /yarpjs/camLeftEye:i
  

This way, we get a fixed frame on the visualizer, and also on the yarpview display as well:

We can see that the outputs are well aligned. We then break the telemetry server and the client visualizer in order to get in the debugger the sent and received buffers.

• point.value.buffer in the subscribers notification sender notifySubscribers.
  

  yarp-openmct/openmctStaticServer/realtime-telemetry-plugin.js

  Lines 5 to 11 in 3d6105d

  	function RealtimeTelemetryPlugin(telemServerHost,telemServerPort,echoPort) {
  	return function (openmct) {
  	var socket = new WebSocket('ws://' + telemServerHost + ':' + telemServerPort + '/realtime/');
  	var listener = {};
  	socket.onmessage = function (event) {
  	point = JSON.parse(event.data);

• data.value.buffer in the RealtimeTelemetryPlugin plugin.
  

  yarp-openmct/iCubTelemVizServer/realtime-server.js

  Lines 20 to 24 in 34cae51

  	function notifySubscribers(point) {
  	if (subscribed[point.id] && ws.readyState === ws.OPEN) {
  	ws.send(JSON.stringify(point));
  	}
  	}

The buffers are identical.

The problem is not in the transmission of the data between the server and client, but rather in the implementation of the yarp image type port reading.

---

From the yarp.js repository examples, we know that the implementation of image type port reading through websockets works pretty well. For that reason we'll try reading the port directly via yarp socket in the visualizer client (no history shall be supported).

---

[nunoguedelha]

For that reason we'll try reading the port directly via yarp socket in the visualizer client (no history shall be supported).

This works pretty well, it solves the scattered lines issue. We can now choose a better protocol for the connection, other than tcp.

A debug version of the fix is implemented in https://github.com/ami-iit/yarp-openmct/tree/e5e0f28fbe8708954ac8240bfc43819b2955ff02.

[nunoguedelha]

This change broke the shutdown sequence. Fixing...

[nunoguedelha]

The proper closure of the iCubTelemVizServer server was blocked by the openmctStaticServer server hanging at closure itself.

Received SIGINT ...
{
  status: 'WRPLY',
  message: 'Process (PID 36504) OpenMCT Server stopping (signal SIGINT) ...'
}
iCub Telemetry Server closing: no further connection requests accepted.
Control Console Server closing: no further connection requests accepted.
[OPEN-MCT STATIC SERVER] stdout: Received SIGINT ...
Open-MCT Visualizer Server closing: no further incoming requests accepted. Refreshing the visualizer web page will fail.
Open-MCT Visualizer Server closed: all sockets closed.

The closure process resumes normally after we kill the nodejs process running the openmctStaticServer server.

iCub Telemetry Server closing: no further "subscribe"/"unsubscribe" requests accepted.
[INFO] |yarp.os.impl.PortCoreInputUnit| Removing input from /icubSim/inertial to /yarpjs/inertial:i
[INFO] |yarp.os.impl.PortCoreInputUnit| Removing input from /icubSim/left_leg/stateExt:o to /yarpjs/left_leg/stateExt:o
[INFO] |yarp.os.impl.PortCoreInputUnit| Removing input from /icubSim/camLeftEye to /yarpjs/camLeftEye:i
[INFO] |yarp.os.impl.PortCoreInputUnit| Removing input from /walking-coordinator/logger/data:o to /yarpjs/walking-coordinator-logger/data:i
iCub Telemetry Server closing: disconnected network ports.
Data transmission ended.
Closing all Telemetry Server and Control Console sockets!
[
  'iCub Telemetry Server closed: all sockets closed.',
  'Control Console Server closed: all sockets closed.'
]
Waiting for the debugger to disconnect...

Process finished with exit code 0

[nunoguedelha]

The proper closure of the iCubTelemVizServer server was blocked by the openmctStaticServer server hanging at closure itself.

Further analysis and fix documented in #102 .

Converting current issue into an epic.