wifi小车视频传输的实现

最新推荐文章于 2023-07-23 10:15:00 发布

武器大师72

最新推荐文章于 2023-07-23 10:15:00 发布

阅读量3.3k

点赞数 6

分类专栏：树莓派 opencv

本文链接：https://blog.csdn.net/qq_18454025/article/details/105053219

版权

opencv 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

树莓派

5 篇文章 0 订阅

订阅专栏

背景

最近有朋友问我wifi小车的视频传输是怎样实现的，在这里重新写一篇文章详细介绍一下。

环境

不管是windows还是linux还是树莓派只要满足以下条件即可运行

python3
flask
opencv
摄像头
在树莓派安装opencv的方法参照我另一篇文章树莓派五分钟安装好opencv

方案

树莓派上安装了opencv和flask。然后项目的目录如下：
static，templates，video_trans.py在同一级目录下
static用来放css,js 图片等静态文件
templates 用来放html页面模板

在这里插入图片描述
spectre.min.css是一个轻量级的，响应式的现代 CSS 框架，zepto.min.js是极简的JavaScript库。

代码

video_trans.py

from flask import Flask
from flask import Flask, render_template, Response
import cv2
app = Flask(__name__)

class VideoCamera(object):
    def __init__(self):
        self.cap = cv2.VideoCapture(0)

    def __del__(self):
        self.cap.release()

    def get_frame(self):
        success, image = self.cap.read()
        ret, jpeg = cv2.imencode('.jpg', image)
        return jpeg.tobytes()

@app.route('/')
def hello_world():
    return render_template('index.html')

def gen(camera):
    while True:
        frame = camera.get_frame()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')

@app.route('/video_feed')
def video_feed():
    return Response(gen(VideoCamera()), mimetype='multipart/x-mixed-replace; boundary=frame')

@app.route('/front')
def front():
    #在这里写控制小车向前走的代码
    print('front') #just for debug
    return 'ok'
@app.route('/behind')
def behind():
    print('behind')
    return 'ok'
#完整代码不贴了
# @app.route('/cameraLeft') #摄像头云台移动 还未完善
# @app.route('/cameraRight')
# @app.route('/cameraUp')
# @app.route('/cameraDown')

if __name__ == '__main__':
    app.run(host = "127.0.0.1")

index.html

<!DOCTYPE html>
<html lang="en">
<link href="static/spectre.min.css" rel="stylesheet">
<script src="static/zepto.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Realtime Video</title>
    <script>
    function move(self)
    {
        var xmlthhp;
        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET",self.id,true);
	    xmlhttp.send();
    }
    function cameraMove(self) {
        var xmlthhp;
        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET",self.id,true);
	    xmlhttp.send();
    }
    </script>
</head>
<body>
    <h1 style="text-align:center">Video</h1>
    <div style="text-align:center">
    <img src="{{url_for('video_feed')}}" />
  

    <table boder="0" style="margin: auto">
        <tr>
            <td>
                <table border="0">
    <tr>
        <td>
        <button class="btn btn-lg" id="frontAndLeft" onclick="move(this)">↖</button>
        </td>
        <td>
        <button class="btn btn-lg" id="front" onclick="move(this)">↑</button>
        </td>
        <td>
        <button class="btn btn-lg" id="frontAndRight" onclick="move(this)">↗</button>
        </td>
    </tr>
        <tr>
        <td>
        <button class="btn btn-lg" id="left" onclick="move(this)">←</button>
        </td>
        <td>
        <button class="btn btn-lg" id="stop" onclick="move(this)">-</button>
        </td>
        <td>
        <button class="btn btn-lg" id="right" onclick="move(this)">→</button>
        </td>
    </tr>
        <tr>
        <td>
        <button class="btn btn-lg" id="behindAndLeft" onclick="move(this)">↙</button>
        </td>
        <td>
        <button class="btn btn-lg" id="behind" onclick="move(this)">↓</button>
        </td>
        <td>
        <button class="btn btn-lg" id="behindAndRight" onclick="move(this)">↘</button>
        </td>
    </tr>

	<td></td>
	<td></td>
    <td>
    </table>
            </td>
            <td>
                <table border="0">
    <tr>
        <td>
        <button class="btn btn-lg">↖</button>
        </td>
        <td>
        <button class="btn btn-lg" id="cameraUP" onclick="cameraMove(this)">↑</button>
        </td>
        <td>
        <button class="btn btn-lg">↗</button>
        </td>
    </tr>
        <tr>
        <td>
        <button class="btn btn-lg" id="cameraLeft" onclick="cameraMove(this)">←</button>
        </td>
        <td>
        <button class="btn btn-lg" id="cameraStop" onclick="cameraMove(this)">-</button>
        </td>
        <td>
        <button class="btn btn-lg" id="cameraRight" onclick="cameraMove(this)">→</button>
        </td>
    </tr>
        <tr>
        <td>
        <button class="btn btn-lg">↙</button>
        </td>
        <td>
        <button class="btn btn-lg" id="cameraDown" onclick="cameraMove(this)">↓</button>
        </td>
        <td>
        <button class="btn btn-lg">↘</button>
        </td>
    </tr>
    </table>
            </td>
        </tr>
    </table>
    </div>


</body>
</html>

运行

python video_trans.py

在这里插入图片描述
这里就运行起来了。访问http://127.0.0.1:5000/即可。这是在开发环境下，用127.0.0.1作为地址。如果部署到树莓派上，要在video_trans.py文件里将ip地址修改为树莓派的IP地址。（界面很丑，因为我基本不会前端）
在这里插入图片描述
树莓派查看ip地址命令：

ifconfig

武器大师72

关注

6
点赞
踩
36

收藏

觉得还不错? 一键收藏
0
评论
wifi小车视频传输的实现

背景最近有朋友问我wifi小车的视频传输是怎样实现的，在这里重新写一篇文章详细介绍一下。环境不管是windows还是linux还是树莓派只要满足以下条件即可运行python3.6flaskopencv摄像头在树莓派安装opencv的方法参照我另一篇文章树莓派五分钟安装好opencv方案树莓派上安装了opencv和flask。然后项目的目录如下：static，templat...
复制链接

扫一扫