javascript – Is there any way to display different 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 these 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 class="inputWindowContainer">
        <div class="inputWindows">
            <div class="Window">    
                <img src="../templates/f1.png" type="png" alt="Girl in a jacket" width="285" height="140"/>  
            </div>
            <div class="Window"> 
                <img src="f2.png" type="png" alt="Girl in a jacket" width="285" height="140"/> 
            </div>
            <div class="Window"> 
                <img src="f3.png" type="png" alt="Girl in a jacket" width="285" height="140"/> 
            </div>
            <div class="Window"> 
                <img src="f4.png" type="png" alt="Girl in a jacket" width="285" height="140"/>  
            </div>
        </div>

        <div class="inputWindows">
            <div class="Window">
                <img src="f5.png" type="png" alt="Girl in a jacket" width="285" height="140"/>  
            </div>
            <div class="Window"> 
                <img src="f6.png" type="png" alt="Girl in a jacket" width="285" height="140"/>  
            </div>
            <div class="Window"> 
                <img src="f7.png" type="png" alt="Girl in a jacket" width="285" height="140"/>  
            </div>
            <div class="Window"> 
                <img src="f8.png" type="png" alt="Girl in a jacket" width="285" height="140"/>  
            </div>
        </div>

        <div class="inputWindows">
            <div class="Window">
                <video width="285" height="140" id="webcam8", autoplay="true"></video>
            </div>             
            <div class="Window"> 
                <video width="285" height="140" id="webcam9", autoplay="true"></video>
            </div>
            <div class="Window"> 
                <video width="285" height="140" id="webcam10", autoplay="true"></video>
            </div>
            <div class="Window"> 
                <video width="285" height="140" id="webcam11", autoplay="true"></video>
            </div>
        </div>

        <div class="inputWindows">
            <div class="Window">
                <video width="285" height="140" id="webcam12", autoplay="true"></video>
            </div>
            <div class="Window"> 
                <video width="285" height="140" id="webcam13", autoplay="true"></video>
            </div>
            <div class="Window">
                <video width="285" height="140" id="webcam14", autoplay="true"></video>
            </div>
            <div class="Window">
                <video width="285" height="140" id="webcam15", autoplay="true"></video>
            </div>
        </div>
      
    </div>

The only problem I have faced is that the web page is not displaying the frames which is passed by the 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.

Leave a Comment