我是 python 和燒瓶的新手，我想在 webapp 中進行面罩檢測。但是，我遇到了一些問題，即單擊按鈕時我無法將影像更改為攝像機。我的代碼有什么問題嗎。下面是我的html和python代碼。
<html>
<head>
<link rel = "stylesheet" type="text/css" href="/static/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
function stop(){
$("#ciao").attr("src", "/static/1.png");
$("#stop").attr("class","btn btn-danger active");
$("#start").attr("class","btn btn-outline-success");
}
function start(){
$("#ciao").attr("src", "{{url_for('video')}}");
$("#start").attr("class","btn btn-success active");
$("#stop").attr("class","btn btn-outline-danger");
}
</script>
</head>
<body>
<div class="">
<button id="start" onclick= "start()" class="btn btn-outline-success"><i class="fa fa-video-camera"></i> start</button>
<button id = "stop" onclick="stop()" class="btn btn-danger active"><i class="fa fa-stop"></i> Stop</button>
</div>
<img id ="ciao" class ="image1" src="/static/1.png">
</body>
應用程式.py
from flask import Flask, render_template,Response
from cameraDetection import Video
app = Flask(__name__)
output=[]
@app.route('/')
@app.route('/FaceMaskDetection_HomePage')
def homepage():
return render_template("FaceMaskDetection_HomePage.html",result = output)
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')
def video():
return Response(gen(Video()),
mimetype='multipart/x-mixed-replace; boundary=frame')
app.run(debug=True)
相機檢測.py
import cv2
class Video(object):
def __init__(self):
self.video=cv2.VideoCapture(0)
def __del__(self):
self.video.release()
def get_frame(self):
ret,frame=self.video.read()
ret,jpg=cv2.imencode('.jpg',frame)
return jpg.tobytes()
uj5u.com熱心網友回復：
你fogot加載jQuery。HMTL你不能$(...)沒有jQuery.
例如：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
添加jQuery代碼后對我有用。
我將所有內容放在一個檔案中，以便每個人都可以簡單地復制和測驗它。
from flask import Flask, render_template_string, Response
import cv2
class Video:
def __init__(self):
self.video = cv2.VideoCapture(0)
def __del__(self):
self.video.release()
def get_frame(self):
ret, frame = self.video.read()
ret, jpg = cv2.imencode('.jpg', frame)
return jpg.tobytes()
app = Flask(__name__)
output = []
def gen(camera):
while True:
frame = camera.get_frame()
yield(b'--frame\r\n'
b'Content-Type: image/jpeg\r\n'
b'\r\n' frame b'\r\n\r\n')
@app.route('/')
@app.route('/FaceMaskDetection_HomePage')
def homepage():
return render_template_string("""
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function stop(){
$("#ciao").attr("src", "/static/1.png");
$("#stop").attr("class","btn btn-danger active");
$("#start").attr("class","btn btn-outline-success");
}
function start(){
$("#ciao").attr("src", "{{url_for('video')}}");
$("#start").attr("class","btn btn-success active");
$("#stop").attr("class","btn btn-outline-danger");
}
</script>
</head>
<body>
<div >
<button id="start" onclick="start()" ><i ></i> start</button>
<button id="stop" onclick="stop()" ><i ></i> Stop</button>
</div>
<img id="ciao" src="/static/1.png">
</body>
""")
@app.route('/video')
def video():
return Response(gen(Video()),
mimetype='multipart/x-mixed-replace; boundary=frame')
# --- main ---
app.run(debug=True)
編輯：
我發現了兩個不同的問題。
如果您使用第二
Video()個def video()用戶（或您計算機上的第二個瀏覽器）可能無法訪問相機，因為它會嘗試打開同一個網路攝像頭 - 并且會生成網路攝像頭已被使用的錯誤。您可能Video()只需要在開始時創建一次作為全域變數，然后在內部使用此變數def video()所有這些都只能在本地計算機上運行，??因為當您在服務器上運行它時，
cv2將嘗試訪問直接連接到服務器的網路攝像頭。它無法遠程訪問用戶的網路攝像頭。只有用戶計算機上的網路瀏覽器可以訪問用戶的網路攝像頭 - 這可能需要 JavaScript 從用戶的網路攝像頭獲取影像，將其發送到服務器，并獲取具有更改的影像 - 就像我在 GitHub furas / python-examples / flask /上的示例一樣瀏覽器中的網路攝像頭 - 畫布 - 拍攝影像并上傳到服務器
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/496548.html
標籤：javascript Python html 烧瓶