Eson Wong's Blog

编程笔记,投资记录, 读书总结, 生活心得

0%

小红花的 Netowrk RC 在线分享 - Eson Wong

首先大家好,我是 Eson,然后感谢小红花为我提供的这么一个分享的机会,今天我来分享的是我用业余时间开发的一个控制作网络遥控车的开源项目,叫做 Network RC。

我先做个简单的自我介绍,我做了九年的 web 前端开发,现在在广州天河一家智能硬件公司做技术 Leader。

这次分享的内容,分为以下五个部分。第一个部分,详细的介绍一下这个项目。第二部分给大家实际演示一下,实机操作分屏幕分享大家看看。然后第三个部分就介绍一下用做这个遥控车主要的是哪几个硬件组成,我最初一开始实现的目标是用尽可能低的成本去实现一个可以远程操作的遥控车。第四个部分的话,就介绍一下我做的这个软件突出特性。第五个部分的话,就挑一两位观众来试玩一下这个遥控车, Network RC 有一个分享给网友操控的功能。

Network RC 介绍

下面就开始介绍一下 Network RC,主要分为两部分:一部分是运行在车子的树莓派上面,它是用来控制这个车子硬件的;一部分是控制端,它是可以在浏览器上运行,不管是 PC 端还是移动端浏览器或者各个操作系统平台都可以运行。

在 PPT 这个左边第一个图是我开发的 RC 的一辆原型车,左边这个黑盒子里面是树梅派,蓝色的这一块就是电池,白色这是一个 4G 网卡。

第二个图是我在广州,在自己家用手柄去操控上海网友用 Network RC 制作的一辆遥控车。

第三个图是展示 Network RC 的手机界面,你可以用 PC 也可以用手机控制。

第四个图,这里是一个方向盘,这里可能太小看不清,反正是可以支持用方向游戏游戏给赛车游戏用的方向盘去控制的。

Network RC 它有这么几个特性。首先它是开源免费的,然后,他需要的硬件设备和安装过程也都是非常的简单。它还支持多摄像头,就是你可以用一个前置,一个后置摄像头,避免视野的盲区。然后还支持语音对讲和自定义通道,通道是控制硬件的信道。Network RC 不仅可以控制车的前进后退和方向,就是油门和舵机。还可以控制云台,云台它一船是由两个通道组成一个 X 轴、Y 轴。你还可以自定义更多的通道,用来控制那些机械设备。

最重要的特性就是它的延迟,不管是控制延迟还是图传的延迟。图传的延迟它可以做到百毫秒的级别。

然后软硬件兼容性。如果你们玩过那个遥控车,能够区分玩具遥控车跟 RC 遥控车的话就知道。遥控车的档位,从玩具到高端的遥控车,他其实它有很多种价位,Network RC 的兼容性就比较好。

控制端,我刚刚说了,它是基于浏览器的,所以它是跨平台的,具有非常好的兼容性。

演示

好,接下来我就演示一下我的遥控车,它现在在我们家阳台上,我给你们演示一下。

这是 Network RC 的控制端的界面。上面这一排,就是控制车那边的开关,这是控制端的麦克风,车端的麦克风,Network RC 是有语音对讲的功能的。

然后这个是编辑 UI 的开关,可以编辑我们的控制端的 UI,就像游戏的操控 UI 一样,可以去编剧去拖动它的位置和改变大小。客户端要适配各类尺寸和比例的屏幕,还可以添加更多通道的 UI,所以需要让用户自己去自由的编辑。

这里面的话是一些设置,这里面涉及到很多设置项,连接设置,基本的设置。这里就是刚刚我们编辑那些 UI,我们可以增加更多的 UI 去控制更多的硬件,这里还有一些摄像头、声音、分享。

分享控制就是用到这个功能去分享一个控制链接,打开就可以远程的完我的遥控车。

