-1

I want to show the Livestream behind the buttons without pressing "link to video feed"

This is the html code:

LIVE STREAMING - Surveillance Robot a { font-size: 30px; }
<div style="float:right">
    <video id="remoteVideo" autoplay></video>
    <a href="{{ url_for('video_feed') }}" target="_self">Link to Video Feed</a>
</div>

<div style="height:400px; width:300px; float:right;">
    <center>
        <h1><span style="color:#5C5C5C;">Circuit</span><span style="color:#139442"> Digest</span></h1>
        <h2>Surveillance Robot</h2><br><br>
        <a href="#" id="forward" style="font-size:30px;text-decoration:none;"> &#x1F881;&#x1F881;<br>Avancer</a><br><br></center>
        <a href="#" id="left" style="font-size:30px;text-decoration:none;"> &#x1F880;&#x1F880;Gauche</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#" id="right" style="font-size:30px; text-decoration:none;"> Droite &#x1F882;&#x1F882;</a><br><br>
        <center><a href="#" id="backward" style="font-size:30px;text-decoration:none;"> Reculer<br> &#x1F883;&#x1F883;</a></center><br>
        <center><a href="#" id="stop" style="font-size:30px;text-decoration:none;"> Stop &#x23F8;</a></center><br>
    </div>

<script src="{{ url_for('static', filename='main.js') }}"></script>

<script>
    $( document ).ready(function(){
        // Movement buttons: Send commands on mousedown, stop on mouseup
        $("#forward").on("mousedown", function() {
            $.get('/forward');
        }).on('mouseup', function() {
            $.get('/stop');
        });
        $("#backward").on("mousedown", function() {
            $.get('/backward');
        }).on('mouseup', function() {
            $.get('/stop');
        });
        $("#left").on("mousedown", function() {
            $.get('/left');
        }).on('mouseup', function() {
            $.get('/stop');
        });
        $("#right").on("mousedown", function() {
            $.get('/right');
        }).on('mouseup', function() {
            $.get('/stop');
        });

        // Stop button: Send stop command directly on click
        $("#stop").on("click", function() {
            $.get('/stop');
        });
    });
</script>

This is the python code:

import RPi.GPIO as GPIO from flask import Flask, render_template, Response, request, jsonify, redirect, url_for from aiortc import RTCPeerConnection, RTCSessionDescription import cv2 import json import uuid import asyncio import logging import time

app = Flask(name, static_url_path='/static')

GPIO.setmode(GPIO.BOARD)

IN1 = 12 IN2 = 16 ENA = 18

IN3 = 22 IN4 = 13 ENB = 15

GPIO.setup(IN1, GPIO.OUT) GPIO.setup(IN2, GPIO.OUT) GPIO.setup(ENA, GPIO.OUT) GPIO.setup(IN3, GPIO.OUT) GPIO.setup(IN4, GPIO.OUT) GPIO.setup(ENB, GPIO.OUT)

pcs = set() def generate_frames(): camera = cv2.VideoCapture(0) while True: start_time = time.time() success, frame = camera.read() if not success: break else: ret, buffer = cv2.imencode('.jpg', frame) frame = buffer.tobytes() # Concatenate frame and yield for streaming yield (b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n') elapsed_time = time.time() - start_time logging.debug(f"Frame generation time: {elapsed_time} seconds") async def offer_async(): params = await request.json offer = RTCSessionDescription(sdp=params["sdp"], type=params["type"]) # Create an RTCPeerConnection instance pc = RTCPeerConnection() # Generate a unique ID for the RTCPeerConnection pc_id = "PeerConnection(%s)" % uuid.uuid4() pc_id = pc_id[:8] # Create a data channel named "chat" # pc.createDataChannel("chat") # Create and set the local description await pc.createOffer(offer) await pc.setLocalDescription(offer) # Prepare the response data with local SDP and type response_data = {"sdp": pc.localDescription.sdp, "type": pc.localDescription.type} return jsonify(response_data)

Wrapper function for running the asynchronous offer function

def offer(): loop = asyncio.new_event_loop() asyncio.set_event_loop(loop) future = asyncio.run_coroutine_threadsafe(offer_async(), loop) return future.result()

Route to handle the offer request

@app.route('/offer', methods=['POST']) def offer_route(): return offer()

Route to stream video frames

@app.route('/video_feed') def video_feed(): return Response(generate_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')

def forward(): GPIO.output(ENA, GPIO.HIGH) GPIO.output(IN1, GPIO.HIGH) GPIO.output(IN2, GPIO.LOW) GPIO.output(ENB, GPIO.HIGH) GPIO.output(IN3, GPIO.HIGH) GPIO.output(IN4, GPIO.LOW)

def left(): GPIO.output(ENA, GPIO.HIGH) GPIO.output(IN1, GPIO.LOW) GPIO.output(IN2, GPIO.HIGH) GPIO.output(ENB, GPIO.HIGH) GPIO.output(IN3, GPIO.HIGH) GPIO.output(IN4, GPIO.LOW)

def right(): GPIO.output(ENA, GPIO.HIGH) GPIO.output(IN1, GPIO.HIGH) GPIO.output(IN2, GPIO.LOW) GPIO.output(ENB, GPIO.HIGH) GPIO.output(IN3, GPIO.LOW) GPIO.output(IN4, GPIO.HIGH)

def backward(): GPIO.output(ENA, GPIO.HIGH) GPIO.output(IN1, GPIO.LOW) GPIO.output(IN2, GPIO.HIGH) GPIO.output(ENB, GPIO.HIGH) GPIO.output(IN3, GPIO.LOW) GPIO.output(IN4, GPIO.HIGH)

def stop(): GPIO.output(ENA, GPIO.LOW) GPIO.output(IN1, GPIO.LOW) GPIO.output(IN2, GPIO.LOW) GPIO.output(ENB, GPIO.LOW) GPIO.output(IN3, GPIO.LOW) GPIO.output(IN4, GPIO.LOW)

@app.route("/") def index(): return render_template("index.html")

@app.route("/forward") def forward_action(): forward() return ""

@app.route("/left") def left_action(): left() return ""

@app.route("/right") def right_action(): right() return ""

@app.route("/backward") def backward_action(): backward() return ""

@app.route("/stop") def stop_action(): stop() return "" if name == "main": app.run(host="192.168.1.199" , port=8081) **

strong text

**

[![the web interface*

Heading

` emphasized text

`

*]1]1

1
  • your post is a mess near the end ... please fix it ... also, please format all of the code
    – jsotola
    Mar 28 at 1:26

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.