HTML5 client API Documentation. More...

#include <RemoteViz/Clients/RemoteVizRenderArea.h>

Public Member Functions
	RemoteVizRenderArea (String\|HTMLElement container, Number containerWidth, Number containerHeight, String displayMode)
	This constructor associates a RemoteViz RenderArea on the server with an HTML container.

	connectTo (String serviceUrl)
	Opens a new connection between the HTML webpage and the RemoteViz service.

	disconnect ()
	Closes the service connection.

Boolean	isConnected ()
	Checks if the service connection is established.

	sendMessage (String\|Uint8Array message)
	Sends a message to the service.

	requestRenderAreaSize (Number width, Number height)
	Sends a request to resize the renderArea associated with the connection.

	resizeRenderAreaContainer (Number width, Number height)
	Resizes the renderArea container.

Number	getRenderAreaWidth ()
	Returns the width of the renderArea managed by the RemoteViz service.

Number	getRenderAreaHeight ()
	Returns the height of the renderArea managed by the RemoteViz service.

Number	getContainerWidth ()
	Returns the width of the renderArea container.

Number	getContainerHeight ()
	Returns the height of the renderArea container.

Boolean	isImageStreamingSupported ()
	Checks if the client supports image streaming.

Boolean	isVideoStreamingSupported ()
	Checks if the client supports video streaming (H.264 or VP9).

String	getStreamingMode ()
	Returns the type of streaming currently used by the client.

	addServiceListener (Function serviceHandler)
	Adds an event listener on the service runtime.

	removeServiceListener (Function serviceHandler)
	Removes an event listener on the service runtime.

	serviceHandler (Object notification)
	ServiceHandler.

	addResizeListener (Function resizeHandler)
	Adds a listener on the renderArea resize event.

	removeResizeListener (Function resizeHandler)
	Removes a listener on the renderArea resize event.

	resizeHandler (Array size)
	ResizeHandler.

	addReceivedFrameListener (Function receivedFrameHandler)
	Adds a listener on the received frame event.

	removeReceivedFrameListener (Function receivedFrameHandler)
	Removes a listener on the received frame event.

	receivedFrameHandler (Number frameId, Number dataLength, String message)
	ReceivedFrameHandler.

	addDecodedFrameListener (Function decodedFrameHandler)
	Adds a listener on the decoded frame event.

	removeDecodedFrameListener (Function decodedFrameHandler)
	Removes a listener on the decoded frame event.

	decodedFrameHandler (Number frameId, Boolean isLossless, String message)
	DecodedFrameHandler.

	addMessageListener (Function messageHandler)
	Adds an event listener on the received message event.

	removeMessageListener (Function messageHandler)
	Adds an event listener on the received message.

	messageHandler (String\|Uint8Array message)
	MessageHandler.

	addMouseUpListener (Function eventHandler)
	Adds a listener on the image container mouseUp event.

	removeMouseUpListener (Function eventHandler)
	Removes a listener on the container (DIV element) mouseUp event.

	addMouseDownListener (Function eventHandler)
	Adds a listener on the image container mouseDown event.

	removeMouseDownListener (Function eventHandler)
	Removes a listener on the container (DIV element) mouseDown event.

	addMouseDoubleClickListener (Function eventHandler)
	Adds a listener on the container (DIV element) mouseDoubleClick event.

	removeMouseDoubleClickListener (Function eventHandler)
	Removes a listener on the container (DIV element) mouseDoubleClick event.

	addMouseMoveListener (Function eventHandler)
	Adds a listener on the container (DIV element) mouseMove event.

	removeMouseMoveListener (Function eventHandler)
	Removes a listener on the container (DIV element) mouseMove event.

	addMouseOverListener (Function eventHandler)
	Adds a listener on the image container mouseOver event.

	removeMouseOverListener (Function eventHandler)
	Removes a listener on the container (DIV element) mouseOver event.

	addMouseOutListener (Function eventHandler)
	Adds a listener on the image container mouseOut event.

	removeMouseOutListener (Function eventHandler)
	Removes a listener on the container (DIV element) mouseOver event.

	addMouseWheelListener (Function eventHandler)
	Adds a listener on the image container mouseWheel event.

	removeMouseWheelListener (Function eventHandler)
	Removes a listener on the container (DIV element) mouseWheel event.

	addTouchStartListener (Function eventHandler)
	Adds a listener on the image container touchStart event.

	removeTouchStartListener (Function eventHandler)
	Removes a listener on the container (DIV element) touchStart event.

	addTouchEndListener (Function eventHandler)
	Adds a listener on the image container touchEnd event.

	removeTouchEndListener (Function eventHandler)
	Removes a listener on the container (DIV element) touchEnd event.

	addTouchCancelListener (Function eventHandler)
	Adds a listener on the image container touchCancel event.

	removeTouchCancelListener (Function eventHandler)
	Removes a listener on the container (DIV element) touchCancel event.

	addTouchMoveListener (Function eventHandler)
	Adds a listener on the image container touchMove event.

	removeTouchMoveListener (Function eventHandler)
	Removes a listener on the container (DIV element) touchMove event.

	addKeyUpListener (Function eventHandler)
	Adds a listener on the image container keyUp event.

	removeKeyUpListener (Function eventHandler)
	Removes a listener on the container (DIV element) keyUp event.

	addKeyDownListener (Function eventHandler)
	Adds a listener on the image container keyDown event.

	removeKeyDownListener (Function eventHandler)
	Removes a listener on the container (DIV element) keyDown event.

