亲,“电路城”已合并到全星升级的「与非网」。了解新「与非网」

  • 方案介绍
  • 相关文件
  • 相关推荐
  • 电子产业图谱
申请入驻 产业图谱

       大家好,上一期我推出了 :基于ESP32CAM的物联网相机系统⑧(用原生JavaWeb实现双摄像头WIFI图传)  感兴趣的买家可以去搜索关键词获得下载地址。当时ESP32CAM 摄像头传输图片的方式还是停留在http请求提交上传图片,这样缺点是:不能长期与服务器保持长链接,也不能与网页保持长连接。

       本次作品是基于WebSocket技术实现JavaWeb服务器图传。项目的前身是:基于ESP32CAM实现WebSocket服务器实时点灯  在电路城可以免费下载,使用现在最流行的WebSocket技术在ESP32CAM上构建一个Websocket服务器实时响应浏览器客户端的请求,实现实时点灯,这次客户端再也不用发送get或者post请求响应了。那么这次项目在功能上有了很大的升级,在原来项目的基础上,实现三种方式实现Websocket图传:

(1)Websocket客户端图传(闭源);如下图所示:

(2)网页客户端base64图传(开源);如下图所示

(3)网页直接用websocket提交表单实现blob图传(开源)

      说明:上述三个功能是当今全栈开发和物联网开发的核心技术,一般人都不愿意这样开源出来的。作为一个全栈工程师,当我一个技术玩腻了之后我就会打算开源出来。当今华为也在研究万物互联,作为公司的核心主攻方向,作为个人开发者,我也不示弱,我个人开发了基于ESP32CAM的物联网相机系统,当中涉及了多个学科的融合。真的能在技术上做到一夫当关万夫莫开。

下面是B站演示视频:

下面是软件环境介绍:

(1)用jdk1.7和tomcat7开发javaweb,利用tomcat的库函数实现了websocket图传技术。如果要改成jdk1.8和tomcat8也是很容易的,我个人比较怀旧。前端代码用html,JavaScript,后端代码用java。

(2)没有涉及到ESP32CAM单片机,所做的图传都是用软件来模拟的,后期会加入单片机实现网页图传技术

(3)服务器部署在Eclipse上,浏览器是客户端,websocket客户端,这两个客户端连上服务器

(4)图传的三个方式中,前两个只能传小图,第三种方式可以传大图。

原创代码截图展示:

(1)服务器前端代码:

(2)服务器后端代码:

(3)前端页面显示效果(使用谷歌两个浏览器测试):

(4)Websocket客户端调试过程

技术知识点:

base64编码和解码,JavaScript,java,websocket,表单提交,网页长链接技术,图传技术,网页聊天室核心技术,服务器架设,客户端与服务器通信技术。

后记:daodanjishui核心物联网技术,原创不易,请多多支持原创。后期加入单片机ESP32CAM实现照相机共享图片系统的设计。

 

  • 2.png
    描述:测试图片
  • WebSocketTest.zip
    描述:服务器前后端代码
  • 教程.docx
    描述:测试教程
  • websocket客户端测试工具 v4.20免费版.exe
    描述:websocket闭源客户端

相关推荐

电子产业图谱