Page Comparison

The htmlwidget object allows you to instantiate additional HTML browsers.

htmlwidget IDL

Code Block

language	js

[
    Constructor(HtmlWidgetParams params)
] interface HtmlWidget {
    void postMessage(Object data);
    void close();
};
  
interface HtmlWidgetParams {
    attribute HtmlWidgetRect rect;
    attribute String url;
    [optional] attribute NodeParams node;
    [optional] attribute JavascriptInjection javascriptInjection;
    [optional] attribute bool bsObjects;
    [optional] attribute Storage storage;
    [optional] attribute String inspectorServer;
    [optional] attribute bool inputEnabled;
    [optional] attribute Security security;
};
  
interface HtmlWidgetRect {
    attribute long x;
    attribute long y;
    attribute long width;
    attribute long height;
};
  
interface NodeParams {
    attribute bool enabled;
    [optional] attribute Array<String> arguments;
};
  
interface JavascriptInjection {
    [optional] attribute JavascriptInjectionDetailList documentCreation;
    [optional] attribute JavascriptInjectionDetailList documentReady;
    [optional] attribute JavascriptInjectionDetailList deferred;
};
  
interface JavascriptInjectionDetail {
    [optional] attribute String world;
    [optional] attribute String source;
    [optional] attribute String uri;
    [optional] attribute String code;
};
  
interface Storage {
    attribute String path;
    attribute long quota;
    attribute bool forceSharedStorage;
    attribute bool forceUnsharedStorage;
};
  
interface Security {
    [optional] attribute bool insecureOriginEnabled;
    [optional] attribute bool cameraEnabled;
    [optional] attribute bool desktopCaptureEnabled;
    [optional] attribute bool audioCaptureEnabled;
    [optional] attribute bool insecureHttpsEnabled;
};

Panel

borderColor	#3D3D3D
bgColor	#F4F4F4
titleColor	#3D3D3D
borderWidth	0
titleBGColor	#3D3D3D
borderStyle	solid

ON THIS PAGE

Table of Contents

indent	20px

Object Creation

To create a htmlwidget object first load the brightsign/htmlwidget module using the require() method. Then create an instance of the htmlwidget class.

Code Block

language	js

var HtmlWidgetClass = require("@brightsign/htmlwidget");
var htmlwidget = new HtmlWidgetClass({ rect:{x: 0, y:0, w: 640, h: 480 }, url: "https://brightsign.biz" });

HtmlWidget

postMessage()

Code Block

language	js

void postMessage(Object data)

Sends an asynchronous message to the child browser process. If the child process has an @brightsign/messageport object open, this message will generate a "bsmessage" event on that object. The payload can be any JavaScript object but must be only one level deep (that is, it cannot include other nested objects).

close()

Code Block

language	js

void close()

Shuts down the child browser process. This is equivalent to calling window.close() from inside the child browser. Node.js® parent processes won't exit automatically and the HTML widget can't be garbage collected until the widget is closed.

HtmlWidgetParams

This interface contains the HTML widget parameters.

[HtmlWidgetRect] rect: Contains the set parameters of the size and positioning of the widget.
[String] url: The URL to use for display.
[optional] [NodeParams] node: Contains the parameters used to specify added Node.js functionality.
[optional] [JavascriptInjection] javascriptInjection: Contains the parameters that specify JavaScript code to inject at different initialization points.
[optional] [bool] bsObjects:Enables or disables BrightScript-Javascript Objects. This value is disabled by default.
[optional] [Storage] storage: Used to configure HTML storage.
[optional] [String]inspectorServer: Enables the Chromium Inspector, which allows you to debug JavaScript applications while a webpage is running. Starting in BOS 8.5.31 you will need to also set the enable_web_inspector registry key (in the "html" section) to enable the JavaScript console.
- To access the console, navigate to the player IP address at the specified port number. See this page for documentation relating to the JavaScript console.
- In “enable_web_inspector”, "1" will allow the inspector and "0" or not present will disable it. A reboot will be needed for these changes to take effect (if you enable/disable this through the LDWS UI, it may trigger a reboot to apply the change).

Warning

Important

For security reasons, enable_web_inspector should only be used in non-production presentations. Make sure to disable JavaScript console before publishing to a production environment. In the Chromium version found in BOS 8.5.31 and beyond, the JavaScript console will log information in memory even when you are not connected to the inspector. This will consume memory until the player runs out, which will result in a crash.

