RemoteVizRenderArea Class Reference
[RemoteViz]

RemoteViz HTML5 client API Documentation. More...

#include <RemoteViz/Clients/RemoteVizRenderArea.h>

List of all members.

Public Member Functions

 RemoteVizRenderArea (String|HTMLElement container, Number containerWidth, Number containerHeight, String displayMode)
 connectTo (String serviceUrl)
 disconnect ()
Boolean isConnected ()
 sendMessage (String message)
 requestRenderAreaSize (Number width, Number height)
 resizeRenderAreaContainer (Number width, Number height)
Boolean eventHandler (Event event)



Number getRenderAreaWidth ()
Number getRenderAreaHeight ()
Number getContainerWidth ()
Number getContainerHeight ()
Boolean isImageStreamingSupported ()
Boolean isVideoStreamingSupported ()
String getStreamingMode ()
 addServiceListener (Function serviceHandler)
 removeServiceListener (Function serviceHandler)
 serviceHandler (Object notification)
 addResizeListener (Function resizeHandler)
 removeResizeListener (Function resizeHandler)
 resizeHandler (Array size)
 addReceivedFrameListener (Function receivedFrameHandler)
 removeReceivedFrameListener (Function receivedFrameHandler)
 receivedFrameHandler (Number frameId, Number dataLength, String message)
 addDecodedFrameListener (Function decodedFrameHandler)
 removeDecodedFrameListener (Function decodedFrameHandler)
 decodedFrameHandler (Number frameId, Boolean isLossless, String message)
 addMessageListener (Function messageHandler)
 removeMessageListener (Function messageHandler)
 messageHandler (String message)
 addMouseUpListener (Function eventHandler)
 removeMouseUpListener (Function eventHandler)
 addMouseDownListener (Function eventHandler)
 removeMouseDownListener (Function eventHandler)
 addMouseDoubleClickListener (Function eventHandler)
 removeMouseDoubleClickListener (Function eventHandler)
 addMouseMoveListener (Function eventHandler)
 removeMouseMoveListener (Function eventHandler)
 addMouseOverListener (Function eventHandler)
 removeMouseOverListener (Function eventHandler)
 addMouseOutListener (Function eventHandler)
 removeMouseOutListener (Function eventHandler)
 addMouseWheelListener (Function eventHandler)
 removeMouseWheelListener (Function eventHandler)
 addTouchStartListener (Function eventHandler)
 removeTouchStartListener (Function eventHandler)
 addTouchEndListener (Function eventHandler)
 removeTouchEndListener (Function eventHandler)
 addTouchCancelListener (Function eventHandler)
 removeTouchCancelListener (Function eventHandler)
 addTouchMoveListener (Function eventHandler)
 removeTouchMoveListener (Function eventHandler)
 addKeyUpListener (Function eventHandler)
 removeKeyUpListener (Function eventHandler)
 addKeyDownListener (Function eventHandler)
 removeKeyDownListener (Function eventHandler)

Detailed Description

RemoteViz HTML5 client API Documentation.

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

It requires a web browser compatible with HTML5, such as the latest version of the Edge, Internet Explorer (>=10), Google 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

Video streaming mode (H.264) 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

Internet Explorer/Edge

Safari

Windows 7

 Frames latency

 OK

 Not functional

 Web browser not available on this platform

Windows 8.X / 10

 OK

 OK

 Not functional

 Web browser not available on this platform

MacOSX

 Frames latency

 OK

 Web browser not available on this platform

 OK

Linux

 OK

 OK

 Web browser not available on this platform

 Web browser not available on this platform

Android

 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

 Media Source Extension not supported by iOS

 Media Source Extension not supported by iOS


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 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


Open Inventor by FEI reference manual, generated on 2 Sep 2019
Copyright © FEI S.A.S. All rights reserved.
http://www.openinventor.com/