Python make video input instead of images in flask

Hi , I have a code where I can input images but i cant input videos. I want to be able to input a .mov video that i took with my camera and upload it to a flask server.

my main code :

object_detector.py :

from ultralytics import YOLO

from flask import request, Flask, jsonify

from waitress import serve

from PIL import Image

app = Flask(__name__)

@app.route("/")

def root():

"""

Site main page handler function.

:return: Content of index.html file

"""

with open("index.html") as file:

return file.read()

@app.route("/detect", methods=["POST"])

def detect():

"""

Handler of /detect POST endpoint

Receives uploaded file with a name "image_file", passes it

through YOLOv8 object detection network and returns and array

of bounding boxes.

:return: a JSON array of objects bounding boxes in format [[x1,y1,x2,y2,object_type,probability],..]

"""

buf = request.files["image_file"]

boxes = detect_objects_on_image(buf.stream)

return jsonify(boxes)

def detect_objects_on_image(buf):

"""

Function receives an image,

passes it through YOLOv8 neural network

and returns an array of detected objects

and their bounding boxes

:param buf: Input image file stream

:return: Array of bounding boxes in format [[x1,y1,x2,y2,object_type,probability],..]

"""

model = YOLO("bestnano.pt")

results = model.predict(Image.open(buf))

result = results[0]

output = []

for box in result.boxes:

x1, y1, x2, y2 = [

round(x) for x in box.xyxy[0].tolist()

]

class_id = box.cls[0].item()

prob = round(box.conf[0].item(), 2)

output.append([

x1, y1, x2, y2, result.names[class_id], prob

])

return output

serve(app, host='0.0.0.0', port=8080)

my index_html code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>YOLOv8 Object Detection</title>

<style>

canvas {

display:block;

border: 1px solid black;

margin-top:10px;

}

</style>

</head>

<body>

<input id="uploadInput" type="file"/>

<canvas></canvas>

<script>

/**

* "Upload" button onClick handler: uploads selected image file

* to backend, receives array of detected objects

* and draws them on top of image

*/

const input = document.getElementById("uploadInput");

input.addEventListener("change",async(event) => {

const data = new FormData();

data.append("image_file",event.target.files[0],"image_file");

const response = await fetch("/detect",{

method:"post",

body:data

});

const boxes = await response.json();

draw_image_and_boxes(event.target.files[0],boxes);

})

/**

* Function draws the image from provided file

* and bounding boxes of detected objects on

* top of the image

* @param file Uploaded file object

* @param boxes Array of bounding boxes in format [[x1,y1,x2,y2,object_type,probability],...]

*/

function draw_image_and_boxes(file,boxes) {

const img = new Image()

img.src = URL.createObjectURL(file);

img.onload = () => {

const canvas = document.querySelector("canvas");

canvas.width = img.width;

canvas.height = img.height;

const ctx = canvas.getContext("2d");

ctx.drawImage(img,0,0);

ctx.strokeStyle = "#00FF00";

ctx.lineWidth = 3;

ctx.font = "18px serif";

boxes.forEach(([x1,y1,x2,y2,label]) => {

ctx.strokeRect(x1,y1,x2-x1,y2-y1);

ctx.fillStyle = "#00ff00";

const width = ctx.measureText(label).width;

ctx.fillRect(x1,y1,width+10,25);

ctx.fillStyle = "#000000";

ctx.fillText(label, x1, y1+18);

});

}

}

</script>

</body>

</html>
 <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>YOLOv8 Object Detection</title>

<style>

canvas {

display:block;

border: 1px solid black;

margin-top:10px;

}

</style>

</head>

<body>

<input id="uploadInput" type="file"/>

<canvas></canvas>

<script>

/**

* "Upload" button onClick handler: uploads selected image file

* to backend, receives array of detected objects

* and draws them on top of image

*/

const input = document.getElementById("uploadInput");

input.addEventListener("change",async(event) => {

const data = new FormData();

data.append("image_file",event.target.files[0],"image_file");

const response = await fetch("/detect",{

method:"post",

body:data

});

const boxes = await response.json();

draw_image_and_boxes(event.target.files[0],boxes);

})

/**

* Function draws the image from provided file

* and bounding boxes of detected objects on

* top of the image

* @param file Uploaded file object

* @param boxes Array of bounding boxes in format [[x1,y1,x2,y2,object_type,probability],...]

*/

function draw_image_and_boxes(file,boxes) {

const img = new Image()

img.src = URL.createObjectURL(file);

img.onload = () => {

const canvas = document.querySelector("canvas");

canvas.width = img.width;

canvas.height = img.height;

const ctx = canvas.getContext("2d");

ctx.drawImage(img,0,0);

ctx.strokeStyle = "#00FF00";

ctx.lineWidth = 3;

ctx.font = "18px serif";

boxes.forEach(([x1,y1,x2,y2,label]) => {

ctx.strokeRect(x1,y1,x2-x1,y2-y1);

ctx.fillStyle = "#00ff00";

const width = ctx.measureText(label).width;

ctx.fillRect(x1,y1,width+10,25);

ctx.fillStyle = "#000000";

ctx.fillText(label, x1, y1+18);

});

}

}

</script>

</body>

</html>

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like