[optional] [bool] inputEnabled: Enables mouse/touchscreen events. This value is false by default.
[optional] [Security] security: Override Chromium security checks.

HtmlWidgetRect

This interface allows you to set the size and positioning of the widget rectangle.

[long] x: Specifies the x coordinate for the widget.
[long] y: Specifies the y coordinate for the widget.
[long] width: Sets the width of the widget in pixels.
[long] height: Sets the height of the widget in pixels.

NodeParams

This interface allows you to enable Node.js and define the parameters of the Node.js command-line arguments.

[bool] enabled: Enables Node.js on the widget. The value is false by default.
[optional] [Array<String>] arguments: An array specifying command-line arguments.

JavascriptInjection

Use this interface to inject user scripts into the JavaScript engine.

[optional] [JavascriptInjectionDetailList] documentCreation: The script will run as soon as the document is created. This behavior is not suitable for any DOM operation.
[optional] [JavascriptInjectionDetailList] documentReady: The script will run as soon as the DOM is ready. This behavior is equivalent to the DOMContentLoaded event firing in JavaScript.
[optional] [JavaScriptInjectionDetailList] deferred: The script will run when the page load finishes.

JavascriptInjectionDetail

This interface defines the user scripts that are used by the JavascriptInjection interface. Exactly one of the source, uri, or code fields must be defined.

[optional] [String] world: Isolates user scripts into different worlds. This string can be assigned one of the following values: application, user, or main (see this page for more details); if the world parameter is not included in the array, "application" is selected by default.
[optional] attribute String source: Deprecated. Use uri or code instead.
[optional] attribute String uri: If defined, this must contain either a "file" URI, or a "data" URI with one of the following supported formats:
- "data:text/javascript;charset=utf-8;"
- "data:text/javascript;charset=utf-8;base64,"
- "data:text/javascript;charset=us-ascii;"
- "data:text/javascript;charset=us-ascii;base64,"
[optional] attribute String code: If defined, the content will be executed as JavaScript code.

Storage

This interface allows you to define the following HTML storage parameters:

[String] path: The folder used by local storage applications such as the JavaScript storage class.
[long] quota: The size (in bytes) allotted to all local storage applications (including IndexedDB). If the storage path is specified without a storage quota, Chromium defaults to reserving 1GB plus 10% of the total size of the storage device.
[bool] forceSharedStorage: Allows HTTP/HTTPS loaded URLs to share local storage if they are loaded from the same domain.
[bool] forceUnsharedStorage: Prevents file loaded URLs from sharing storage.
Notetitle

Note

Data can be corrupted if two HTML widgets access the database at the same time, but some applications rely on this type of access. Use the force_unshared_storage flag to avoid sharing on local URLs if you experience data problems, or use the force_shared_storage flag to allow sharing on HTTP/HTTPS sites.

(If both flags are set, file storage is separated and HTTP storage is not.)

Security

Overrides Chromium security checks for these parameters:

[optional] [bool] insecureOriginEnabled: Ignore insecure origins and treat them as enabled.
[optional] [bool] cameraEnabled: Enables webpage access to USB cameras connected to the player (access is disabled by default). This allows support for WebRTC applications.
[optional] [bool] desktopCaptureEnabled: Enables desktop capture.
[optional] [bool] audioCaptureEnabled: Enables audio capture.
[optional] [bool] insecureHttpsEnabled: Ignore security errors when connecting to insecure HTTPS hosts (insecure HTTPS is disabled by default). Enabling this feature makes the player insecure; it is not suitable for production environments and should only be used for testing.

With BOS 8.2 and later (Chromium69 and later), several new CORS checks have been added. security_params.websecurity or enableSecurity(false) do not disable all these checks. Use the following registry setting instead:

registry write html disable-web-security 1

This flag will take effect on all htmlwidget instances, as opposed to previous flags which are only effective on the instance they are called on.

To write this to the registry using roRegistrySection:

Code Block

language	js

RegHtml = CreateObject("roRegistrySection", "html")
RegHtml.Write("disable-web-security", "1")
RegHtml.Flush()

Versions Compared

Old Version 44

New Version 45

Key

Object Creation

HtmlWidget

postMessage()

close()

HtmlWidgetParams

HtmlWidgetRect

NodeParams

JavascriptInjection

JavascriptInjectionDetail

Storage

Security