node-red-dashboard-2-webrtc-viewer 0.3.0

WebRTC viewer widget for FlowFuse Dashboard 2.0

npm install node-red-dashboard-2-webrtc-viewer

node-red-dashboard-2-webrtc-viewer

WebRTC video viewer widget for Node-RED Dashboard 2.0.

Designed for viewing WebRTC/WHEP streams such as MediaMTX.

Features

• WebRTC/WHEP playback
• Stream URL configuration
• Custom WHEP URL support
• Configurable port for relative URLs
• Full URL and relative URL support
• Automatically uses Stream URL + /whep when WHEP URL is not specified
• Dynamic stream URL via msg.payload
• Dynamic WHEP URL via msg.whepUrl
• Dynamic stream name via msg.topic
• Automatic reconnection
• Configurable reconnect interval
• Connection status display
• Click viewer to open the stream URL in a new browser tab

Stream URL and WHEP URL

The widget uses two independent URLs:

• Stream URL — The URL of the stream. This URL is also opened when the viewer is clicked.
• WHEP URL — The endpoint used to establish the WebRTC connection.

For MediaMTX, you can leave the WHEP URL empty. The widget automatically uses:

Stream URL + /whep

Using a Full URL

You can specify a complete URL, including the protocol, hostname, and port.

For example:

Stream URL:
http://192.168.0.100:8889/screen1

WHEP URL:
(empty)

The widget automatically uses:

http://192.168.0.100:8889/screen1/whep

When a Full URL is specified, its hostname and port are preserved. The configured Port setting does not override the port in a Full URL.

Using a Relative URL

You can also specify a relative URL instead of a Full URL.

For example:

Stream URL:
/screen1

Port:
8889

WHEP URL:
(empty)

If the Dashboard is accessed at:

http://192.168.0.100:1880/dashboard/

the widget resolves the Stream URL to:

http://192.168.0.100:8889/screen1

The automatically generated WHEP URL becomes:

http://192.168.0.100:8889/screen1/whep

Relative URLs use the hostname of the current Dashboard page. The configured Port setting determines the port used for the resolved URL.

If Port is left empty, the current page's port is used.

For example, with the same Dashboard address and an empty Port setting:

Stream URL:
/screen1

the resolved URL is:

http://192.168.0.100:1880/screen1

Note: When using a relative URL, make sure the configured Port matches the port exposed by your streaming server.

Custom WHEP URL

If your WHEP server uses a different endpoint, specify the WHEP URL directly.

Stream URL:
https://example.com/camera1

WHEP URL:
https://example.com/api/webrtc/camera1

The Stream URL and WHEP URL are handled independently. Changing one does not automatically modify the other.

The configured Port setting applies to relative URLs. Full URLs retain their specified hostname and port.

Dynamic Stream URL

The stream URL can be changed dynamically by sending a string in msg.payload.

msg.payload = "http://192.168.0.100:8889/screen2"

return msg

When the URL changes, the viewer automatically reconnects to the new stream.

The same URL resolution rules apply to dynamically supplied URLs:

• Full URLs retain their specified hostname and port.
• Relative URLs use the current Dashboard hostname and the configured Port setting.
• If Port is empty, the current page's port is used.

If no WHEP URL is configured, the widget uses the resolved Stream URL to construct the WHEP endpoint:

Resolved Stream URL + /whep

Dynamic WHEP URL

The WHEP URL can be changed independently using msg.whepUrl.

msg.whepUrl = "http://192.168.0.100:8889/screen2/whep"

return msg

When the WHEP URL changes, the viewer automatically reconnects using the new endpoint.

The same URL resolution rules apply to msg.whepUrl.

An empty msg.whepUrl clears the custom WHEP URL and makes the viewer fall back to:

Resolved Stream URL + /whep

For example:

msg.whepUrl = ""

return msg

Dynamic Stream Name

The stream name can be changed dynamically using msg.topic.

msg.topic = "Projector 1"

return msg

The topic is displayed as the stream name in the viewer.

Changing only msg.topic does not cause a WebRTC reconnection.

Message Properties

The widget uses the following message properties:

If multiple properties are included in the same message, they are processed independently.

For example:

msg.payload = "http://192.168.0.100:8889/screen2"
msg.whepUrl = "http://192.168.0.100:8889/screen2/whep"
msg.topic = "Projector 2"

return msg

This changes the Stream URL, WHEP URL, and stream name, then reconnects using the new URLs.

Initial Configuration and Message Priority

The viewer initializes its values from the Node configuration:

• Stream URL
• Port
• WHEP URL
• Stream name
• Reconnect interval

When the Dashboard is loaded, the last stored message is applied after the Node configuration.

Therefore:

1. Node configuration is used as the initial value.
2. Values provided by the last message override the corresponding configuration values.
3. The viewer establishes the WebRTC connection using the resulting values.

Only properties present in the message are changed.

For example, if the Node is configured with:

Stream URL:
/screen1

Port:
8889

WHEP URL:
(empty)

and the last message contains:

msg.topic = "Projector 1"

return msg

the Stream URL and Port remain unchanged, the WHEP URL remains empty, and only the stream name is updated.

Automatic Reconnection

The viewer automatically attempts to reconnect when the WebRTC connection is lost or fails.

The following connection states are displayed when the connection is not established:

• Waiting...
• Connecting
• Disconnected
• Failed
• Closed

When the connection reaches Connected, the connection status is hidden.

The reconnect interval can be configured in the Node settings.

If multiple connection errors occur while a reconnect is already scheduled, additional reconnect timers are not created.

Install

npm install node-red-dashboard-2-webrtc-viewer