803-ESP32_SDK开发-手机连接ESP32的热点,使用微信小程序查看摄像头图像(WiFi视频小车,局域网视频监控)
<p><p><iframe name="ifd" src="https://mnifdv.cn/resource/cnblogs/LearnESP32" frameborder="0" scrolling="auto" width="100%" height="1500"></iframe></p></p><p><iframe name="ifd" src="https://mnifdv.cn/resource/cnblogs/LearnESP32" frameborder="0" scrolling="auto" width="100%" height="1500"></iframe></p>
<h1>说明</h1>
<h2>这一节的功能是使用手机连接ESP32的热点,然后就可以在微信小程序上查看摄像头图像.</h2>
<p> </p>
<h1>效果展示</h1>
<p><img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207135647807-2075281866.png" alt="" loading="lazy"></p>
<p> </p>
<h2>为了方便大家伙扩展应用,增加了几个按键.具体介绍接着看哈.</h2>
<p> </p>
<h1>测试功能(连接模组热点方式)</h1>
<h2>1.把这节的ESP32代码放到非中文目录,然后使用VS Code打开</h2>
<p><img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207140200802-1139728566.png" alt="" loading="lazy"></p>
<p> </p>
<p> </p>
<p><img src="https://img2020.cnblogs.com/blog/819239/202111/819239-20211128142745787-336252854.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<h2>2.编译下载到开发板(第一次编译时间有点长)</h2>
<p><img src="https://img2020.cnblogs.com/blog/819239/202109/819239-20210927234849477-848092703.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<p> </p>
<h2>3.使用微信开发工具打开这节的小程序工程</h2>
<p><img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207140346291-1624238681.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<p> </p>
<p> </p>
<h2>4.编译,预览, 使用微信扫码安装到手机</h2>
<p><img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207140416100-1436247296.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<p> </p>
<p> </p>
<h2>5.设置手机连接ESP32的热点</h2>
<p><img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207140633513-854882082.png" alt="" loading="lazy"></p>
<p> </p>
<p> </p>
<h2>6.然后就可以了</h2>
<p><img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207135647807-2075281866.png" alt="" loading="lazy"></p>
<p> </p>
<h1>测试功能(局域网,连接路由器方式)</h1>
<h2>1.设置下模组连接的路由器名称和密码(根据自家的修改哈),然后编译下载到开发板</h2>
<p><img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207140928362-218776754.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<p> </p>
<p> </p>
<h2>2,查看打印的日志,我的模组路由器给分配的ip是: 192.168.0.102</h2>
<p><img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207141046585-431220516.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<p> </p>
<p> </p>
<h2>3.微信小程序代码里面设置 IPAddress1 为上面的IP地址</h2>
<p> <img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207141157797-1832826522.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<p> </p>
<h2>4.如果电脑和开发板在一个局域网下,电脑上面也可以看到图像了</h2>
<p><img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207141353792-173306445.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<p> </p>
<h1>关于按键</h1>
<h2>点击前后左右按键,会打印上下左右的箭头,具体看下面的程序介绍</h2>
<p><img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207141611158-2083080572.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h1>源码说明(ESP32源码)</h1>
<h2>1.整体说明</h2>
<h3>程序上启用了两路UDP,一路用来传输图像(8888端口),另一路用来传输按键数据(9999端口)</h3>
<p> </p>
<h2>2.UDP(传输图像)</h2>
<h3>1,基本的UDP啥的就不说了哈,就是在官方提供的例子上修改的. </h3>
<p> </p>
<h3>2,启动UDP任务</h3>
<p><img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207142800631-1386866636.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<p> </p>
<p> </p>
<h3>3,UDP接收到数据之后判断下是否采集完了一幅图像,如果采集完了,同时接收到命令, 就把图片数据发给客户端</h3>
<p>命令是 0x55 0xaa 0x01 0x02</p>
<p><img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207142917728-1791040927.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<p> </p>
<h2>2.UDP(按键数据)</h2>
<h3>我这里只是打印了下,具体实施大家伙可以做.</h3>
<p><img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207143208116-1288047164.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<p> </p>
<p> </p>
<h1>源码说明(微信小程序源码)</h1>
<h2>1.创建UDP</h2>
<p><img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207143538306-405007644.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<p> </p>
<h2>2.使用定时器轮训发送数据</h2>
<p><img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207143627414-1203751766.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<p> </p>
<h2>3.接收图片数据并把图片数据流添加到image控件</h2>
<p><img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207143830823-2073180737.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<p> </p>
<p><img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207143856494-698899699.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p>
<p> </p>
<h2>4.关于按键</h2>
<h3>按键数据的前两个数据是固定的: 0x55 0xaa</h3>
<h3>后面一个数据是根据按键状态改变的,</h3>
<h3>按下前进(0x01),</h3>
<h3>按下后退(0x02),</h3>
<h3>按下左转(0x03),</h3>
<h3>按下右转(0x04),</h3>
<h3>凡是松开哪一个按键最后一个数据都会变为 0x00</h3>
<p><img src="https://img2020.cnblogs.com/blog/819239/202112/819239-20211207143936092-314259933.png" alt="" class="medium-zoom-image" loading="lazy"></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/yangfengwu/p/15671232.html
頁:
[1]