Node-App User Manual

English

中文

English

中文

Appearance

Node-Camera ​

The Node-Camera plugin is used to interact with the Node-Camera firmware running on the ESP32 module.

ESP32 modules

The Node-Camera firmware allows users to access hardware resources through configuration. Refer to the Node-Camera User Manual.

The firmware provides multiple network interfaces (video, command, serial-WebSocket, etc.). These interfaces can be accessed using the Network blocks of Node-App. Considering browser cross-origin access restrictions, it is recommended to use the WebSocket interface to interact with the firmware. The Node-Camera plugin simplifies access to the firmware's WebSocket video interface. For command and serial-WebSocket interfaces, the WebSocket blocks in the Network category can be easily accessed without the need for further encapsulation by the plugin.

  1. Node-Camera Firmware Interface: Node-Camera User Manual - Interfaces and Commands
  2. Browser cross-origin access use case: Communicating with ESP32's HTTP service

Stream Socket ​

The Node-Camera plugin provides a series of blocks for accessing the firmware's WebSocket video interface (firmware enables Stream Socket). For simple applications, only the stream block is needed to implement WebSocket connection control, video on/off, and acquiring static images. It also provides a user interface control. The other blocks allow you to set up interface or control video stream programmatically.

Online example: RC-Panel

stream ​

stream (stream control) is an HTML control block that appears as an HTML group in the interface.

CAM

The ID attribute is a unique identifier for the UI element and the specific stream control. Blocks interacting with the control use this ID to reference it. The optional image ID attribute specifies the ID of the HTML image element for displaying the video stream.

The control has built-in WebSocket settings and connect/disconnect functions, and handles reconnection and status indication. After a successful connection, the button controls video on/off, and the button acquires static images. Clicking the Setup button opens the target (ESP32 HTTP server) URL settings:

CAM Settings
ws://

See stream set url for setting details. Settings are stored in the browser's local storage.

Clicking Connect connects to the set URL, triggers a connection event, and updates the control's connection status. You can use the associated event response blocks to handle these events.

Applying the CSS class hidden will hide the control. In this case, the control's operations (setup, connect/disconnect, etc.) can be performed by the corresponding function blocks.

Attributes

  • ID - Stream control ID.
  • image ID - The HTML image element ID for displaying video or static images (optional).

stream open settings ​

stream open settings provides a way to open the stream control settings using code blocks. The settings are normally opened by clicking the Setup button on the control. When the control is hidden, or you want to open the settings in a custom way (such as clicking a custom button), use stream open settings.

Attributes

  • ID - Stream control ID.

stream get settings ​

stream get settings retrieves the stream control settings, returning a JavaScript object. If the control is not configured, it returns an empty object {}. See stream set url for setting details.

Attributes

  • ID - stream control ID.

stream set url ​

stream set url sets the target URL address of the stream control in the program. The target URL can be set through the UI (user setting), or by the stream set url block in the program (developer setting).

The target URL connectes to the right-side input socket as text. For example:

  • ws://192.168.1.5:81/stream
  • ws://camera.local:81/stream

Attributes

  • ID - Stream control ID.

stream connect ​

stream connect controls the stream WebSocket connection or disconnection in the program.

Attributes

  • ID - Stream control ID.
  • action - Action:
    • connect - Connect.
    • disconnect - Disconnect.

stream command ​

stream command sends control commands after a successful stream WebSocket connection.

Attributes

  • ID - Stream control ID.
  • command - Control command:
    • stream - Start video streaming.
    • stop - Stop video streaming.
    • still - Get a static image.

stream connect event ​

websocket connect event responds to WebSocket connection events: connection start, connection success, and connection closed. When the WebSocket client triggers a connection event, the program jumps to the corresponding websocket connect event block to start execution.

Attributes

  • ID - Stream control ID.
  • event
    • starts - Connection starts. Triggered when the control initiates a WebSocket connection.
    • connected - Connection successful. Triggered when the control successfully connects to the WebSocket server.
    • closed - Connection closed. Triggered when the WebSocket connection fails or disconnects. After an abnormal disconnection (not manually disconnected), the control will automatically reconnect, no handling is needed here.

when stream receives ​

when stream receives responds to stream receiving events. When the stream control receives image data, the data is saved to the specified variable, triggering the receives event. Then, the program jumps to the corresponding when stream receives block to start execution.

Attributes

  • ID - Stream control ID.
  • image@ - The variable name to store the image data (default: Image). The data content is a complete JPEG image.

You can use the create object url block in the Utils category to convert the JPEG image data into a URL, which can then be used as the src attribute of an image element to display the image. For example: