Node-App 使用说明

中文

English

中文

English

主题

Node-Camera ​

Node-Camera插件的作用是与运行在ESP32模块上的Node-Camera固件交互。

ESP32模块

Node-Camera固件允许用户通过配置来访问硬件资源。参考Node-Camera使用说明。

固件提供了多种网络接口（视频、指令、串口透传等），利用Node-App的Network积木块可以访问这些接口。考虑浏览器跨源访问限制，建议采用WebSocket接口与固件交互。Node-Camera插件简化了对固件WebSocket视频接口的访问。对于指令与串口透传接口，Network分类中的WebSocket块即可轻松访问，不需要插件做进一步封装。

  1. Node-Camera固件接口：Node-Camera使用说明 - 指令与接口
  2. 浏览器跨源访问应用案例：与ESP32的HTTP服务通信

Stream Socket ​

Node-Camera插件提供了一系列访问固件WebSocket视频接口（固件启用 Stream Socket）的积木块。对于简单应用，只需要 stream 块即可实现WebSocket连接控制、视频开关、获取静态图片等功能，并提供用户可操作的界面控件。其余的块则提供了在程序中设置接口或控制视频流的方法。

在线样例：RC-Panel

stream ​

stream（视频流控件）是一个HTML控件块，在界面表现为HTML group 形式。

CAM

ID属性作为界面元素唯一标识，同时也是视频流控件标识。视频流关联块通过此ID引用对应的视频流控件。image ID属性（可选）用于指定视频流输出（显示）的图片元素ID（HTML image）。

控件内置WebSocket设置与连接/断开功能，并维护重连和状态指示。当连接成功后， 按钮可以控制视频开关， 按钮可以获取静态图片。用户点击 Setup 按钮将打开目标（ESP32固件接口）URL设置界面：

CAM Settings
ws://

设置项说明见 stream set url 。设置信息保存在浏览器本地存储（Local storage）中。

点击 Connect 按钮将连接到所设置的URL，触发连接事件，并更新控件的连接状态。通过关联的事件响应块可以对事件进行相应处理。

连接CSS类名hidden可以将视频流控件隐藏，此时，控件的操作（设置、连接/断开等）可由对应功能块实现。

属性

  • ID - 视频流控件ID。
  • image ID - 用于显示视频或静态图片的HTML image 元素ID（可选）。

stream open settings ​

stream open settings 提供了一种通过代码块打开视频流设置界面的方式。设置界面通常由用户点击控件 Setup 按钮打开。当控件被设置为隐藏模式，或想要以自定义方式（如点击自定义按钮）打开设置界面时，可以使用 stream open settings 打开设置界面。

属性

  • ID - 视频流控件ID。

stream get settings ​

stream get settings 用于获取视频流控件的设置信息，返回数据为JavaScript对象。当视频流控件未设置时，返回空对象{}。设置项说明见 stream set url 。

属性

  • ID - 视频流控件ID。

stream set url ​

stream set url 用于在程序中设置视频流控件的目标URL地址。目标URL可以由控件界面设置（用户设置），也可由 stream set url 块在程序中设置（开发者设置）。

目标URL以文本形式连接于右侧（url）参数槽。例如：

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

属性

  • ID - 视频流控件ID。

stream connect ​

stream connect 用于在程序中控制视频流的WebSocket连接或断开。

属性

  • ID - 视频流控件ID。
  • action - 动作：
    • connect - 连接。
    • disconnect - 断开连接。

stream command ​

stream command 用于在视频流WebSocket连接成功后发送控制指令。

属性

  • ID - 视频流控件ID。
  • command - 控制指令：
    • stream - 开始视频传输。
    • stop - 停止视频传输。
    • still - 获取静态图片。

stream connect event ​

stream connect event 用于响应视频流WebSocket连接相关事件，包括连接开始（starts）、连接成功（connected）、连接关闭（closed）。当视频流控件触发连接相关事件时，程序将跳转到对应的 stream connect event 块开始执行。

属性

  • ID - 视频流控件ID。
  • event
    • starts - 连接开始。当控件发起WebSocket连接时触发。
    • connected - 连接成功。当控件成功连接到WebSocket服务端时触发。
    • closed - 连接关闭。当控件WebSocket连接失败或断开时触发。WebSocket异常断开（非主动断开）后，控件将自动重连，不需要在断开事件中处理。

when stream receives ​

when stream receives 用于响应视频流接收事件。当视频流控件接收到图片数据时，数据将保存到指定变量中，并触发receives事件，程序跳转到对应的 when stream receives 块开始执行。

属性

  • ID - 视频流控件ID。
  • image@ - 保存图片数据的变量名（默认为Image）。数据内容为一张完整的JPEG图片数据。

利用Utils分类中的 create object url 块可以将JPEG图片数据转换为URL形式，作为 image 元素的URL源（src），使图片显示在 image 元素中。例如：