0

i want to stream video from raspberry pi camera and some other variables to another computer and receive variables from this computer , so i used flask to make an html page in which i streamed the video and showed my variables , but it only worked when on the raspberry pi locally when i run the python script . so i can only access the video feed from the raspberry pi browser ,when i searched i understood that i need to use apache2 to deploy the flask app , so i used it , i finally could access the html file from other computers when i write the raspberry pi ip address but no video stream is showing and the variables are fixed at their initial state , i think the python flask script doesn't work when apache is used . i really don't know if i am using the right approach to do what i want but imagine this scenario : i have a camera at a remote location connected to RPI and i view the stream from this camera then based on what i see i want to turn on leds or switch some relays and read data from different sensors .

main code


from flask import Flask, render_template, Response,request
from camera import VideoCamera
from threading import Thread
import time
x=1
app = Flask(__name__)
app1=Flask("test")
var=5
var2="non"

@app.route('/')
def index():

    return render_template('index.html',variable =var,variable2=var2)#,variable =var


@app.route('/', methods=['POST'])
def my_form_post():
    global x

    text = request.form['text']
    processed_text = text
    x=str(processed_text)
    cond(x)


    return processed_text

def add():
    global var
    while True:
        var=var+1
        time.sleep(10)
        print(var)

t1 =Thread(target=add)


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')

@app1.route('/video_feed')
def video_feed():

    return Response(gen(VideoCamera()),
                    mimetype='multipart/x-mixed-replace; boundary=frame')
def app_run():
    app.run(host='0.0.0.0')
    print("app.run started")
t2=Thread(target=app_run)
def app_run1():
    app1.run(host='0.0.0.0',port=5001)
    print("app.run started")
t3=Thread(target=app_run1)
def cond (v):
    global var2
    print(v)
    if v==0:
        var2="no smoke"



if __name__ == '__main__':


            t1.start()
            t3.start()


            t2.start()

camera module


import cv2
face_cas = cv2.CascadeClassifier('haarcascade_face.xml')
class VideoCamera(object):
    def __init__(self):

        self.video = cv2.VideoCapture(0)


    def __del__(self):
        self.video.release()

    def get_frame(self):
        success, image = self.video.read()
        gray =cv2.cvtColor(image,cv2.COLOR_BGR2GRAY)
        faces = face_cas.detectMultiScale(gray, 1.3, 5)
        for (x,y,w,h) in faces:
            cv2.rectangle(image,(x,y),(x+w,y+h),(255,0,0),2)

        ret, jpeg = cv2.imencode('.jpg', image)

        return jpeg.tobytes()

html script


  <html>
  <head>
      <title>Car Security System</title>
      <style>
          #mainheader {
              text-align: center;
              background-color: black;
              color: white;
              padding: 10px;
          }

          #mainfotter {
              text-align: center;
              color: red;
              font-size: 18px;
          }
      </style>

  </head>
  <body>
      <header id="mainheader">
          <h1>Car Security System</h1>
      </header>
      <img id="bg" src="http://127.0.0.1:5001/video_feed">


      <p>Smoke :                 {{variable2}}</p>
      <p>user from finger print: {{ variable2 }}</p>



      <table>
          <thead>
              <tr>
                  <th>right Door |</th>
                  <th>Left Door  | </th>
                  <th>Trunk      | </th>
              </tr>
          </thead>


          <tbody>
              <tr>
                  <td id="var" >{{ variable }}</tdid>
                  <td>{{ variable }}</td>
                  <td>{{ variable }}</td>
              </tr>

          </tbody>
      </table>






      <form method="POST" id="my_awesome_form">
          <input name="text">
          <input type="submit" id="form_submit">
      </form>




      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



      <script>
                          $(document).ready( function() {
                            var form = $('#my_awesome_form');

                            form.submit( function(e) {
                                  e.preventDefault()
                              $.ajax( {

                                type: "POST",
                                url: window.location,
                                data: form.serialize(),
                                success: function( response ) {
                                  console.log( response );
                                }
                              } );
                            } );

                          } );
      </script>



      <div class="container">
          <h1 id="time"></h1>
          <button onclick="myFunction()">Click me </button>

      </div>
      <script>
           var myVar;
          function myFunction() {
             myVar = setInterval(changetext, 1000);
          }

          function changetext(){
          var heading = document.getElementById('var');


              heading.innerHTML= date();

          }







      </script>

      <fotter id="mainfotter">
          <p>LED LAB PROJECT </p>
      </fotter>
  </body>
  </html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.