我是靠谱客的博主 开心咖啡豆,最近开发中收集的这篇文章主要介绍树莓派远程4G遥控车教程(四)-实时监控内网穿透及集成舵机控制功能树莓派远程4G遥控车教程(四)- 内网穿透及监控页面集成舵机控制功能准备工作配置方案配置过程,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

树莓派远程4G遥控车教程(四)- 内网穿透及监控页面集成舵机控制功能

树莓派远程4G遥控车教程(一)-准备工作
树莓派远程4G遥控车教程(二)-相机云台舵机初步调试
树莓派远程4G遥控车教程(三)-摄像头安装及实现局域网实时监控

准备工作

代码及相关包已发布,可在我的资源中下载

出现问题欢迎私信我,大家一起讨论

  1. 前面配置已完成
  2. 已有云服务器和域名(我这里使用的是阿里云服务器)

配置方案

  1. 本文使用frp进行内网穿透
  2. 因云服务器都有已经分配好的公网IP地址,本文通过服务端(云服务器)使用frp进行内网穿透,达到访问服务端固定IP地址+端口号,来达到访问内网中树莓派指定端口的功能。
  3. 配置分为两部分服务端(云服务器)和客户端(树莓派)

配置过程

服务端(云服务器配置)

  1. 我使用的是阿里云服务器,安装的是Debian系统(x64)。我使用的frp版本应该是frp_0.37.1_linux_amd64.tar.gz
  2. frp版本需要对应操作系统 linux ,对应系统架构amd,位数64位。对应的查询命令(根据自己的服务器进行下载对应版本)
uname -a
如果当前 Linux 是 64 位则输出 amd64,是 32 位则会输出 i386。
  1. 建议使用ssh连接服务器(工具MobaXtem)
  2. 下载至服务器端的root目录下,使用下面的命令进行解压,,并cd进入该文件夹
tar -zxvf frp_0.37.1_linux_amd64.tar.gz   #文件名称更换为自己下载的
cd frp_0.37.1_linux_amd64
  1. 使用vim编辑器修改服务器配置文件 frps.ini
vim frps.ini
  1. 网页代码通过Ctrl+c 复制到vim中可以直接使用 shift+insert
  2. 将如下内容复制到打开的编辑器中(删除注释)
[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 保持一致(一种验证机制)
  1. :wq进行保存

配置服务端自启动

  1. 使用vim编辑服务
sudo vim /lib/systemd/system/frps.service
  1. 打开的页面中添加如下内容
[Unit]
Description=frps service
After=network.target syslog.target
Wants=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
  1. 保存后启动frps并开启frps自启动
systemctl start frps
systemctl enable frps
systemctl status frps #查看是否配置成功/启动状态

为云服务器配置宝塔面板

  1. 点击查看对应系统版本的安装命令
  2. 进入宝塔面板后进入安全页面,进行放行上面配置的端口。6000、7000、7500、8000、9000
    在这里插入图片描述
  3. 进入阿里云(自己云服务器(云厂商控制台)配置安全组规则)“入方向”规则添加放行端口
    在这里插入图片描述
  4. 在云服务厂商中找到自己购买的域名,进行配置DNS解析(客户端使用)

注意:这里需要自己配置域名将域名解析指向服务器(自行搜索方法)

在这里插入图片描述

客户端(树莓派配置)

进行集成页面的编写

  1. 目录/home/pi/main/

  2. 在main文件夹下
    在这里插入图片描述

  3. 先写服务端(text.py)使用了tornado框架进行开发

# coding=utf-8
import MobileCamera as Mob
import tornado.ioloop
import 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()
  1. 进行控制文件的编写(MobileCamera.py)理解参考:树莓派远程4G遥控车教程(二)-相机云台舵机初步调试
# coding=utf-8
from time import sleep
import RPi.GPIO as GPIO
GPIO.setmode(GPIO.BCM)
GPIO.setwarnings(False)

pan = 17  #舵机编码
tilt = 18

GPIO.setup(tilt, GPIO.OUT) 
GPIO.setup(pan, GPIO.OUT) # 定义了接口为输出模式

def setServoAngle(servo,angle):
	assert angle >=10 and angle <= 160
	pwm = GPIO.PWM(servo, 50)
	pwm.start(8)
	dutyCycle = angle / 18 + 3.
	pwm.ChangeDutyCycle(dutyCycle)
	sleep(0.6)
	pwm.stop()
  1. 进行页面的编写(index.html)
  2. 本页面可以通过键盘的↑↓←→进行控制,也可以点击操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="http://libs.baidu.com/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>
  1. 进入main目录 运行python2 text.py。通过局域网访问http://树莓派ip:8848测试
  2. 配置开机自启动text.py
  3. 需要指定python3的绝对路径。(通过which python3命令查询)需要申明其运行环境WorkingDirectory。
sudo vim /etc/systemd/system/index.service
  1. 进行编辑(需删除注释)
[Unit]
Description=index daemon
After=syslog.target  network.target
Wants=network.target

[Service]
WorkingDirectory=/home/pi/main  #这里是我的text.py所在路径
Type=simple
ExecStart=/usr/bin/python3  /home/pi/main/text.py  #前面是我的python3路径  ,后面是text.py路径
Restart= always
RestartSec=1min 
[Install]
WantedBy=multi-user.target

  1. :wq 保存后进行
#启动服务
systemctl daemon-reload
systemctl start index

#查看是否成功开启
systemctl status index.service

#设置为开机启动
systemctl enable index
  1. 若启动失败,则检查端口是否占用,并且释放端口

进行内网穿透客户端的配置

  1. 下载适合你树莓派的frp版本,我的是树莓派4B,安装的系统是raspberry pi os32位的,内核是arm。所以下载的是frp_0.37.1_linux_arm.tar.gz。
  2. frp版本需要对应操作系统 linux ,对应系统架构arm,位数32位。对应的查询命令(根据自己的服务器进行下载对应版本)
uname -a
如果当前 Linux 是 64 位则输出 amd64,是 32 位则会输出 i386。
  1. 建议使用ssh连接树莓派(工具MobaXtem)
  2. 下载至树莓派的/home/pi/目录下,使用下面的命令进行解压,,并cd进入该文件夹
tar -zxvf frp_0.37.1_linux_arm.tar.gz   #文件名称更换为自己下载的
cd frp_0.37.1_linux_arm
  1. 使用vim编辑器修改服务器配置文件 frpc.ini 注意:客户端修改的是frpc.ini,服务端修改的是finps.ini
vim frpc.ini
  1. 网页代码通过Ctrl+c 复制到vim中可以直接使用 shift+insert
  2. 将如下内容复制到打开的编辑器中(删除注释)
[common]
server_addr = 云服务器地址
server_port = 7000
privilege_token = 13123123 #与服务端一致
 
[ssh]                  
type = tcp
local_ip = 127.0.0.1   #默认相对于树莓派的本地端口(无需修改)
local_port = 22        
remote_port = 6000     
 
[vnc]               
type = tcp
local_ip = 127.0.0.1   #默认相对于树莓派的本地地址(无需修改)
local_port = 5900       
remote_port = 8000  
 
[web]            #这个是我的舵机控制页面
type = http      
local_ip = 127.0.0.1      #默认相对于树莓派的本地地址(无需修改)
local_port = 8848         #对应访问树莓派的端口
custom_domains = a.wan###.cn  #通过dns解析域名进行配置a.+域名

[web2]            #这个是我的视频页面
type = http      
local_ip = 127.0.0.1       #默认相对于树莓派的本地地址(无需修改)
local_port = 8080    
custom_domains = c.wan###.cn  #通过dns解析域名进行配置 c.+域名

  1. :wq进行保存

配置客户端自启动

  1. 使用vim编辑服务
sudo vim /lib/systemd/system/frpc.service
  1. 打开的页面中添加如下内容
[Unit]
Description=frps service
After=network.target syslog.target
Wants=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

  1. 保存后启动frpc并开启frpc自启动
systemctl start frpc
systemctl enable frpc
systemctl status frpc #查看是否配置成功/启动状态

打开浏览器输入 a.域名:8840访问到控制页面

最后

以上就是开心咖啡豆为你收集整理的树莓派远程4G遥控车教程(四)-实时监控内网穿透及集成舵机控制功能树莓派远程4G遥控车教程(四)- 内网穿透及监控页面集成舵机控制功能准备工作配置方案配置过程的全部内容,希望文章能够帮你解决树莓派远程4G遥控车教程(四)-实时监控内网穿透及集成舵机控制功能树莓派远程4G遥控车教程(四)- 内网穿透及监控页面集成舵机控制功能准备工作配置方案配置过程所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(60)

评论列表共有 0 条评论

立即
投稿
返回
顶部