Use Cases

Use cases document typical application implementation methods and explain how Node-App handles specific scenarios.

Communicating with ESP32's HTTP service

Online example: RC-Panel

RC-Panel is a Wi-Fi video car controller. The car is controlled by an ESP32 module with a camera, and the module is running Node-Camera firmware. RC-Panel needs to communicate with the Node-Camera firmware to get real-time video and send control commands (LED on/off, steering drive).

Assume the ESP32 module's local IP address is 192.168.1.5. The (partial) Wi-Fi interfaces provided by the Node-Camera firmware are:

1. HTTP video interface - http://192.168.1.5:81/stream
2. WebSocket video interface - ws://192.168.1.5:81/stream
3. WebSocket command interface - ws://192.168.1.5/socket/cmd

A simple way to access the HTTP video stream is to set the URL source (src) of an image element to the HTTP video interface URL:

The default URL address of the application created by Node-App is https://nodematrix.cc/app/.... Accessing Node-Camera from here is cross-origin and cross-protocol. The interface provided by Node-Camera supports Cross-Origin Resource Sharing (CORS), but the browser will block HTTPS protocol pages (applications) from accessing HTTP resources (Node-Camera). Therefore, you need to open the application using the HTTP protocol:

http://nodematrix.cc/app/...

For Firefox or Safari browsers, you can now access the HTTP video interface. If you are using Chrome or Edge, please continue reading.

Chrome on Android will automatically change http:// in the URL to https://. See How to Stop Chrome from Automatically Redirecting to https. The article suggests some solutions, but they might not work with later versions of Chrome, or on the Android version of Chrome. Node-App's solution is that if the application URL has a query parameter ?http, the request will be redirected to the http:// protocol. So, when you open the application using the URL:

http://nodematrix.cc/app/...?http

Chrome on Android will change http:// in the URL to https://, but the Node-App server sees the ?http query parameter and redirects the request back to http://. A URL with the ?http query parameter is available in the drop-down options of the Node-App toolbar's (App Link) icon.

Furthermore, Chrome and Edge consider Node-Camera's local network IP address 192.168.1.5 to be in a "more-private address space" and prevent the application from accessing Node-Camera's HTTP video interface; however, they do not block the WebSocket interface. The application can connect to Node-Camera's WebSocket command interface to control the LED and car's movement, but cannot retrieve video via HTTP.

The solution is to use the WebSocket video interface provided by Node-Camera. The RC-Panel example uses the Node-Camera plugin block stream to access the WebSocket video interface and output the video stream to the image element (Img):

Summary

1. When accessing hardware HTTP or WebSocket resources from a different origin, open the application using HTTP.
2. The WebSocket protocol provides better browser compatibility.