背景
最近有朋友問我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