Получение изображения по умолчанию при потоковой передаче видео на веб-страницу через django

Моя задача:-* создать веб-страницу, которая принимает видео файл и после отправки через кнопку submit, видео (в виде кадров) будет отображаться внутри самой страницы в другой секции div. причина отображения в виде кадров в том, что мне нужно обрабатывать каждый кадр. (Рендеринг кадров на веб-страницу).*

Мой код django: def gen(request): if request.method == 'POST': try: video_file = request.FILES["video"] if video_file: video_filename = "temp_video.mp4" video_filepath = os.path.join(settings.STATIC_ROOT, video_filename) with open(video_filepath, 'wb') as destination: for chunk in video_file.chunks(): destination.write(chunk) video_cap = cv2.VideoCapture(video_filepath) if not video_cap.isOpened(): print("Error: Could not open video file") return "Error in processing video." while True: ret, frame = video_cap.read() if not ret: break else: #cv2.imshow("output",frame) tried this too but not working. frame_bytes = frame.tobytes() yield (b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' + frame_bytes + b'\r\n\r\n') else: print("no video file") except Exception as e: print("An error occurred:", e) return "An error occurred while processing the video." def process_video(request): return StreamingHttpResponse(gen(request),content_type='multipart/x-mixed-replace; boundary=frame')

Мой javascript (в html-файле):-<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> <script> document.getElementById('uploadForm').addEventListener('submit', function (event) { event.preventDefault(); // Prevent default form submission behavior const formData = new FormData(this); fetch(this.action, { method: this.method, body: formData}) .then(response => { // Handle response // Define a function to handle each frame received function handleFrame(frameUrl) { // Create a new image element var img = $('<img>') .attr('src', frameUrl) .attr('height', '100px') .attr('width', '100px'); $('#video-display').empty().append(img);} // Create a function to process the streaming response function processResponse(response) { var contentType = response.headers.get('content-type'); if (contentType && contentType.indexOf('multipart/x-mixed-replace') !== -1) {const reader = response.body.getReader(); async function read() { while (true) { // Read the next chunk const { done, value } = await reader.read(); // If the chunk is done, break the loop if (done) { break;} // Convert the chunk to a blob and create a URL for it const blob = new Blob([value], { type: 'image/jpeg' }); const imageUrl = URL.createObjectURL(blob); // Handle the frame handleFrame(imageUrl);}} // Start reading chunks read();}} // Process the streaming response processResponse(response);}) .catch(error => { console.error('Error:', error);});}); </script> Мой html:-

{% load static %}
<!DOCTYPE html>
<form class="home-form" id="uploadForm" action="{% url 'process_video' %}" method="post"
                        enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="file" accept="video" id="video-file" name="video"
                            placeholder="Enter your video here" class="home-input input" />
                        <div class="home-container08">
                            <button type="reset" class="home-button button">
                                <span>
                                    <span>Reset</span>
                                    <br />
                                </span>
                            </button>
                            <button type="submit" class="home-button1 button">Submit</button>
                        </div>
                    </form> <div id="video-display" class="home-container16">
                </div>

Мой терминал:-

February 19, 2024 - 16:04:33
Django version 5.0.2, using settings 'final.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

[19/Feb/2024 16:04:50] "GET / HTTP/1.1" 200 9358
[19/Feb/2024 16:05:07] "POST /process-video/ HTTP/1.1" 200 846041346

urls.py в моем приложении:-

from django.urls import path
from . import views
urlpatterns= [
    path("",views.home,name="home"),
     path('process-video/', views.process_video, name='process_video'),]

urls.py в проекте django:-

from django.contrib import admin
from django.urls import path,include
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [
    path('admin/', admin.site.urls),
    path("", include("myapp.urls"))
]
# Add staticfiles_urlpatterns to urlpatterns
urlpatterns += staticfiles_urlpatterns()

На выходе получилось вот так введите описание изображения здесь Это структура моего файла введите описание изображения здесь

Изображение иконки тоже обновлялось, но изображения не отображались, видео сохранялось в статических файлах, как и ожидалось.

пожалуйста, помогите мне. спасибо заранее.

Это не сработало для меня. Поэтому вместо StreamingResponse я использовал программирование сокетов. Это сработало лучше, чем просто передача кадров на веб-страницу. Используйте соответствующие библиотеки для доступа к программированию сокетов и возвращайте кадры через функцию emit.

Вернуться на верх