下面这些的话是可以调整它的油门的大小。如果你连接手柄的话,这个手柄开关就会自动打开,可以用手柄控制或者把它关掉,就可以禁用手柄。这个重力开关是可以用手机的陀螺仪来控制。这里列出了我们可以用哪些键盘去来控制这个遥控车。这是一个播放内置音频的一个按钮,这里面可以这里面有更多的音频。可以通过设置里面去自定义。

大致的介绍就到这里,然后演示一下它的移动。我用现在是用键盘在控制 wsad 是控制它的移动,可以看到延迟是非常小的。然后云台控制云台控制是 ikjl 这四个键,可以通过云台来控制摄像头的角度。这辆车的话还可以看到车的内部,内部有电池的电压的显示。未来这些电压什么的监控都会做到软件里面,以后还会慢慢的更新。那好,那就演示的部分就到这里。

制作材料

接下来就给大家介绍一下制作材料。主要的制作材料就是。一个是树莓派,然后是遥控车,然后是网络设设备。

首先我们来讲树莓派,被控端是运行在树莓派上,然后控制端的 web 服务也是运行在树莓派上的。树莓派在维基百科上的描述是为学习计算机编程教育而设计的只有信用卡大小的微型电脑,系统是基于 Linux。它有很多的 GPIO 接口,可以用来控制遥控车的硬件,像上面这一排 40 个针脚,其中大部分针脚都是可以通过 PWM 和电平信号控制硬件,也就是就是那种频率信号和高低电平信号来控制这个硬件。

树莓派还有一个更小的版本 zero。可以让遥控车的成本制作更低,个占用的内部空间也更小,现在我已经。支持 zero 2 w。

然后说一下什么样的遥控车的支持。首先玩具遥控车,有的没有舵机,舵机是用来控制转向角度的,没有转向舵机,他就改不了。然后没有电调的话,我们可以去某宝上去买来改装。所以只要只要你的车能装上三线的电调和三线的转向舵机,它就可以用来改装这个网络遥控车。

这个图就是转向舵机和电调的接线的方法,我们还可以就接近刚刚我演示过那个摄像头的云台。然后还可以加加装一些开关,这是 Network RC 内置的默认的硬件的接线图。Network RC 支持 27 路的硬件通道,还可以扩展它去远程控制其它的硬件。

网络设备,如果你想远程玩的,我们一定要是提供一个网络设备的。但是你如果再放在家里面,连自己家里路由器就可以。

如果远程玩的话,你可以用一个旧手机的热点。或者用 4G/5G 的移动路由器来让这个树莓派连接网络。然后我们就可以远程的去操控它。当然你也可以用一些工业级的树莓派的一些 4G 或者 5G 模块。但是这个成本一般都很高。

除了上面那些硬件,Network RC 的用户,网络遥控车爱好者们,或者说用户他们为了有更方便的去让大家能制作遥控车,都纷纷自己贡献出自己的技能。像这块拓展版就是我们我的一个叫做龙卷风的爱好者绘制的一个扩展版。有了这个板子之后,车子的连接只要直接插上接口,不需要很复杂的接线了。它可以让制作 Network RC 遥控车变得更简单。未来,我还会针对这个扩展版来扩展它测量电池电压的功能,让控制短能够随时的知道电池的电量。

还有这一块扩展版也是这个爱好者绘制的,它可以接上航模电池就可以给树梅派供电,还可以给树莓派扩展 usb 接口。扩展了 usb 接口,你又可以接更多的摄像头或者音频设备,或者网络网络设备。

这也是 Network RC 者爱好者绘制的一些配件,这个摄像头的云台。某宝上当然也有这种云台售卖,但是相比好得多,所以做的这两款的话体积比较,还比某宝上那种便宜的。某宝的那个质量和和精度都达不到我们想做的遥控车的一些要求。

软件特性

接下来给大家介绍一下 Network RC 最重要的一个软件特性,就是的视频的延迟。

