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
app = Flask(__name__)

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

    return processed_text

def add():
    global var
    while True:

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

def video_feed():

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

if __name__ == '__main__':



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

    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:

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

        return jpeg.tobytes()

html script

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

          #mainfotter {
              text-align: center;
              color: red;
              font-size: 18px;

      <header id="mainheader">
          <h1>Car Security System</h1>
      <img id="bg" src="">

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

                  <th>right Door |</th>
                  <th>Left Door  | </th>
                  <th>Trunk      | </th>

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


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

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

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

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

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

                          } );

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

           var myVar;
          function myFunction() {
             myVar = setInterval(changetext, 1000);

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

              heading.innerHTML= date();



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

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.