Boolean	eventHandler (Event event)
	EventHandler.

Detailed Description

HTML5 client API Documentation.

This JavaScript API enables development of HTML5 client applications for RemoteViz.

It requires a web browser compatible with HTML5 and ECMAScript 6, such as the latest version of the Edge, Chrome, Firefox or Safari browsers.

RemoteVizRenderArea is NOT actually a C++ (or C# or Java) class. We are just using the same documentation system for your convenience.

JavaScript

The JavaScript file has to be included in your application's web page to provide the RemoteViz API features to an HTML container.
Add the RemoteViz client component into your webpage with the following JavaScript code:

<script type="text/javascript" src="RemoteVizClient.js"></script>

The JavaScript file RemoteVizClient.js contains the "Universal Module Definition" pattern. The UMD pattern attempts to offer compatibility with the most popular script loaders of the day (e.g RequireJS amongst others).

TypeScript

TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language. A TypeScript declaration file is provided in order to use the RemoteViz client API in a TypeScript application (see remotevizHTML5/RemoteVizClient.d.ts).

Add the RemoteViz client component into your TypeScript application with the following code:

/// <reference path="RemoteVizClient.d.ts" />
import RemoteVizRenderArea = require("./RemoteVizClient");

Web browser image streaming support

Image streaming mode (JPEG/PNG) is supported by all modern web browsers.

Web browser video streaming support

H.264 streaming support

H.264 streaming mode requires that the web browser supports Media Source extension API and H.264 live streaming (no frame delay).
The array below shows the supported web browsers:

	Google Chrome	Mozilla Firefox	Edge (version 12 to 18)	Edge (version 79 and higher)	Safari
Windows 7	Frames latency	OK	Not functional	Frames latency	Web browser not available on this platform
Windows 8.X / 10	OK	OK	Not functional	OK	Web browser not available on this platform
MacOSX	Frames latency	OK	Web browser not available on this platform	Frames latency	OK
Linux	OK	OK	Web browser not available on this platform	OK	Web browser not available on this platform
Android	OK	OK	OK	OK	Web browser not available on this platform
iOS	Media Source Extension not supported by iOS	Media Source Extension not supported by iOS	Web browser not available on this platform	Media Source Extension not supported by iOS	Media Source Extension not supported by iOS
iPadOS	Media Source Extension not available	Media Source Extension not available	Media Source Extension not available	Media Source Extension not available	OK

VP9 streaming support

VP9 streaming mode requires that the web browser supports Media Source extension API and VP9 live streaming.
The array below shows the supported web browsers:

	Google Chrome	Mozilla Firefox	Edge (version 12 to 18)	Edge (version 79 and higher)	Safari
Windows 7	OK	OK	Not supported	OK	Web browser not available on this platform
Windows 8.X / 10	OK	OK	Not supported	OK	Web browser not available on this platform
MacOSX	OK	OK	Web browser not available on this platform	OK	Not supported
Linux	OK	OK	Web browser not available on this platform	OK	Web browser not available on this platform
Android	OK	OK	Not supported	OK	Web browser not available on this platform
iOS	Media Source Extension not supported by iOS	Media Source Extension not supported by iOS	Web browser not available on this platform	Media Source Extension not supported by iOS	Media Source Extension not supported by iOS
iPadOS	Media Source Extension not available	Media Source Extension not available	Media Source Extension not available	Media Source Extension not available	Not supported

The function RemoteVizRenderArea::isImageStreamingSupported enables to know if image streaming mode (JPEG/PNG decoding) is supported by the web browser.

The function RemoteVizRenderArea::isVideoStreamingSupported enables to know if video streaming mode (H.264/VP9 decoding) is supported by the web browser.

HTTP Content-Security-Policy

The HTTP Content-Security-Policy response header allows web site administrators to control resources the user agent is allowed to load for a given page. This helps guard against cross-site scripting attacks (XSS).
In order to use this feature with RemoteViz, the RemoteViz WebSocket's server address has to be explicitly set as a property on the 'connect-src' directive (for example: "connect-src ws://serverip:serverport" or "connect-src ws://example.com"). In case of using image streaming mode, the source 'data:' has to be explicitly set as a property on the directive 'img-src'.

Microsoft Edge

Running the RemoteViz examples on localhost using Microsoft Edge can fail because of the network isolation. This happens because Edge runs as a Windows modern app different from IE and thus it is has network isolation by default for security reasons. You can either change the network interface used by the RemoteViz examples or enable loopback in the net isolation settings:

For Build 10158 or newer: CheckNetIsolation LoopbackExempt -a -n=Microsoft.MicrosoftEdge_8wekyb3d8bbwe

More information

EXAMPLE

<html>
  <head>
    <title>RemoteViz Example</title>
    <link rel="stylesheet" type="text/css" href="loader.css"> <!-- include the loader css -->
    <script type="text/javascript" src="RemoteVizClient.js"></script> <!-- include the RemoteViz javascript client -->
    <script type="text/javascript">
 
    var theRenderArea = null;
 
    function init() // This function is called immediately after the page is loaded.
    {
      // Initialize the renderArea on the server.
      //   "TheDiv" is the id of the image container, which must be a <div>.
      //   "640" and "480" are the container width and height and will be set as
      //      the requested width and height for the renderArea managed by the service.
      theRenderArea = new RemoteVizRenderArea("TheDiv", 640, 480);
 
      // Listen for start and stop bandwidth calibration events to display or hide the loader.
      theRenderArea.addServiceListener(service);
 
      // Connect to the service.
      //   The IP address and the port refer to those of the service (see main.cpp).
      //   "TheDemo" specifies the name of the requested renderArea.
      theRenderArea.connectTo("ws://127.0.0.1:8080/TheDemo");
    }
 
    function service(event) // This function is called when a message is received from the service.
    {
      var message = event[0];
      switch(message) {
        case "startNetworkCalibration":
        case "pendingNetworkCalibration":
          document.getElementById("loaderGroup").style.display = "inline";
          break;
        case "finishedNetworkCalibration":
          document.getElementById("loaderGroup").style.display = "none";
          break;
      }
    }
  </script>
  </head>
  <body onload="init()" bgcolor="silver">
    <div id="loaderGroup" style="display:none;"><div id="loader"></div>
    <div id="loaderText">Bandwidth calibration</div></div> <!-- loader notifying the network bandwidth calibration -->
    <div id="TheDiv"> <!-- element displaying the renderArea -->
    </div>
  </body>
</html>

Definition at line 281 of file RemoteVizRenderArea.h.

Constructor & Destructor Documentation

◆ RemoteVizRenderArea()

RemoteVizRenderArea::RemoteVizRenderArea	(	String\|HTMLElement	container,
		Number	containerWidth,
		Number	containerHeight,
		String	displayMode
	)

This constructor associates a RemoteViz RenderArea on the server with an HTML container.

The container will be resized to 'containerWidth' and 'containerHeight'.
During the connection setup, RemoteViz will automatically use the 'containerWidth' and 'containerHeight' values as the requested size for the server-side RenderArea. However the RenderArea requested size may be set explicitly using 'RequestedWidth' and 'RequestedHeight' parameters in the service URL (see connectTo()).

Parameters

container	container id in the HTML page or container HTML object. This must be a DIV element.
containerWidth	width of the container in pixels.
containerHeight	height of the container in pixels.
displayMode	This setting allows you to specify how to map the renderArea image (server-side) into the container (client-side). The rendered image and the container are not required to be the same size. However, if their aspect ratios are different, then a choice must be made about how to map the image into the container. The advantage of the first two modes is that the image is not distorted. FIT: This mode resizes the image to fit the container but keeps the same aspect ratio as the server-side renderArea. If the aspect ratios do not match, portions of the container will be blank. This is the default value. CROP: In crop mode, the image is cropped (if necessary) to keep the same scale as the renderArea. If the aspect ratios do not match, portions of the image will not be displayed. STRETCH: This mode stretches the image to fill the container. If the aspect raios do not match, the image will be distorted.

The following figures show the different types of display mode.

RenderArea (server-side)

FIT mode (client-side)

CROP mode (client-side)

STRETCH mode (client-side)

Member Function Documentation

◆ addDecodedFrameListener()

RemoteVizRenderArea::addDecodedFrameListener ( Function decodedFrameHandler )

Adds a listener on the decoded frame event.

This event occurs when a frame (image) is decoded by the client.
A handler is assigned from a script using the syntax

[renderArea].addDecodedFrameListener([function]);

where [renderArea] is the renderArea object and [function] is the name of the function that occurs when the event takes place.

Parameters

decodedFrameHandler : A function to be called when the event occurs. See decodedFrameHandler.

◆ addKeyDownListener()

RemoteVizRenderArea::addKeyDownListener ( Function eventHandler )

Adds a listener on the image container keyDown event.

This event occurs when the user presses a key while the cursor is over the container.
A handler is assigned from a script using the syntax

[renderArea].addKeyDownListener([function]);

where [renderArea] is the renderArea object and [function] is the name of the function that occurs when the event takes place.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ addKeyUpListener()

RemoteVizRenderArea::addKeyUpListener ( Function eventHandler )

Adds a listener on the image container keyUp event.

This event occurs when the user releases a key while the cursor is over the container.
A handler is assigned from a script using the syntax

[renderArea].addKeyUpListener([function]);

[renderArea] is the renderArea object and [function] is the name of the function that occurs when the event takes place.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ addMessageListener()

RemoteVizRenderArea::addMessageListener ( Function messageHandler )

Adds an event listener on the received message event.

This event occurs when a message is received from the service.
A handler is assigned from a script using the syntax

[renderArea].addMessageListener([function]);

where [renderArea] is the renderArea object and [function] is the name of the function that occurs when the event takes place.

Parameters

messageHandler : A function to be called when the event occurs. See messageHandler.

◆ addMouseDoubleClickListener()

RemoteVizRenderArea::addMouseDoubleClickListener ( Function eventHandler )

Adds a listener on the container (DIV element) mouseDoubleClick event.

This event occurs when pressing two times quickly a mouse button over the container (DIV element).
A handler is assigned from a script using the syntax

[renderArea].addMouseDoubleClickListener([function]);

where [renderArea] is the renderArea object and [function] is the name of the function that occurs when the event takes place.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ addMouseDownListener()

RemoteVizRenderArea::addMouseDownListener ( Function eventHandler )

Adds a listener on the image container mouseDown event.

This event occurs when a mouse button is pressed over the container.
A handler is assigned from a script using the syntax

[renderArea].addMouseDownListener([function]);

where [renderArea] is the renderArea object and [function] is the name of the function that occurs when the event takes place.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ addMouseMoveListener()

RemoteVizRenderArea::addMouseMoveListener ( Function eventHandler )

Adds a listener on the container (DIV element) mouseMove event.

This event occurs when the pointer is moving while it is over the container (DIV element).
This event occurs when the pointer is moving while it is over the container.
A handler is assigned from a script using the syntax

[renderArea].addMouseMoveListener([function]);

where [renderArea] is the renderArea object and [function] is the name of the function that occurs when the event takes place.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ addMouseOutListener()

RemoteVizRenderArea::addMouseOutListener ( Function eventHandler )

Adds a listener on the image container mouseOut event.

This event occurs when a user moves the mouse pointer out of the container.
A handler is assigned from a script using the syntax

[renderArea].addMouseOutListener([function]);

where [renderArea] is the renderArea object and [function] is the name of the function that occurs when the event takes place.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ addMouseOverListener()

RemoteVizRenderArea::addMouseOverListener ( Function eventHandler )

Adds a listener on the image container mouseOver event.

This event occurs when the pointer is moved over the container.
A handler is assigned from a script using the syntax

[renderArea].addMouseOverListener([function]);

where [renderArea] is the renderArea object and [function] is the name of the function that occurs when the event takes place.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ addMouseUpListener()

RemoteVizRenderArea::addMouseUpListener ( Function eventHandler )

Adds a listener on the image container mouseUp event.

This event occurs a mouse button is released over the container.
A handler is assigned from a script using the syntax

[renderArea].addMouseUpListener([function]);

where [renderArea] is the renderArea object and [function] is the name of the function that occurs when the event takes place.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ addMouseWheelListener()

RemoteVizRenderArea::addMouseWheelListener ( Function eventHandler )

Adds a listener on the image container mouseWheel event.

This event occurs when a user moves the mouse wheel while the cursor is over the container.
A handler is assigned from a script using the syntax

[renderArea].addMouseWheelListener([function]);

where [renderArea] is the renderArea object and [function] is the name of the function that occurs when the event takes place.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ addReceivedFrameListener()

RemoteVizRenderArea::addReceivedFrameListener ( Function receivedFrameHandler )

Adds a listener on the received frame event.

This event occurs when a frame (image) is received from the service.
A handler is assigned from a script using the syntax

[renderArea].addReceivedFrameListener([function]);

where [renderArea] is the renderArea object and [function] is the name of the function that occurs when the event takes place.

Parameters

receivedFrameHandler : A function to be called when the event occurs. See receivedFrameHandler.

◆ addResizeListener()

RemoteVizRenderArea::addResizeListener ( Function resizeHandler )

Adds a listener on the renderArea resize event.

A handler is assigned from a script using the syntax

[renderArea].addResizeListener([function]);

where [renderArea] is the renderArea object and [function] is the name of the function that occurs when the event takes place.

Parameters

resizeHandler : A function to be called when the event occurs. See resizeHandler.

◆ addServiceListener()

RemoteVizRenderArea::addServiceListener ( Function serviceHandler )

Adds an event listener on the service runtime.

This listener will receive predefined messages from the service, e.g. "connected". See serviceHandler for a complete list.

A handler is assigned from a script using the syntax

[renderArea].addServiceListener([function]);

where [renderArea] is the renderArea object and [function] is the name of the function to be called when the event occurs.

Parameters

serviceHandler : A function to be called when the event occurs. See serviceHandler.

◆ addTouchCancelListener()

RemoteVizRenderArea::addTouchCancelListener ( Function eventHandler )

Adds a listener on the image container touchCancel event.

This event is triggered when a touch no longer registers on the container.
A handler is assigned from a script using the syntax

[renderArea].addTouchCancelListener([function]);

where [renderArea] is the renderArea object and [function] is the name of the function that occurs when the event takes place.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ addTouchEndListener()

RemoteVizRenderArea::addTouchEndListener ( Function eventHandler )

Adds a listener on the image container touchEnd event.

This event is triggered when a touch ends, e.g. the user removes a finger from the container.
A handler that is assigned from a script used the syntax

[renderArea].addTouchEndListener([function]);

where [renderArea] is the renderArea object and [function] is the name of the function that occurs when the event takes place.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ addTouchMoveListener()

RemoteVizRenderArea::addTouchMoveListener ( Function eventHandler )

Adds a listener on the image container touchMove event.

This event is triggered when a touch moves, e.g. the user moves a finger across the container.
A handler is assigned from a script using the syntax

[renderArea].addTouchMoveListener([function]);

where [renderArea] is the renderArea object and [function] is the name of the function that occurs when the event takes place.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ addTouchStartListener()

RemoteVizRenderArea::addTouchStartListener ( Function eventHandler )

Adds a listener on the image container touchStart event.

This event is triggered when a touch begins, e.g. the user's finger makes contact with the container.
A handler is assigned from a script using the syntax

[renderArea].addTouchStartListener([function]);

where [renderArea] is the renderArea object and [function] is the name of the function that occurs when the event takes place.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ connectTo()

RemoteVizRenderArea::connectTo ( String serviceUrl )

Opens a new connection between the HTML webpage and the RemoteViz service.

The service URL has three parts:

Service address and port number
The service address can be, as usual, a domain name or an IP address. For example, local testing might use "ws://127.0.0.1:8080" or "ws://localhost:8080". The protocol should be "ws:" or "wss:" requesting a web socket or a secure web socket connection.
RenderAreaId
If no RenderArea with the specified id exists, the RemoteViz service will automatically create one and the server-side onPendingCreateRenderArea event will be triggered (see ServiceListener). If the specified renderAreaId already exists, then the server-side onPendingShareRenderArea event will be triggered.
Optional parameters
Parameters are given as a series of name-value pairs following a question mark: '?'. Within each pair, the name and value are separated by an equals sign: '='. The series of pairs is separated by the ampersand character: '&'.
In general, RemoteViz does not interpret these values, but the service can access them using the Connection::getConnectionParameters() method.

Exception: During the connection setup, the 'containerWidth' and 'containerHeight' values passed to the RemoteVizRenderArea constructor will be used as the requested size for the server-side RenderArea. This behavior may be overriden by including 'RequestedWidth' and 'RequestedWidth' as parameters in the service URL. If the connection is accepted, a server-side onRequestedSize event will be triggered (see RenderAreaListener).

Parameters

serviceUrl

: the direct link (URL) to the RemoteViz service. Example :

ws(s)://url:port/renderAreaId?param1=value1&param2=value2&requestedWidth=100&requestedHeight=100

◆ decodedFrameHandler()

RemoteVizRenderArea::decodedFrameHandler	(	Number	frameId,
		Boolean	isLossless,
		String	message
	)

DecodedFrameHandler.

The decodedFrameHandler function is defined like this:

function decodedFrameHandler(obj) {
  frameId = obj[0];
  isLossless = obj[1];
  message = obj[2];
  //some code here
}

Parameters

frameId	: frame ID.
isLossless	: true if the frame is lossless.
message	: message attached to the decoded frame.

◆ disconnect()

RemoteVizRenderArea::disconnect ( )

Closes the service connection.

The server-side OnClosedConnection event will be triggered.

◆ eventHandler()

Boolean RemoteVizRenderArea::eventHandler ( Event event )

EventHandler.

The eventHandler function for input events, e.g. mouse, is defined like this:

function eventHandler(evt) { //some code here; return true/false;}

Parameters

event : javascript event object. The type of the event object depends on the specified event: MouseEvent, TouchEvent or KeyboardEvent.

Returns: true if the event should be sent to the RemoteViz service. Otherwise, the event may be handled locally, but will not be seen by code running on the server.

◆ getContainerHeight()

Number RemoteVizRenderArea::getContainerHeight ( )

Returns the height of the renderArea container.

Returns: the renderArea container height

◆ getContainerWidth()

Number RemoteVizRenderArea::getContainerWidth ( )

Returns the width of the renderArea container.

Returns: the renderArea container width

◆ getRenderAreaHeight()

Number RemoteVizRenderArea::getRenderAreaHeight ( )

Returns the height of the renderArea managed by the RemoteViz service.

Returns: the renderArea height

◆ getRenderAreaWidth()

Number RemoteVizRenderArea::getRenderAreaWidth ( )

Returns the width of the renderArea managed by the RemoteViz service.

Returns: the renderArea width

◆ getStreamingMode()

String RemoteVizRenderArea::getStreamingMode ( )

Returns the type of streaming currently used by the client.

This information is known after receiving the first frame.

Returns: "video" if uses video streaming, "image" if uses image streaming, otherwise "unknown"

◆ isConnected()

Boolean RemoteVizRenderArea::isConnected ( )

Checks if the service connection is established.

Returns: true if the connection is established and communication is possible, otherwise returns false.

◆ isImageStreamingSupported()

Boolean RemoteVizRenderArea::isImageStreamingSupported ( )

Checks if the client supports image streaming.

Returns: true if the client supports image streaming

◆ isVideoStreamingSupported()

Boolean RemoteVizRenderArea::isVideoStreamingSupported ( )

Checks if the client supports video streaming (H.264 or VP9).

Returns: true if the client supports video streaming

◆ messageHandler()

RemoteVizRenderArea::messageHandler ( String|Uint8Array message )

MessageHandler.

The messageHandler function is defined like this:

function messageHandler(message) { //some code here }

Parameters

message : received message (string or binary)

◆ receivedFrameHandler()

RemoteVizRenderArea::receivedFrameHandler	(	Number	frameId,
		Number	dataLength,
		String	message
	)

ReceivedFrameHandler.

The receivedFrameHandler function is defined like this:

function receivedFrameHandler(obj) {
  frameId = obj[0];
  dataLength = obj[1];
  message = obj[2];
  //some code here
}

Parameters

frameId	: frame ID.
dataLength	: frame data length.
message	: message attached to the received frame.

◆ removeDecodedFrameListener()

RemoteVizRenderArea::removeDecodedFrameListener ( Function decodedFrameHandler )

Removes a listener on the decoded frame event.

Parameters

decodedFrameHandler : A function to be called when the event occurs. See decodedFrameHandler.

◆ removeKeyDownListener()

RemoteVizRenderArea::removeKeyDownListener ( Function eventHandler )

Removes a listener on the container (DIV element) keyDown event.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ removeKeyUpListener()

RemoteVizRenderArea::removeKeyUpListener ( Function eventHandler )

Removes a listener on the container (DIV element) keyUp event.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ removeMessageListener()

RemoteVizRenderArea::removeMessageListener ( Function messageHandler )

Adds an event listener on the received message.

Parameters

messageHandler : A function to be called when the event occurs. See messageHandler.

◆ removeMouseDoubleClickListener()

RemoteVizRenderArea::removeMouseDoubleClickListener ( Function eventHandler )

Removes a listener on the container (DIV element) mouseDoubleClick event.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ removeMouseDownListener()

RemoteVizRenderArea::removeMouseDownListener ( Function eventHandler )

Removes a listener on the container (DIV element) mouseDown event.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ removeMouseMoveListener()

RemoteVizRenderArea::removeMouseMoveListener ( Function eventHandler )

Removes a listener on the container (DIV element) mouseMove event.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ removeMouseOutListener()

RemoteVizRenderArea::removeMouseOutListener ( Function eventHandler )

Removes a listener on the container (DIV element) mouseOver event.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ removeMouseOverListener()

RemoteVizRenderArea::removeMouseOverListener ( Function eventHandler )

Removes a listener on the container (DIV element) mouseOver event.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ removeMouseUpListener()

RemoteVizRenderArea::removeMouseUpListener ( Function eventHandler )

Removes a listener on the container (DIV element) mouseUp event.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ removeMouseWheelListener()

RemoteVizRenderArea::removeMouseWheelListener ( Function eventHandler )

Removes a listener on the container (DIV element) mouseWheel event.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ removeReceivedFrameListener()

RemoteVizRenderArea::removeReceivedFrameListener ( Function receivedFrameHandler )

Removes a listener on the received frame event.

Parameters

receivedFrameHandler : A function to be called when the event occurs. See receivedFrameHandler.

◆ removeResizeListener()

RemoteVizRenderArea::removeResizeListener ( Function resizeHandler )

Removes a listener on the renderArea resize event.

Parameters

resizeHandler : A function to be called when the event occurs. See resizeHandler.

◆ removeServiceListener()

RemoteVizRenderArea::removeServiceListener ( Function serviceHandler )

Removes an event listener on the service runtime.

Parameters

serviceHandler : A function to be called when the event occurs. See serviceHandler.

◆ removeTouchCancelListener()

RemoteVizRenderArea::removeTouchCancelListener ( Function eventHandler )

Removes a listener on the container (DIV element) touchCancel event.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ removeTouchEndListener()

RemoteVizRenderArea::removeTouchEndListener ( Function eventHandler )

Removes a listener on the container (DIV element) touchEnd event.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ removeTouchMoveListener()

RemoteVizRenderArea::removeTouchMoveListener ( Function eventHandler )

Removes a listener on the container (DIV element) touchMove event.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ removeTouchStartListener()

RemoteVizRenderArea::removeTouchStartListener ( Function eventHandler )

Removes a listener on the container (DIV element) touchStart event.

Parameters

eventHandler : A function to be called when the event occurs. See eventHandler.

◆ requestRenderAreaSize()

RemoteVizRenderArea::requestRenderAreaSize	(	Number	width,
		Number	height
	)

Sends a request to resize the renderArea associated with the connection.

A server-side onRequestedSize event will be triggered (see RenderAreaListener).
If the renderArea size is modified in the server-side onRequestSize handler (this is the default behavior), then the client-side resize event will be triggered.

◆ resizeHandler()

RemoteVizRenderArea::resizeHandler ( Array size )

ResizeHandler.

The resizeHandler function is defined like this:

function resizeHandler(size) {
  width = size[0];
  height = size[1];
  // some code here
}

Parameters

size	: contains renderArea width and height after being resized.

◆ resizeRenderAreaContainer()

RemoteVizRenderArea::resizeRenderAreaContainer	(	Number	width,
		Number	height
	)

Resizes the renderArea container.

◆ sendMessage()

RemoteVizRenderArea::sendMessage ( String|Uint8Array message )

Sends a message to the service.

After being sent, the server-side onReceivedMessage event will be triggered (see RenderAreaListener).

Parameters

message : message to be sent (string or binary)

◆ serviceHandler()

RemoteVizRenderArea::serviceHandler ( Object notification )

ServiceHandler.

The serviceHandler function is defined like this:

function serviceHandler(evt) { //some code here }

Parameters

notification

: string Array. Values :

In case of established connection : ["connected", renderAreaWidth, renderAreaHeight].
In case of disconnection : ["disconnected", reason].
The reason parameter can take the following values "DISPOSED", "REFUSED", "KICKED" and "NETWORKFAILURE".
In case of failed connection : ["connectionFailed", jsevent].
In case of started network calibration (The connection is in charge of the network calibration) : ["startNetworkCalibration"].
In case of finished network calibration : ["finishedNetworkCalibration, bandwidth (bits/s), latency (in ms)"];
In case of pending network calibration (The network calibration is currently performed by another connection) : ["pendingNetworkCalibration"];
In case of started bandwidth calibration : ["startBandwidthCalibration"].
In case of finished bandwidth calibration : ["finishedBandwidthCalibration", bandwidth (bits/s)];
In case of started latency calibration : ["startLatencyCalibration"].
In case of finished latency calibration : ["finishedLatencyCalibration", latency (in ms)];

The documentation for this class was generated from the following file:

RemoteViz/Clients/RemoteVizRenderArea.h

Open Inventor Release 2024.1.3

Public Member Functions

Detailed Description

JavaScript

TypeScript

Web browser image streaming support

Web browser video streaming support

H.264 streaming support

VP9 streaming support

HTTP Content-Security-Policy

Microsoft Edge

EXAMPLE

Constructor & Destructor Documentation

◆ RemoteVizRenderArea()

Member Function Documentation

◆ addDecodedFrameListener()

◆ addKeyDownListener()

◆ addKeyUpListener()

◆ addMessageListener()

◆ addMouseDoubleClickListener()

◆ addMouseDownListener()

◆ addMouseMoveListener()

◆ addMouseOutListener()

◆ addMouseOverListener()

◆ addMouseUpListener()

◆ addMouseWheelListener()

◆ addReceivedFrameListener()

◆ addResizeListener()

◆ addServiceListener()

◆ addTouchCancelListener()

◆ addTouchEndListener()

◆ addTouchMoveListener()

◆ addTouchStartListener()

◆ connectTo()

◆ decodedFrameHandler()

◆ disconnect()

◆ eventHandler()

◆ getContainerHeight()

◆ getContainerWidth()

◆ getRenderAreaHeight()

◆ getRenderAreaWidth()

◆ getStreamingMode()

◆ isConnected()

◆ isImageStreamingSupported()

◆ isVideoStreamingSupported()

◆ messageHandler()

◆ receivedFrameHandler()

◆ removeDecodedFrameListener()

◆ removeKeyDownListener()

◆ removeKeyUpListener()

◆ removeMessageListener()

◆ removeMouseDoubleClickListener()

◆ removeMouseDownListener()

◆ removeMouseMoveListener()

◆ removeMouseOutListener()

◆ removeMouseOverListener()

◆ removeMouseUpListener()

◆ removeMouseWheelListener()

◆ removeReceivedFrameListener()

◆ removeResizeListener()

◆ removeServiceListener()

◆ removeTouchCancelListener()

◆ removeTouchEndListener()

◆ removeTouchMoveListener()

◆ removeTouchStartListener()

◆ requestRenderAreaSize()

◆ resizeHandler()

◆ resizeRenderAreaContainer()

◆ sendMessage()

◆ serviceHandler()