parent
0aac17f2cb
commit
08cf1dea0d
Binary file not shown.
@ -1,31 +1,46 @@
|
|||||||
from flask import Flask, render_template, Response
|
from flask import Flask, request, jsonify
|
||||||
from picamera2 import Picamera2
|
|
||||||
import time
|
|
||||||
import cv2
|
import cv2
|
||||||
|
import threading
|
||||||
|
import time
|
||||||
|
|
||||||
app = Flask(__name__)
|
app = Flask(__name__)
|
||||||
|
|
||||||
def gen_frames(): # generate frame by frame from camera
|
# 设置存储照片的目录路径
|
||||||
picam2 = Picamera2()
|
photo_path = '/Desktop/cars/photo/'
|
||||||
picam2.configure(picam2.create_video_configuration(main={"format": 'XRGB8888', "size": (640, 480)}))
|
|
||||||
picam2.start()
|
# 初始化摄像头
|
||||||
while True:
|
camera = cv2.VideoCapture(-1)
|
||||||
# Capture frame-by-frame
|
camera.set(cv2.CAP_PROP_FRAME_WIDTH, 640)
|
||||||
frame = picam2.capture_array() # read the camera frame
|
camera.set(cv2.CAP_PROP_FRAME_HEIGHT, 480)
|
||||||
frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
|
|
||||||
ret, buffer = cv2.imencode('.jpg', frame)
|
# 初始化变量
|
||||||
frame = buffer.tobytes()
|
photo_num_count = 0
|
||||||
yield (b'--frame\r\n'
|
capture_lock = threading.Lock()
|
||||||
b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n') # concat frame one by one and show result
|
last_photo_time = time.time()
|
||||||
|
|
||||||
@app.route('/')
|
# 拍照函数
|
||||||
def index():
|
def capture_photo():
|
||||||
return render_template('index.html')
|
global photo_num_count
|
||||||
|
with capture_lock:
|
||||||
@app.route('/video_feed')
|
ret, frame = camera.read()
|
||||||
def video_feed():
|
if ret:
|
||||||
#Video streaming route. Put this in the src attribute of an img tag
|
photo_num_count += 1
|
||||||
return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')
|
photo_filename = f'{photo_path}photo_{photo_num_count}.jpg'
|
||||||
|
cv2.imwrite(photo_filename, frame)
|
||||||
|
print(f'{photo_num_count} photos saved. new photo: {photo_filename}')
|
||||||
|
|
||||||
|
# 拍照请求处理
|
||||||
|
@app.route('/photo', methods=['POST'])
|
||||||
|
def photo():
|
||||||
|
capture_photo()
|
||||||
|
return jsonify({"status": "photo captured"})
|
||||||
|
|
||||||
|
# 停止请求处理
|
||||||
|
@app.route('/stop', methods=['POST'])
|
||||||
|
def stop():
|
||||||
|
camera.release()
|
||||||
|
print("Camera stopped")
|
||||||
|
return jsonify({"status": "camera stopped"})
|
||||||
|
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
app.run(host='0.0.0.0', port=5000, debug=True)
|
app.run(host='0.0.0.0', port=5000)
|
||||||
|
After Width: | Height: | Size: 61 KiB |
@ -0,0 +1,218 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<!-- Required meta tags -->
|
||||||
|
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" media="screen">
|
||||||
|
<script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Live Video Based on Flask</title>
|
||||||
|
<link rel="stylesheet" href='/style.css'/>
|
||||||
|
<style type="text/css">
|
||||||
|
#front {
|
||||||
|
margin-left: 40px;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
#rear{
|
||||||
|
margin-top: 3px;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
background: #e8080b;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h5>实时视频流</h5>
|
||||||
|
<img src="{{ url_for('video_feed') }}">
|
||||||
|
<p> 小车控制界面</p>
|
||||||
|
<bodylink = "red">
|
||||||
|
<a href="control" target="_blank">小车控制</a>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 添加文本传输的输入框和按钮 -->
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="inputIp">目标服务器 IP 地址:</label>
|
||||||
|
<input type="text" class="form-control" id="inputIp" placeholder="输入 IP 地址">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="inputPort">目标服务器 端口:</label>
|
||||||
|
<input type="text" class="form-control" id="inputPort" placeholder="输入端口号">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="inputText">要发送的文本内容:</label>
|
||||||
|
<textarea class="form-control" id="inputText" rows="3" placeholder="输入文本内容"></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-primary" onclick="sendText()">发送文本</button>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="container" class="container">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button id="front" type="button" onclick="forward()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-up" style="margin-left: 56px;"> </button>
|
||||||
|
</div>
|
||||||
|
<!-- <div>
|
||||||
|
<button id="printButton" type="button" onclick="printClicked()" class="btn btn-lg btn-primary">打印点击</button>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button type="button" onclick="left()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-left" > </button>
|
||||||
|
<button type="button" onclick="stop()" class="btn btn-lg btn-primary glyphicon glyphicon-stop"> </button>
|
||||||
|
<button type="button" onclick="right()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-right" > </button>
|
||||||
|
<!-- ---------------------------------------- -->
|
||||||
|
<button type="button" onclick="takePhoto()">拍照</button>
|
||||||
|
<!-- ---------------------------------------- -->
|
||||||
|
</div>
|
||||||
|
<button id="rear" type="button" onclick="back()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-down" style="margin-left: 56px;"> </button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src='/Decoder.js'></script>
|
||||||
|
<script src='/YUVCanvas.js'></script>
|
||||||
|
<script src='/Player.js'></script>
|
||||||
|
<script>
|
||||||
|
// player
|
||||||
|
window.player = new Player({ useWorker: true, webgl: 'auto', size: { width: 848, height: 480 } })
|
||||||
|
var playerElement = document.getElementById('viewer')
|
||||||
|
playerElement.appendChild(window.player.canvas)
|
||||||
|
// Websocket
|
||||||
|
var wsUri = window.location.protocol.replace(/http/,'ws')+'//'+window.location.hostname+':9000'
|
||||||
|
var ws = new WebSocket(wsUri)
|
||||||
|
ws.binaryType = 'arraybuffer'
|
||||||
|
ws.onopen = function (e) {
|
||||||
|
console.log('Client connected')
|
||||||
|
ws.onmessage = function (msg) {
|
||||||
|
// decode stream
|
||||||
|
window.player.decode(new Uint8Array(msg.data));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ws.onclose = function (e) {
|
||||||
|
console.log('Client disconnected')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function printClicked() {
|
||||||
|
// console.log("132465789891651354684");
|
||||||
|
}
|
||||||
|
// ---------------------------------------
|
||||||
|
function takePhoto() {
|
||||||
|
window.location.href = "{{ url_for('take_photo') }}"; // 重定向到拍照请求
|
||||||
|
}
|
||||||
|
// ---------------------------------------
|
||||||
|
function forward() {
|
||||||
|
console.log("132465789891651354684");
|
||||||
|
$.ajax({
|
||||||
|
|
||||||
|
type: "GET",
|
||||||
|
dataType: "json",
|
||||||
|
url: "/control/forward" ,
|
||||||
|
data: $('#form1').serialize(), //提交的数据
|
||||||
|
success: function (result) {
|
||||||
|
console.log(result); //打印服务端返回的数据(调试用)
|
||||||
|
if (result.resultCode == 200) {
|
||||||
|
}
|
||||||
|
;
|
||||||
|
},
|
||||||
|
error : function() {
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function back() {
|
||||||
|
$.ajax({
|
||||||
|
type: "GET",
|
||||||
|
dataType: "json",
|
||||||
|
url: "/control/back" ,
|
||||||
|
data: $('#form1').serialize(), //提交的数据
|
||||||
|
success: function (result) {
|
||||||
|
console.log(result); //打印服务端返回的数据(调试用)
|
||||||
|
if (result.resultCode == 200) {
|
||||||
|
}
|
||||||
|
;
|
||||||
|
},
|
||||||
|
error : function() {
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} function right() {
|
||||||
|
$.ajax({
|
||||||
|
type: "GET",
|
||||||
|
dataType: "json",
|
||||||
|
url: "/control/right" ,
|
||||||
|
data: $('#form1').serialize(), //提交的数据
|
||||||
|
success: function (result) {
|
||||||
|
console.log(result); //打印服务端返回的数据(调试用)
|
||||||
|
if (result.resultCode == 200) {
|
||||||
|
}
|
||||||
|
;
|
||||||
|
},
|
||||||
|
error : function() {
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} function left() {
|
||||||
|
$.ajax({
|
||||||
|
type: "GET",
|
||||||
|
dataType: "json",
|
||||||
|
url: "/control/left" ,
|
||||||
|
data: $('#form1').serialize(), //提交的数据
|
||||||
|
success: function (result) {
|
||||||
|
console.log(result); //打印服务端返回的数据(调试用)
|
||||||
|
if (result.resultCode == 200) {
|
||||||
|
}
|
||||||
|
;
|
||||||
|
},
|
||||||
|
error : function() {
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} function stop() {
|
||||||
|
$.ajax({
|
||||||
|
type: "GET",
|
||||||
|
dataType: "json",
|
||||||
|
url: "/control/stop" ,
|
||||||
|
data: $('#form1').serialize(), //提交的数据
|
||||||
|
success: function (result) {
|
||||||
|
console.log(result); //打印服务端返回的数据(调试用)
|
||||||
|
if (result.resultCode == 200) {
|
||||||
|
}
|
||||||
|
;
|
||||||
|
},
|
||||||
|
error : function() {
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
function refreshPage() {
|
||||||
|
location.reload(); // 刷新页面
|
||||||
|
}
|
||||||
|
// 发送文本
|
||||||
|
function sendText() {
|
||||||
|
const ip = document.getElementById('inputIp').value;
|
||||||
|
const port = document.getElementById('inputPort').value;
|
||||||
|
const text = document.getElementById('inputText').value;
|
||||||
|
|
||||||
|
// 使用fetch API发送POST请求
|
||||||
|
fetch('/send_text', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/x-www-form-urlencoded',
|
||||||
|
},
|
||||||
|
body: `ip=${ip}&port=${port}&text=${encodeURIComponent(text)}`
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => console.log(data))
|
||||||
|
.catch(error => console.error('Error:', error));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,218 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<!-- Required meta tags -->
|
||||||
|
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" media="screen">
|
||||||
|
<script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Live Video Based on Flask</title>
|
||||||
|
<link rel="stylesheet" href='/style.css'/>
|
||||||
|
<style type="text/css">
|
||||||
|
#front {
|
||||||
|
margin-left: 40px;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
#rear{
|
||||||
|
margin-top: 3px;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
background: #e8080b;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h5>实时视频流</h5>
|
||||||
|
<img src="{{ url_for('video_feed') }}">
|
||||||
|
<p> 小车控制界面</p>
|
||||||
|
<bodylink = "red">
|
||||||
|
<a href="control" target="_blank">小车控制</a>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 添加文本传输的输入框和按钮 -->
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="inputIp">目标服务器 IP 地址:</label>
|
||||||
|
<input type="text" class="form-control" id="inputIp" placeholder="输入 IP 地址">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="inputPort">目标服务器 端口:</label>
|
||||||
|
<input type="text" class="form-control" id="inputPort" placeholder="输入端口号">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="inputText">要发送的文本内容:</label>
|
||||||
|
<textarea class="form-control" id="inputText" rows="3" placeholder="输入文本内容"></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-primary" onclick="sendText()">发送文本</button>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="container" class="container">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button id="front" type="button" onclick="forward()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-up" style="margin-left: 56px;"> </button>
|
||||||
|
</div>
|
||||||
|
<!-- <div>
|
||||||
|
<button id="printButton" type="button" onclick="printClicked()" class="btn btn-lg btn-primary">打印点击</button>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button type="button" onclick="left()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-left" > </button>
|
||||||
|
<button type="button" onclick="stop()" class="btn btn-lg btn-primary glyphicon glyphicon-stop"> </button>
|
||||||
|
<button type="button" onclick="right()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-right" > </button>
|
||||||
|
<!-- ---------------------------------------- -->
|
||||||
|
<button type="button" onclick="takePhoto()">拍照</button>
|
||||||
|
<!-- ---------------------------------------- -->
|
||||||
|
</div>
|
||||||
|
<button id="rear" type="button" onclick="back()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-down" style="margin-left: 56px;"> </button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src='/Decoder.js'></script>
|
||||||
|
<script src='/YUVCanvas.js'></script>
|
||||||
|
<script src='/Player.js'></script>
|
||||||
|
<script>
|
||||||
|
// player
|
||||||
|
window.player = new Player({ useWorker: true, webgl: 'auto', size: { width: 848, height: 480 } })
|
||||||
|
var playerElement = document.getElementById('viewer')
|
||||||
|
playerElement.appendChild(window.player.canvas)
|
||||||
|
// Websocket
|
||||||
|
var wsUri = window.location.protocol.replace(/http/,'ws')+'//'+window.location.hostname+':9000'
|
||||||
|
var ws = new WebSocket(wsUri)
|
||||||
|
ws.binaryType = 'arraybuffer'
|
||||||
|
ws.onopen = function (e) {
|
||||||
|
console.log('Client connected')
|
||||||
|
ws.onmessage = function (msg) {
|
||||||
|
// decode stream
|
||||||
|
window.player.decode(new Uint8Array(msg.data));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ws.onclose = function (e) {
|
||||||
|
console.log('Client disconnected')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function printClicked() {
|
||||||
|
// console.log("132465789891651354684");
|
||||||
|
}
|
||||||
|
// ---------------------------------------
|
||||||
|
function takePhoto() {
|
||||||
|
window.location.href = "{{ url_for('take_photo') }}"; // 重定向到拍照请求
|
||||||
|
}
|
||||||
|
// ---------------------------------------
|
||||||
|
function forward() {
|
||||||
|
console.log("132465789891651354684");
|
||||||
|
$.ajax({
|
||||||
|
|
||||||
|
type: "GET",
|
||||||
|
dataType: "json",
|
||||||
|
url: "/control/forward" ,
|
||||||
|
data: $('#form1').serialize(), //提交的数据
|
||||||
|
success: function (result) {
|
||||||
|
console.log(result); //打印服务端返回的数据(调试用)
|
||||||
|
if (result.resultCode == 200) {
|
||||||
|
}
|
||||||
|
;
|
||||||
|
},
|
||||||
|
error : function() {
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function back() {
|
||||||
|
$.ajax({
|
||||||
|
type: "GET",
|
||||||
|
dataType: "json",
|
||||||
|
url: "/control/back" ,
|
||||||
|
data: $('#form1').serialize(), //提交的数据
|
||||||
|
success: function (result) {
|
||||||
|
console.log(result); //打印服务端返回的数据(调试用)
|
||||||
|
if (result.resultCode == 200) {
|
||||||
|
}
|
||||||
|
;
|
||||||
|
},
|
||||||
|
error : function() {
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} function right() {
|
||||||
|
$.ajax({
|
||||||
|
type: "GET",
|
||||||
|
dataType: "json",
|
||||||
|
url: "/control/right" ,
|
||||||
|
data: $('#form1').serialize(), //提交的数据
|
||||||
|
success: function (result) {
|
||||||
|
console.log(result); //打印服务端返回的数据(调试用)
|
||||||
|
if (result.resultCode == 200) {
|
||||||
|
}
|
||||||
|
;
|
||||||
|
},
|
||||||
|
error : function() {
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} function left() {
|
||||||
|
$.ajax({
|
||||||
|
type: "GET",
|
||||||
|
dataType: "json",
|
||||||
|
url: "/control/left" ,
|
||||||
|
data: $('#form1').serialize(), //提交的数据
|
||||||
|
success: function (result) {
|
||||||
|
console.log(result); //打印服务端返回的数据(调试用)
|
||||||
|
if (result.resultCode == 200) {
|
||||||
|
}
|
||||||
|
;
|
||||||
|
},
|
||||||
|
error : function() {
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} function stop() {
|
||||||
|
$.ajax({
|
||||||
|
type: "GET",
|
||||||
|
dataType: "json",
|
||||||
|
url: "/control/stop" ,
|
||||||
|
data: $('#form1').serialize(), //提交的数据
|
||||||
|
success: function (result) {
|
||||||
|
console.log(result); //打印服务端返回的数据(调试用)
|
||||||
|
if (result.resultCode == 200) {
|
||||||
|
}
|
||||||
|
;
|
||||||
|
},
|
||||||
|
error : function() {
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
function refreshPage() {
|
||||||
|
location.reload(); // 刷新页面
|
||||||
|
}
|
||||||
|
// 发送文本
|
||||||
|
function sendText() {
|
||||||
|
const ip = document.getElementById('inputIp').value;
|
||||||
|
const port = document.getElementById('inputPort').value;
|
||||||
|
const text = document.getElementById('inputText').value;
|
||||||
|
|
||||||
|
// 使用fetch API发送POST请求
|
||||||
|
fetch('/send_text', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/x-www-form-urlencoded',
|
||||||
|
},
|
||||||
|
body: `ip=${ip}&port=${port}&text=${encodeURIComponent(text)}`
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => console.log(data))
|
||||||
|
.catch(error => console.error('Error:', error));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue