Как отправлять изображения с Flask на JavaScript в реальном времени - PullRequest
Новая
       62

Как отправлять изображения с Flask на JavaScript в реальном времени

0 голосов
/ 27 мая 2020

В настоящее время я пишу программу, которая использует webRT C, Flask и openCV et c ... для анализа видео с веб-камеры в реальном времени. Мне удалось отправить видео с веб-камеры с JavaScript на Flask сервер, но я не могу отобразить изображение после анализа с Flask до HTML.

Например, я пытался сохранить изображение файл один раз. 

@app.route("/img", methods=["POST"])
def img():
    img = cv2.imdecode(np.fromstring(request.files['video'].read(), np.uint8), cv2.IMREAD_UNCHANGED)

　　 #Processing by openCV...

    cv2.imwrite("test.jpg", img)
    return "success"

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

def gen():
    while True:
        with open('test.jpg', 'rb') as f:
            img = f.read()

        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + img + b'\r\n')

Далее идет код HTML 

<img id="cap-src" src="{{ url_for('feed') }}">

Однако этот код, как ни странно, не обновлял изображение, отображаемое в HTML, поэтому я сдался.

Потом попробовал метод без сохранения изображения. 

@app.route("/img", methods=["POST"])
def img():
    global img
    img = cv2.imdecode(np.fromstring(request.files['video'].read(), np.uint8), cv2.IMREAD_UNCHANGED)

def generate_img():
　　#Processing by openCV...

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

def gen():
    while True:
        img = generate_img()

        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + img + b'\r\n')

Код HTML не меняется. Однако этот метод не обновил изображение, отображаемое в HTML. Есть ли хороший способ? И я хочу использовать метод, который не сохраняет изображение, если это возможно. Спасибо.

Наконец, я помещаю сводный код. Это код HTML 

<html>
<head>
</head>
<body>
<img id="img">
<video id="myvideo" width="720px" autoplay></video>
<button id="start"></button>
<canvas id="videocanvas"></canvas>
<img id="cap-src" src="">

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(function(){
    const constraints = window.constraints = {
      audio: false,
      video: {
        facingMode: "environment"
      }
    };

    async function init() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        const video = document.querySelector('#myvideo');
        const videoTracks = stream.getVideoTracks();
        window.stream = stream;
        video.srcObject = stream;
        e.target.disabled = true;
      } catch{
        $('#errorMsg').text('error');
      }
    }

    $('#start').click(init);

    var canvas = $('#videocanvas')[0];

 $('#myvideo').on('loadedmetadata', function(){
     var video = $('#myvideo')[0];
     var width = canvas.width = video.videoWidth;
     var height = canvas.height = video.videoHeight;

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

     var fd = new FormData();
     fd.append('video', null);

     setInterval(function(){
         ctx.drawImage(video, 0, 0, width, height);
         canvas.toBlob(function(blob){

             fd.set('video', blob);

             $.ajax({
                 url: "/img",
                 type : "POST",
                 processData: false,
                 contentType: false,
                 data : fd,
                 dataType: "text",
             })
             .done(function(data){
                 console.log(data);
             })
             .fail(function(data){
                 console.log(data);
             });
         }, 'image/jpeg');
     },100);
 });
});

document.getElementById("start").onclick = function() {
    document.getElementById("cap-src").src = "{{ url_for('feed') }}";

  }

</script>
</body>
</html>

И код python. 

from flask import Flask, render_template, Response, request, jsonify
import cv2
import numpy as np
from PIL import Image

@app.after_request
def after_request(response):
    response.headers.add('Access-Control-Allow-Origin', '*')
    response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
    response.headers.add('Access-Control-Allow-Methods', 'GET,POST') # Put any other methods you need here
    return response

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

@app.route("/img", methods=["POST"])
def img():
    img = cv2.imdecode(np.fromstring(request.files['video'].read(), np.uint8), cv2.IMREAD_UNCHANGED)
    image = cv2.resize(img, (480, 300))
    cv2.imwrite("test.jpg", image)
    ret, jpeg = cv2.imencode('.jpg', image)
    jpeg = jpeg.tobytes()

    return "success"

@api.route('/feed')
def feed():
    return Response(gen(), mimetype='multipart/x-mixed-replace; boundary=frame')

def gen():
    while True:
        with open('./templates/dst/test.jpg', 'rb') as f:
            img = f.read()

        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + img + b'\r\n')
...