Is there any way to display diffrent frames of videos in web app using flask application?

Question

Is there any way to display diffrent frames of videos in web app using flask application?

تبليغ

سؤال

يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.

تبليغ

‎إلغاء

I am writing a code for video survillance system for detection in python and also developing a real time web application using flask. I created videocapture for 8 videos. I just want to display the frames of videos in my webapp. for the detection i used tags and predict function for it and the new frames with predicted text. the new frames are saved in a specific folder . Here is the python code for performing the operation.

def create_tag_mapping():
labels = list([“Dark”, “Dry”, “Wet”])
# dict that maps labels to integers, and the reverse
labels_map = {labels[i]:i for i in range(len(labels))}
inv_labels_map = {i:labels[i] for i in range(len(labels))}
return labels_map, inv_labels_map

# convert a prediction to tags
# @njit
def prediction_to_tags(inv_mapping, prediction):
# round probabilities to {0, 1}
values = prediction.round()
# collect all predicted tags
tags = [inv_mapping[i] for i in range(len(values)) if values[i] == 1.0]
return tags

@app.route(“/”, methods=[‘POST’, ‘GET’])
def home():
flag=1

video_read1 = cv2.VideoCapture(os.path.join(“http://192.168.43.1:8080//video”))
video_read2 = cv2.VideoCapture(os.path.join(“http://192.168.43.1:8080//video”))
video_read3 = cv2.VideoCapture(os.path.join(“http://192.168.43.1:8080//video”))
video_read4 = cv2.VideoCapture(os.path.join(“http://192.168.43.1:8080//video”))
video_read5 = cv2.VideoCapture(os.path.join(“http://192.168.43.1:8080//video”))
video_read6 = cv2.VideoCapture(os.path.join(“http://192.168.43.1:8080//video”))
video_read7 = cv2.VideoCapture(os.path.join(“http://192.168.43.1:8080//video”))
video_read8 = cv2.VideoCapture(os.path.join(“http://192.168.43.1:8080//video”))
# print(“ok”)
model = load_model(‘C:/Internship_UnithingTech_Sem4/RealApplication/Ex_21.h5’)
image_height = 224
image_width = 224
image_width1 = 140
image_height1 = 285
_, inv_mapping = create_tag_mapping()
ret1, frame1 = video_read1.read()
ret2, frame2 = video_read2.read()
ret3, frame3 = video_read3.read()
ret4, frame4 = video_read4.read()
ret5, frame5 = video_read5.read()
ret6, frame6 = video_read6.read()
ret7, frame7 = video_read7.read()
ret8, frame8 = video_read8.read()

numberOfCritical=0
resized_frame1 = cv2.resize(frame1, (image_height, image_width))
resized_frame1 = resized_frame1 – [123.68, 116.779, 103.939]
resized_frame2 = cv2.resize(frame2, (image_height, image_width))
resized_frame2 = resized_frame2 – [123.68, 116.779, 103.939]
resized_frame3 = cv2.resize(frame3, (image_height, image_width))
resized_frame3 = resized_frame3 – [123.68, 116.779, 103.939]
resized_frame4 = cv2.resize(frame4, (image_height, image_width))
resized_frame4 = resized_frame4 – [123.68, 116.779, 103.939]
resized_frame5 = cv2.resize(frame5, (image_height, image_width))
resized_frame5 = resized_frame5 – [123.68, 116.779, 103.939]
resized_frame6 = cv2.resize(frame6, (image_height, image_width))
resized_frame6 = resized_frame6 – [123.68, 116.779, 103.939]
resized_frame7 = cv2.resize(frame7, (image_height, image_width))
resized_frame7 = resized_frame7 – [123.68, 116.779, 103.939]
resized_frame8 = cv2.resize(frame8, (image_height, image_width))
resized_frame8 = resized_frame8 – [123.68, 116.779, 103.939]
resized_frame_for_transmition1 = cv2.resize(frame1, (image_height1, image_width1))
resized_frame_for_transmition2 = cv2.resize(frame2, (image_height1, image_width1))
resized_frame_for_transmition3 = cv2.resize(frame3, (image_height1, image_width1))
resized_frame_for_transmition4 = cv2.resize(frame4, (image_height1, image_width1))
resized_frame_for_transmition5 = cv2.resize(frame5, (image_height1, image_width1))
resized_frame_for_transmition6 = cv2.resize(frame6, (image_height1, image_width1))
resized_frame_for_transmition7 = cv2.resize(frame7, (image_height1, image_width1))
resized_frame_for_transmition8 = cv2.resize(frame8, (image_height1, image_width1))
predicted_labels_probabilitie1 = model.predict(np.expand_dims(resized_frame1, axis = 0))
predicted_labels_probabilitie2 = model.predict(np.expand_dims(resized_frame2, axis = 0))
predicted_labels_probabilitie3 = model.predict(np.expand_dims(resized_frame3, axis = 0))
predicted_labels_probabilitie4 = model.predict(np.expand_dims(resized_frame4, axis = 0))
predicted_labels_probabilitie5 = model.predict(np.expand_dims(resized_frame5, axis = 0))
predicted_labels_probabilitie6 = model.predict(np.expand_dims(resized_frame6, axis = 0))
predicted_labels_probabilitie7 = model.predict(np.expand_dims(resized_frame7, axis = 0))
predicted_labels_probabilitie8 = model.predict(np.expand_dims(resized_frame8, axis = 0))
tags1 = prediction_to_tags(inv_mapping, predicted_labels_probabilitie1[0])
if len(tags1) == 0:
predicted_class_name1=”Predicting”
elif tags1[0] == ‘Dry’:
predicted_class_name1= “Flooring is Dry”
elif tags1[0] == ‘Wet’:
predicted_class_name1= “Flooring is Wet”
# self.f11.setStyleSheet(“color: red”)
# QtCore.QTimer.singleShot(2000, lambda: self.f11.setStyleSheet(“color: red”))
numberOfCritical+=1
# warning1.send()
elif tags1[0] == ‘Dark’:
predicted_class_name1= “Too dark! Cant predict”
else:
predicted_class_name1= “Wait some time”
tags2 = prediction_to_tags(inv_mapping, predicted_labels_probabilitie2[0])
if len(tags2) == 0:
predicted_class_name1=”Predicting”
elif tags2[0] == ‘Dry’:
predicted_class_name2= “Flooring is Dry”
elif tags2[0] == ‘Wet’:
predicted_class_name2= “Flooring is Wet”
# self.f21.setStyleSheet(“color: red”)
# QtCore.QTimer.singleShot(2000, lambda: self.f21.setStyleSheet(“color: red”))
numberOfCritical+=1
# warning1.send()
elif tags2[0] == ‘Dark’:
predicted_class_name2= “Too dark! Cant predict”
else:
predicted_class_name2= “Wait some time
tags3 = prediction_to_tags(inv_mapping, predicted_labels_probabilitie3[0])
if len(tags3) == 0:
predicted_class_name1=”Predicting”
elif tags3[0] == ‘Dry’:
predicted_class_name3= “Flooring is Dry”
elif tags3[0] == ‘Wet’:
predicted_class_name3= “Flooring is Wet”
# self.f31.setStyleSheet(“color: red”)
# QtCore.QTimer.singleShot(2000, lambda: self.f31.setStyleSheet(“color: red”))
numberOfCritical+=1
# warning1.send()
elif tags3[0] == ‘Dark’:
predicted_class_name3= “Too dark! Cant predict”
else:
predicted_class_name3= “Wait some time”
tags4 = prediction_to_tags(inv_mapping, predicted_labels_probabilitie4[0])
if len(tags4) == 0:
predicted_class_name1=”Predicting”
elif tags4[0] == ‘Dry’:
predicted_class_name4= “Flooring is Dry”
elif tags4[0] == ‘Wet’:
predicted_class_name4= “Flooring is Wet”
# self.f41.setStyleSheet(“color: red”)
# QtCore.QTimer.singleShot(2000, lambda: self.f41.setStyleSheet(“color: red”))
numberOfCritical+=1
# warning1.send()
elif tags4[0] == ‘Dark’:
predicted_class_name4= “Too dark! Cant predict”
else:
predicted_class_name4= “Wait some time”
tags5 = prediction_to_tags(inv_mapping, predicted_labels_probabilitie5[0])
if len(tags5) == 0:
predicted_class_name1=”Predicting”
elif tags5[0] == ‘Dry’:
predicted_class_name5= “Flooring is Dry”
elif tags5[0] == ‘Wet’:
predicted_class_name5= “Flooring is Wet”
# self.f51.setStyleSheet(“color: red”)
# QtCore.QTimer.singleShot(2000, lambda: self.f51.setStyleSheet(“color: red”))
numberOfCritical+=1
# warning1.send()
elif tags5[0] == ‘Dark’:
predicted_class_name5= “Too dark! Cant predict”
else:
predicted_class_name5= “Wait some time”
tags6 = prediction_to_tags(inv_mapping, predicted_labels_probabilitie6[0])
if len(tags6) == 0:
predicted_class_name1=”Predicting”
elif tags6[0] == ‘Dry’:
predicted_class_name6= “Flooring is Dry”
elif tags6[0] == ‘Wet’:
predicted_class_name6= “Flooring is Wet”
# self.f61.setStyleSheet(“color: red”)
# QtCore.QTimer.singleShot(2000, lambda: self.f61.setStyleSheet(“color: red”))
numberOfCritical+=1
# warning1.send()
elif tags6[0] == ‘Dark’:
predicted_class_name6= “Too dark! Cant predict”
else:
predicted_class_name6= “Wait some time”
tags7 = prediction_to_tags(inv_mapping, predicted_labels_probabilitie7[0])
if len(tags7) == 0:
predicted_class_name1=”Predicting”
elif tags7[0] == ‘Dry’:
predicted_class_name7= “Flooring is Dry”
elif tags7[0] == ‘Wet’:
predicted_class_name7= “Flooring is Wet”
# self.f71.setStyleSheet(“color: red”)
# QtCore.QTimer.singleShot(2000, lambda: self.f71.setStyleSheet(“color: red”))
numberOfCritical+=1
# warning1.send()
elif tags7[0] == ‘Dark’:
predicted_class_name7= “Too dark! Cant predict”
else:
predicted_class_name7= “Wait some time”
tags8 = prediction_to_tags(inv_mapping, predicted_labels_probabilitie8[0])
if len(tags8) == 0:
predicted_class_name1=”Predicting”
elif tags8[0] == ‘Dry’:
predicted_class_name8= “Flooring is Dry”
elif tags8[0] == ‘Wet’:
predicted_class_name8= “Flooring is Wet”
# self.f81.setStyleSheet(“color: red”)
# QtCore.QTimer.singleShot(2000, lambda: self.f81.setStyleSheet(“color: red”))
numberOfCritical+=1
# warning1.send()
elif tags8[0] == ‘Dark’:
predicted_class_name8= “Too dark! Cant predict”
else:
predicted_class_name8= “Wait some time”
cv2.putText(resized_frame_for_transmition1, predicted_class_name1, (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 0, 255), 2)
cv2.putText(resized_frame_for_transmition2, predicted_class_name2, (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 0, 255), 2)
cv2.putText(resized_frame_for_transmition3, predicted_class_name3, (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 0, 255), 2)
cv2.putText(resized_frame_for_transmition4, predicted_class_name4, (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 0, 255), 2)
cv2.putText(resized_frame_for_transmition5, predicted_class_name5, (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 0, 255), 2)
cv2.putText(resized_frame_for_transmition6, predicted_class_name6, (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 0, 255), 2)
cv2.putText(resized_frame_for_transmition7, predicted_class_name7, (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 0, 255), 2)
cv2.putText(resized_frame_for_transmition8, predicted_class_name8, (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 0, 255), 2)
# print(‘1 ‘+predicted_class_name1)
# print(‘2 ‘+predicted_class_name2)
# print(‘3 ‘+predicted_class_name3)
# print(‘4 ‘+predicted_class_name4)
# print(‘5 ‘+predicted_class_name5)
# print(‘6 ‘+predicted_class_name6)
# print(‘7 ‘+predicted_class_name7)
# print(‘8 ‘+predicted_class_name8)
# print(type(resized_frame_for_transmition1))
# cv2.waitKey(0)

rt11=cv2.cvtColor(resized_frame_for_transmition1, cv2.COLOR_BGR2RGB)
rt22=cv2.cvtColor(resized_frame_for_transmition2, cv2.COLOR_BGR2RGB)
rt33=cv2.cvtColor(resized_frame_for_transmition3, cv2.COLOR_BGR2RGB)
rt44=cv2.cvtColor(resized_frame_for_transmition4, cv2.COLOR_BGR2RGB)
rt55=cv2.cvtColor(resized_frame_for_transmition5, cv2.COLOR_BGR2RGB)
rt66=cv2.cvtColor(resized_frame_for_transmition6, cv2.COLOR_BGR2RGB)
rt77=cv2.cvtColor(resized_frame_for_transmition7, cv2.COLOR_BGR2RGB)
rt88=cv2.cvtColor(resized_frame_for_transmition8, cv2.COLOR_BGR2RGB)
rt1=im.fromarray(rt11)
rt2=im.fromarray(rt22)
rt3=im.fromarray(rt33)
rt4=im.fromarray(rt44)
rt5=im.fromarray(rt55)
rt6=im.fromarray(rt66)
rt7=im.fromarray(rt77)
rt8=im.fromarray(rt88)
rt1.save(“D:/Code PlayGround/AsAllWays/f1.png”)
rt2.save(“D:/Code PlayGround/AsAllWays/f2.png”)
rt3.save(“D:/Code PlayGround/AsAllWays/f3.png”)
rt4.save(“D:/Code PlayGround/AsAllWays/f4.png”)
rt5.save(“D:/Code PlayGround/AsAllWays/f5.png”)
rt6.save(“D:/Code PlayGround/AsAllWays/f6.png”)
rt7.save(“D:/Code PlayGround/AsAllWays/f7.png”)
rt8.save(“D:/Code PlayGround/AsAllWays/f8.png”)
# rt1=np.asarray(rt11)
# rt2=np.asarray(rt22)
# rt3=np.asarray(rt33)
# rt4=np.asarray(rt44)
# rt5=np.asarray(rt55)
# rt6=np.asarray(rt66)
# rt7=np.asarray(rt77)
# rt8=np.asarray(rt88
# print(type(rt1))
return render_template(‘App.html’,ret=flag)
# return render_template(‘App.html’,ret=flag, rt1=array_to_img(resized_frame_for_transmition1), rt2=array_to_img(resized_frame_for_transmition2), rt3=array_to_img(resized_frame_for_transmition3), rt4=array_to_img(resized_frame_for_transmition4), rt5=array_to_img(resized_frame_for_transmition5), rt6=array_to_img(resized_frame_for_transmition6), rt7=array_to_img(resized_frame_for_transmition7), rt8=array_to_img(resized_frame_for_transmition8))
# self.textBrowser.setText(‘There are total ‘+ str(numberOfCritical)+’ wet area detected’)

And now i want to display those frames on flask web application. but when i am displaying this frames into web page, it shows only the icon of frame not actual frames I want. here is the html code for the web app

<!DOCTYPE html>
<html lang=”en”>

<head>
</div>
<link rel=”icon” href=”data:,”>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Survellience</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
background: rgb(80, 79, 86);
background: linear-gradient(90deg, rgb(54, 54, 54) 0%, rgba(54, 54, 54) 1%, rgb(54, 54, 54) 100%);
}

.resultWindow {
position:-webkit-sticky;
position: sticky;
background-color: rgb(246, 237, 237);
top: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
border: solid black 2px;
border-radius: 10px;
width: 90%;
height: 1px;
padding: 2%;
font-size: large;
font-weight: bold;
text-align: center;
margin-top: 3%;
}

.inputWindowContainer {
width: 100%;

margin-top: 3%;
}

.inputWindows {
display: flex;
justify-content: first baseline;

}

.Window {
border: solid black 2px;
border-radius: 10px;
padding: 1px;
width: 100%;
height: 141px;
display: flex;
align-items: flex-start;
margin: 1%;
align-items: center;
justify-content: center;

}
</style>
</head>

<body>

{% for i in range(ret) %}
home()
{% endfor %}

<h1 style=”color:azure”>Survellience System</h1>
<div class=”resultWindow” style=”color: rgb(255, 0, 0)”>All areas are dry!! No spillage detected!!</div>

</div>

the only problem i have faced is that the web page is not displaying the frames which is passed by above mentioned python file to the html page mentioned above. and I have stored the frames in the same folder where the html file is present. I even changed the postion
of images to be stored but nothing was able to solve this problem.
the error I am facing is

127.0.0.1 – – [10/Jul/2022 21:12:22] “GET / HTTP/1.1” 200 –
127.0.0.1 – – [10/Jul/2022 21:12:22] “GET /templates/f1.png HTTP/1.1” 404 –
127.0.0.1 – – [10/Jul/2022 21:12:22] “GET /f2.png HTTP/1.1” 404 –
127.0.0.1 – – [10/Jul/2022 21:12:22] “GET /f3.png HTTP/1.1” 404 –
127.0.0.1 – – [10/Jul/2022 21:12:22] “GET /f4.png HTTP/1.1” 404 –
127.0.0.1 – – [10/Jul/2022 21:12:22] “GET /f5.png HTTP/1.1” 404 –
127.0.0.1 – – [10/Jul/2022 21:12:22] “GET /f6.png HTTP/1.1” 404 –
127.0.0.1 – – [10/Jul/2022 21:12:22] “GET /f7.png HTTP/1.1” 404 –
127.0.0.1 – – [10/Jul/2022 21:12:22] “GET /f8.png HTTP/1.1” 404 –

please help me to understand and find the solution of the problem.

0

اسئلة برمجة alkrsan 4 سنوات 2022-07-11T16:05:00+03:00 2022-07-11T16:05:00+03:00 0 إجابة 8 مشاهدات مثقف

0

عن alkrsanمثقف

‫أضف إجابة

الاسم*

البريد الإلكتروني*

الموقع

المرفقات

تصفح

الصورة البارزة

تصفح

إجابة*

أجب كمجهول مجهول يجيب

السؤال السابق

السؤال التالي

سجل الآن

تسجيل دخول

فقدت كلمة المرور

تسجيل دخول

سجل الآن

Is there any way to display diffrent frames of videos in web app using flask application?