远程遥控车对视频的延迟的要求就是比较高,我在设计整个 Network RC 的时候,把视频的延迟的优先级设定的比较高。右边这个图,是在 4G 网络下的延迟表现。我的电脑是联通的宽带,遥控车是用一个 4G 网卡连接的,网络的延迟在 216 毫秒。

视频传输,我在开发的过程当中是经过多次优化和改进的。我们接下来我们来一步一步的看图传方案的改进。

首先一开始的话,我是树梅派的摄像头采集到视频画面之后用树莓派的 H264 硬编码进行进行视频的逐帧编码,然后再通过 FRPS 中转服务器, 再传输到浏览器端,再通过 H264 逐帧解码绘制到 canvas 的。第一个版本的话,可能就基本满足了我个人的一个需求。

但是树它非常依赖中转的服务器,服务器的距离和带宽非常影响 Network RC 用户的使用。

所以我又对改进,就是重新开发了基于 WebRTC 的方案。WebRTC 是网页浏览器进行实时语音对话或者视频对话的 API。

它在 2011 年是由谷歌和摩托罗拉,还有 Opera 支持的支持下,被 W3C 纳入标准的。现在已经发展了十十多个年头了。我们现在大部分基于网页的视频聊天,不是大部分可以说是所有的基于网页的视频聊天。甚至有些基于网页的直播平台,都是用 WebRTC ,基于这个技术去支撑他们的那个业务的。它的好处是可以网络穿透的情况下,不依赖中转服务器,可以直接连接到两个终端, p2p 点对点的连接,可以在浏览器之间去实现这么一个东西。然后,我的实现,就是用树梅派,也是作为一个 WebRTC 的一个终端,然后浏览器一个终端,树莓派和浏览器能够建立点对点连接。

但是,最后他还是产生了一个问题,就是它的画面延迟大。为什么?这整个解决方案虽然是针对。针对视频会话来设计的,网络遥控车对这个视频的延迟要求比这个视频会议要求更高。WebRTC 的视频编码和解码,更多的是考虑画面的延迟和质量的平衡,延迟和质量的平衡。我在使用 WebRTC 这个版本的时候,就发现他的编码延迟和这个缓冲延迟,比 Websocket + H264 逐针编码的方案就要大一点,而且它不能 100% 去建立点对点的连接。

后来的话就有了这个 WebRTC 数据通道加逐帧视频传输的最终方案。

这个方案是怎么样的?首先他我我保留了 Websocket 的整套方案,然后把 WebRTC 的方案进行了改进。用 WebRTC 数据传输通道来传递这个 H264 逐帧编码数据,然后传给浏览器,同样是通过浏览器的 H264 解码再绘制在 cavans 上,放弃了那个使 HTML5 的 video 标签进行那个视频解码,因为 video 标签的缓冲在各个浏览器里面,这个缓冲的大小是没办法去优化的。最终的效果就是最大程度的兼容了网网络环境。优先使用低网络延迟方式,也就是说用如果 WebRTC 打通了的话,所有的视频数据都会去走点对点通信这条网络路径。然后是低延迟的视频编解码,无缓冲视频解码与播放,最终就是达到我现在希望的一个效果。

这个就是 Network RC 技术上可能比较复杂的一块了。但是在功能和特性上,除了这个还有其实很多我想讲的,但是这次分享的话。就。就不啰嗦那么多了。

然后讲一下这个软件两端的一些依赖,就主要用到的一些技术。不管是控制还是浏览器,但我们主要的开发语言都是 JS,控制端的是用 Node JS。还有 express 这个 web 服务器。 wrtc 这个 Note JS 的 WebRTC 库。还有这个比较知名的视频转码的工具 ffmpeg。还有,这个是用来做网络穿透的也是一个比较知名的工具了,FRP。

浏览器端,我是用 React。还有这里是一个叫做 Broadway 的一个库,是用来在用 JS 去对 H264 解码的一个库。最主要的技术就是这么几个。

试玩

接下来我们进行试玩,有没有报名的小伙伴。

然后那我这边就分享完了。

欢迎关注我的其它发布渠道