C

app.py

@@ -3,6 +3,8 @@ import time
 import numpy as np
 import mediapipe as mp
 
+from flask import Flask, request, jsonify, send_file
+
 import uvicorn
 from socketio import ASGIApp
 
@@ -20,6 +22,34 @@ import yt_dlp as youtube_dl
 import uvicorn
 
 import base64
+import matplotlib.pyplot as plt
+import numpy as np
+import base64
+from io import BytesIO
+from PIL import Image
+
+def plot_base64_image(image_base64):
+    # Decode base64 string
+    image_data = base64.b64decode(image_base64)
+    
+    # Convert bytes to PIL Image
+    image = Image.open(BytesIO(image_data))
+    
+    # Convert PIL Image to numpy array
+    image_array = np.array(image)
+    
+    # Plot image
+    plt.imshow(image_array)
+    plt.axis('off')
+    plt.show()
+
+# Example usage:
+# base64_image = "..."  # Your base64 encoded image string
+# plot_base64_image(base64_image)
+
+
+
+
 
 model_object_detection = YOLO("bisindov2.pt")
 
@@ -276,6 +306,39 @@ class VideoStreaming(object):
                 yield (b'--frame\r\n'
                        b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
 
+    def show1(self, url):
+        print("url")
+        self._preview = False
+        self._flipH = False
+        self._detect = False
+        self._mediaPipe = False
+
+        self._confidence = 75.0
+        ydl_opts = {
+            "quiet": True,
+            "no_warnings": True,
+            "format": "best",
+            "forceurl": True,
+        }
+        
+
+        while True:
+            # Decoding the Base64 string to get the frame data
+            frame_bytes = base64.b64decode(url)
+
+            # Converting the frame data to an OpenCV image
+            frame_np = np.frombuffer(frame_bytes, np.uint8)
+            frame = cv2.imdecode(frame_np, cv2.IMREAD_COLOR)
+
+            # Encode the frame data to bytes
+            _, frame_encoded = cv2.imencode(".jpg", frame)
+            frame_bytes = frame_encoded.tobytes()
+
+            yield (
+                b'--frame\r\n'
+                b'Content-Type: image/jpeg\r\n\r\n' + frame_bytes + b'\r\n'
+            )
+
 
 # check_settings()
 VIDEO = VideoStreaming()
@@ -369,29 +432,61 @@ def test_connect():
 ######################
 
 def preprocess_frame(frame_data):
-    # Convert base64 image string to numpy array
-    imgdata = base64.b64decode(frame_data)
-    nparr = np.frombuffer(imgdata, np.uint8)
-    frame = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
-    print("rani dezte hna koolchi mezian")
+    if frame_data is None:
+        return None  # Return None if frame_data is None
     
-    # Apply image processing here (example: grayscale conversion)
-    processed_frame = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
+    try:
+        # Convert base64 image string to numpy array
+        # Split frame_data to extract base64 part
+        base64_data = frame_data
+        
+        # Convert base64 image string to numpy array
+        imgdata = base64.b64decode(base64_data)
+        imgarray = np.frombuffer(imgdata, np.uint8)
     
-    # Convert processed frame back to base64 image string
-    _, buffer = cv2.imencode('.jpg', processed_frame)
-    processed_frame_data = base64.b64encode(buffer).decode('utf-8')
+        # Decode the image using cv2.imdecode
+        frame = cv2.imdecode(imgarray, cv2.IMREAD_COLOR)
+        
+        print("rani dezte hna koolchi mezian")
+        
+        # Apply image processing here (example: grayscale conversion)
+        processed_frame = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
+    
+        # Convert processed frame back to base64 image string
+        _, buffer = cv2.imencode('.jpg', processed_frame)
+        processed_frame_data = base64.b64encode(buffer).decode('utf-8')
+
+        #plot_base64_image(processed_frame_data)
+        return processed_frame_data
+    except Exception as e:
+        print("Error processing frame:", e)
+        return None
     
-    return processed_frame_data
 
 
+#@socketio.on('stream_frame')
+#def handle_stream_frame(frame_data):
+#    processed_frame_data = preprocess_frame(frame_data)
+#    #emit('receive_frame', processed_frame_data, broadcast=True)    
+#    return Response(VIDEO.show1(frame_data), mimetype='multipart/x-mixed-replace; boundary=frame')
+# Route to receive a frame for processing
 
-@socketio.on('stream_frame')
-def handle_stream_frame(frame_data):
-    processed_frame_data = preprocess_frame(frame_data)
-    emit('receive_frame', processed_frame_data, broadcast=True)    
-##################
 
+    
+@app.route('/process_frame', methods=['POST'])
+def process_frame():
+    if 'frame' in request.files:
+        frame = request.files['frame']
+        # Process the frame here
+        # For example, you can save the frame to a file
+        frame_path = 'result_frame.jpg'
+        frame.save(frame_path)
+        # Return the processed frame
+        return send_file(frame_path, mimetype='image/jpeg')
+    else:
+        return 'No frame data received'
+    
+    
 if __name__ == '__main__':
     socketio.run(app, host="0.0.0.0", allow_unsafe_werkzeug=True,port=7860)
 

templates/index.html

@@ -131,6 +131,17 @@
     <div class = 'video'>
         <img id="image">
     </div>
+    <div class="col-span-8 mx-4 mt-3" style="background-color: lightgrey; border-radius: 10px;"> <!-- أضفت لون خلفية ونصبت دائرة لـ div الفيديو -->
+        <div id="container">
+            <img class="center" src="{{ url_for('process_frame') }}" id="videoElement12" alt="Video Feed processed">
+        </div>
+    </div>
+    
+    <div class="col-span-8 mx-4 mt-3" style="background-color: lightgrey; border-radius: 10px;">
+        <div id="container">
+            <img class="center" id="processedFrameElement" alt="Processed Frame">
+        </div>
+    </div>
 
 
 </body>
@@ -142,58 +153,61 @@
 
 
     <script>
-        function capture(video, scaleFactor) {
-            if(scaleFactor == null){
-                scaleFactor = 1;
-            }
-            var w = video.videoWidth * scaleFactor;
-            var h = video.videoHeight * scaleFactor;
-            var canvas = document.createElement('canvas');
-                canvas.width  = w;
-                canvas.height = h;
-            var ctx = canvas.getContext('2d');
-                ctx.drawImage(video, 0, 0, w, h);
-            return canvas;
-        } 
-
-        var socket = io();
-        socket.on('connect', function(){
-            console.log("Connection has been succesfully established with socket.", socket.connected)
-        });
-        const video = document.querySelector("#videoElement1");
-        video.width = 500; 
-        video.height = 375; ;
-        if (navigator.mediaDevices.getUserMedia) {
-            navigator.mediaDevices.getUserMedia({ video: true })
+  
+        // Create an img element to display the processed frame
+        var imgElement = document.createElement('img');
+        document.body.appendChild(imgElement);
+        
+        navigator.mediaDevices.getUserMedia({ video: true })
             .then(function (stream) {
-                video.srcObject = stream;
-                video.play();
+                const videoElement = document.createElement('video');
+                document.body.appendChild(videoElement);
+                videoElement.srcObject = stream;
+                videoElement.play();
+        
+                setInterval(() => {
+                    var type = 'image/jpeg';
+                    var canvas = document.createElement('canvas');
+                    var context = canvas.getContext('2d');
+                    canvas.width = videoElement.videoWidth;
+                    canvas.height = videoElement.videoHeight;
+                    context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
+                    
+                    // Convert canvas data to Blob
+                    canvas.toBlob(function(blob) {
+                        // Create FormData object to send the blob to the server
+                        var formData = new FormData();
+                        formData.append('frame', blob, 'result_frame.jpg');
+                        
+                        // Make a POST request to the Flask server
+                        fetch('/process_frame', {
+                            method: 'POST',
+                            body: formData
+                        })
+                        .then(response => {
+                            if (!response.ok) {
+                                throw new Error('Failed to process frame on server');
+                            }
+                            return response.blob();
+                        })
+                        .then(blob => {
+                            // Display the processed frame on the webpage
+                            imgElement.src = URL.createObjectURL(blob);
+                        })
+                        .catch(error => {
+                            console.error('Error:', error);
+                        });
+                    }, type);
+        
+                }, 1000); // Capture and send a frame every second (1000 milliseconds)
+        
             })
-            .catch(function (err0r) {
-                console.log(err0r)
-                console.log("Something went wrong!");
+            .catch(function (error) {
+                console.log(error);
+                console.log("An error occurred while accessing the camera stream.");
             });
-        }
-        const FPS = 22;
-
-    // Update this code snippet in your existing frontend script
-
-setInterval(() => {
-    var type = "image/jpeg"; // Fix the typo in 'image/jpg'
-    var video_element = document.getElementById("videoElement1");
-    var frame = capture(video_element, 1);
-    var data = frame.toDataURL(type);
-
-    // Emit the image data to the backend using 'stream_frame' event
-    socket.emit('stream_frame', data);
-}, 10000/FPS);
-
+        
     
-        socket.on('response_back', function(image){
-            const image_id = document.getElementById('image');
-            console.log(image)
-            image_id.src = image;
-        });
     </script>
 
 </html>