树莓派远程4G遥控车教程（四）- 内网穿透及监控页面集成舵机控制功能
树莓派远程4G遥控车教程（一）-准备工作
树莓派远程4G遥控车教程（二）-相机云台舵机初步调试
树莓派远程4G遥控车教程（三）-摄像头安装及实现局域网实时监控
准备工作
代码及相关包已发布，可在我的资源中下载
出现问题欢迎私信我，大家一起讨论
前面配置已完成已有云服务器和域名（我这里使用的是阿里云服务器）配置方案
本文使用frp进行内网穿透因云服务器都有已经分配好的公网IP地址，本文通过服务端（云服务器）使用frp进行内网穿透，达到访问服务端固定IP地址+端口号，来达到访问内网中树莓派指定端口的功能。配置分为两部分服务端（云服务器）和客户端（树莓派）配置过程
服务端（云服务器配置）
我使用的是阿里云服务器，安装的是Debian系统（x64）。我使用的frp版本应该是frp_0.37.1_linux_amd64.tar.gzfrp版本需要对应操作系统 linux ，对应系统架构amd，位数64位。对应的查询命令（根据自己的服务器进行下载对应版本）uname -a如果当前 Linux 是 64 位则输出 amd64，是 32 位则会输出 i386。
建议使用ssh连接服务器（工具MobaXtem）下载至服务器端的root目录下，使用下面的命令进行解压,，并cd进入该文件夹
tar -zxvf frp_0.37.1_linux_amd64.tar.gz #文件名称更换为自己下载的cd frp_0.37.1_linux_amd64
使用vim编辑器修改服务器配置文件 frps.ini
vim frps.ini
网页代码通过Ctrl+c 复制到vim中可以直接使用 shift+insert将如下内容复制到打开的编辑器中(删除注释)
[common]bind_port = 7000#绑定的端口，需要与客户端中 server_port 参数保持一致vhost_http_port = 9000 #自己设定的http访问端口，之后将通过服务器IP+该端口来访问监控画面dashboard_port = 7500 #后台服务页面的端口，如果设置7500，便可通过 http://yourip:7500 来访问 frps 的后台页面（yourip为你后面内容里设置的服务器ip）dashboard_user = admin #frp 后台服务页面的管理员用户名dashboard_pwd = admin #frp 后台服务页面的管理员密码privilege_token = 13123123 #定义值，必须与客户端中的 privilege_token 保持一致(一种验证机制)
:wq进行保存
配置服务端自启动
使用vim编辑服务sudo vim /lib/systemd/system/frps.service
打开的页面中添加如下内容
[Unit]Description=frps serviceAfter=network.target syslog.targetWants=network.target[Service]Type=simple#启动服务的命令（此处写你的frps的实际安装目录）ExecStart=/root/frp_0.37.1_linux_amd64/frps -c /root/frp_0.37.1_linux_amd64/frps.ini# 此处写你的frps的实际安装目录[Install]WantedBy=multi-user.target
保存后启动frps并开启frps自启动
systemctl start frpssystemctl enable frpssystemctl status frps #查看是否配置成功/启动状态
为云服务器配置宝塔面板
点击查看对应系统版本的安装命令进入宝塔面板后进入安全页面，进行放行上面配置的端口。6000、7000、7500、8000、9000进入阿里云（自己云服务器（云厂商控制台）配置安全组规则）“入方向”规则添加放行端口
在云服务厂商中找到自己购买的域名，进行配置DNS解析（客户端使用）
注意：这里需要自己配置域名将域名解析指向服务器（自行搜索方法）
客户端（树莓派配置）
进行集成页面的编写
目录/home/pi/main/
在main文件夹下
先写服务端（text.py）使用了tornado框架进行开发
# coding=utf-8import MobileCamera as Mobimport tornado.ioloopimport tornado.web# 引入tornado# 运动方法def left():Mob.setServoAngle(17,30)def dextroversion():Mob.setServoAngle(17,140)def lookUp():Mob.setServoAngle(18,40)def lookDown():Mob.setServoAngle(18,120)def inde():Mob.setServoAngle(17,80)Mob.setServoAngle(18,80)def custom(leftCust,upCust):Mob.setServoAngle(17,leftCust)Mob.setServoAngle(18,upCust)# 接口class Maina(tornado.web.RequestHandler):def get(self):self.render("index.html")def post(self):data = self.get_argument("data") if (data == "left"):left()elif(data =="right"):dextroversion()elif(data =="lookup"):lookUp()elif(data == "lookdown"):lookDown() elif(data == "inde"):inde()# 路由def appa ():return tornado.web.Application([(r"/", Maina)])app = appa()app.listen(8848) #定义访问端口tornado.ioloop.IOLoop.current().start()
进行控制文件的编写（MobileCamera.py）理解参考：树莓派远程4G遥控车教程（二）-相机云台舵机初步调试
# coding=utf-8from time import sleepimport RPi.GPIO as GPIOGPIO.setmode(GPIO.BCM)GPIO.setwarnings(False)pan = 17 #舵机编码tilt = 18GPIO.setup(tilt, GPIO.OUT) GPIO.setup(pan, GPIO.OUT) # 定义了接口为输出模式def setServoAngle(servo,angle):assert angle >=10 and angle <= 160pwm = GPIO.PWM(servo, 50)pwm.start(8)dutyCycle = angle / 18 + 3.pwm.ChangeDutyCycle(dutyCycle)sleep(0.6)pwm.stop()
进行页面的编写（index.html）本页面可以通过键盘的↑↓←→进行控制，也可以点击操作
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><script src="/jquery/2.1.4/jquery.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>控制中心</title></head><body><script type="text/javascript">function go(data){$.post('/',{data:data},function(){});}$(function(){window.document.onkeydown = abc;function abc(ev){ev = (ev) ? ev : window.event;if(ev.keyCode=='38'){console.log("1")go('lookup');}if(ev.keyCode=='37'){console.log("2")go('right');}if(ev.keyCode=='40'){console.log("3")go('lookdown');}if(ev.keyCode=='39'){console.log("4")go('left');}}var i= null;$('.top').mousedown(function(){console.log("5")go('lookup');});$('.left').mousedown(function(){console.log("6")go('left');});$('.down').mousedown(function(){console.log("7")go('lookdown');});$('.right').mousedown(function(){console.log("8")go('right');});$('.indo').mousedown(function(){console.log("9")go('inde');});});</script><style type="text/css">#main{width: 150px;height: 150px;background: #ccc;}#main span{width: 50px;height: 50px;float: left;}#main span.on2{background: #ff00ff;}#main span.on3{background: #555555;position: absolute;left: 8px;top: 8px;}#main span.on4{background: #555555;position: absolute;left: 108px;top: 8px;}#main span.on5{background: #555555;position: absolute;left: 8px;top: 108px;}#main span.on6{background: #555555;position: absolute;left: 108px;top: 108px;}.warpper {overflow-x: auto;overflow-y:hidden; -webkit-overflow-scrolling: touch; width: 100%; height: 505px; margin: 2px auto; border: 0.1px solid black; }</style><div class="warpper"><iframe src="http://c.######.cn:8080/stream_simple.html" style="height:500px;width:100%;" scrolling="yes" frameborder="0"></iframe><!-- 这里使用iframe标签引入了视频源，将src地址更换为web2的解析地址--></div><div id="main"><span></span><span class="on2 top"></span><span></span><span class="on2 right"></span><span class="on2 indo" style="background-color: red;"></span><span class="on2 left"></span><span></span><span class="on2 down"></span><span></span></div></body></html>
进入main目录 运行python2 text.py。通过局域网访问http://树莓派ip:8848测试配置开机自启动text.py需要指定python3的绝对路径。（通过which python3命令查询）需要申明其运行环境WorkingDirectory。
sudo vim /etc/systemd/system/index.service
进行编辑（需删除注释）
[Unit]Description=index daemonAfter=syslog.target network.targetWants=network.target[Service]WorkingDirectory=/home/pi/main #这里是我的text.py所在路径Type=simpleExecStart=/usr/bin/python3 /home/pi/main/text.py #前面是我的python3路径 ，后面是text.py路径Restart= alwaysRestartSec=1min [Install]WantedBy=multi-user.target
:wq 保存后进行
#启动服务systemctl daemon-reloadsystemctl start index#查看是否成功开启systemctl status index.service#设置为开机启动systemctl enable index
若启动失败，则检查端口是否占用，并且释放端口
进行内网穿透客户端的配置
下载适合你树莓派的frp版本，我的是树莓派4B，安装的系统是raspberry pi os32位的，内核是arm。所以下载的是frp_0.37.1_linux_arm.tar.gz。frp版本需要对应操作系统 linux ，对应系统架构arm，位数32位。对应的查询命令（根据自己的服务器进行下载对应版本）uname -a如果当前 Linux 是 64 位则输出 amd64，是 32 位则会输出 i386。
建议使用ssh连接树莓派（工具MobaXtem）下载至树莓派的/home/pi/目录下，使用下面的命令进行解压,，并cd进入该文件夹
tar -zxvf frp_0.37.1_linux_arm.tar.gz #文件名称更换为自己下载的cd frp_0.37.1_linux_arm
使用vim编辑器修改服务器配置文件 frpc.ini 注意：客户端修改的是frpc.ini,服务端修改的是finps.ini
vim frpc.ini
网页代码通过Ctrl+c 复制到vim中可以直接使用 shift+insert将如下内容复制到打开的编辑器中(删除注释)
[common]server_addr = 云服务器地址server_port = 7000privilege_token = 13123123 #与服务端一致[ssh] type = tcplocal_ip = 127.0.0.1 #默认相对于树莓派的本地端口（无需修改）local_port = 22 remote_port = 6000[vnc]type = tcplocal_ip = 127.0.0.1 #默认相对于树莓派的本地地址（无需修改）local_port = 5900 remote_port = 8000 [web] #这个是我的舵机控制页面type = httplocal_ip = 127.0.0.1#默认相对于树莓派的本地地址（无需修改）local_port = 8848 #对应访问树莓派的端口custom_domains = a.wan###.cn #通过dns解析域名进行配置a.+域名[web2] #这个是我的视频页面type = httplocal_ip = 127.0.0.1 #默认相对于树莓派的本地地址（无需修改）local_port = 8080 custom_domains = c.wan###.cn #通过dns解析域名进行配置 c.+域名
:wq进行保存
配置客户端自启动
使用vim编辑服务sudo vim /lib/systemd/system/frpc.service
打开的页面中添加如下内容
[Unit]Description=frps serviceAfter=network.target syslog.targetWants=network.target[Service]Type=simple# 换成自己的路径ExecStart=/home/pi/frp_0.37.1_linux_arm/frpc -c /home/pi/frp_0.37.1_linux_arm/frpc.ini[Install]WantedBy=multi-user.target
保存后启动frpc并开启frpc自启动
systemctl start frpcsystemctl enable frpcsystemctl status frpc #查看是否配置成功/启动状态
