应用案例

应用案例记录典型的应用实现方法，并对某些场景下Node-App的处理方式进行说明。

与ESP32的HTTP服务通信

在线样例：RC-Panel

RC-Panel是一个Wi-Fi视频小车控制器。小车由带有摄像头的ESP32模块控制，模块上运行Node-Camera固件。RC-Panel需要与Node-Camera固件通信，获取实时视频、发送控制指令（LED开关，转向驱动控制）。

假设ESP32模块在局域网内的IP地址为192.168.1.5，Node-Camera固件提供的（部分）Wi-Fi接口有：

1. HTTP视频接口 - http://192.168.1.5:81/stream
2. WebSocket视频接口 - ws://192.168.1.5:81/stream
3. WebSocket指令接口 - ws://192.168.1.5/socket/cmd

访问HTTP视频接口的简单方法是将一个 image 元素的URL源（src）设置为HTTP视频接口的URL：

Node-App应用的默认URL地址为https://nodematrix.cn/app/...。其对Node-Camera的访问是跨源且跨协议访问。Node-Camera提供的接口支持跨源资源共享（CORS），但浏览器会阻止HTTPS协议的页面（应用）访问HTTP资源（Node-Camera）。因此，需要以HTTP协议打开应用，对应的URL为：

http://nodematrix.cn/app/...

对于Firefox或Safari浏览器，此时已经可以访问HTTP视频接口。如果是Chrome或Edge浏览器，请继续往下看。

Android上的Chrome浏览器会将URL中的http://自动修改为https://。参考How to Stop Chrome from Automatically Redirecting to https。文章提供了一些方法，但这些方法可能在Chrome的后续版本中失效，或不被Chrome的Android版本支持。Node-App的解决方法是，当应用的URL带有查询参数?http时，这个请求将被跳转到http://协议。也就是说，当用户以URL地址：

http://nodematrix.cn/app/...?http

打开应用时，Android上的Chrome浏览器会将URL中的http://替换为https://，但Node-App服务端发现该请求带有查询参数?http，因此请求被服务端跳转回http://。在Node-App工具栏 （App链接）的下拉选项中提供了带?http查询参数的URL链接。

另外，Chrome或Edge浏览器认为Node-Camera的局域网IP地址192.168.1.5属于“更私有的地址空间”（more-private address space），并阻止应用访问Node-Camera的HTTP视频接口，而对于WebSocket接口则不会阻止。应用可以连接Node-Camera的WebSocket指令接口，开关LED并控制小车运动，但无法通过HTTP接口获取视频。

解决方法是使用Node-Camera提供的WebSocket视频接口。RC-Panel样例使用Node-Camera插件块 stream 访问WebSocket视频接口，并将视频流输出到 image 元素（Img）：

总结

1. 跨源访问硬件HTTP或WebSocket资源时，需要以HTTP协议打开应用。
2. WebSocket协议可以实现更好的浏览器兼容。