Получите видео с веб-камеры в колбе - PullRequest
Новая
       16

Получите видео с веб-камеры в колбе

1 голос
/ 29 апреля 2019

Я разрабатываю приложение, в котором есть клиент (html & js) и сервер (колба). Клиент откроет веб-камеру (HTML5 api) -> отправит видеопоток на сервер -> сервер вернет другие потоки с помощью json/ text stream

Я не хочу заниматься пулами.

Я что-то исследовал в видеопотоке, но в каждой статье и примере Интернета, которые я нашел, используйте веб-камеру OpenCV илилокальное видео и получает видео с веб-камеры в реальном времени и отправляет на сервер.

Вот основные примеры, которые я нашел

Сервер: 


    from flask import Flask, render_template, Response
    import cv2

    app = Flask(__name__)

    camera = cv2.VideoCapture(0)  # I can't use a local webcam video or a local source video, I must receive it by http in some api(flask) route

    def gen_frames():  # generate frame by frame from camera
        while True:
            success, frame = camera.read()  # read the camera frame
            if not success:
                break
            else:
                ret, buffer = cv2.imencode('.jpg', frame)
                frame = buffer.tobytes()
                yield (b'--frame\r\n'
                       b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')  # concat frame one by one and show result


    @app.route('/video_feed')
    def video_feed():
        """Video streaming route. Put this in the src attribute of an img tag."""
        return Response(gen_frames(),
                        mimetype='multipart/x-mixed-replace; boundary=frame')


    @app.route('/')
    def index():
        """Video streaming home page."""
        return render_template('index.html')


    if __name__ == '__main__':
        app.run(host='0.0.0.0')

Клиент:camera.js 

          //--------------------
          // GET USER MEDIA CODE
          //--------------------
              navigator.getUserMedia = ( navigator.getUserMedia ||
                                 navigator.webkitGetUserMedia ||
                                 navigator.mozGetUserMedia ||
                                 navigator.msGetUserMedia);

          var video;
          var webcamStream;

          function startWebcam() {
            if (navigator.getUserMedia) {
               navigator.getUserMedia (

                  // constraints
                  {
                     video: true,
                     audio: false
                  },

                  // successCallback
                  function(localMediaStream) {
                      video = document.querySelector('video');
                     video.src = window.URL.createObjectURL(localMediaStream);
                     webcamStream = localMediaStream;
                  },

                  // errorCallback
                  function(err) {
                     console.log("The following error occured: " + err);
                  }
               );
            } else {
               console.log("getUserMedia not supported");
            }  
          }


          //---------------------
          // TAKE A SNAPSHOT CODE
          //---------------------
          var canvas, ctx;

          function init() {
            // Get the canvas and obtain a context for
            // drawing in it
            canvas = document.getElementById("myCanvas");
            context = canvas.getContext('2d');
          }

          function snapshot() {
             // Draws current image from the video element into the canvas
            context.drawImage(video, 0,0, canvas.width, canvas.height);
            webcamStream.stop();
            var dataURL = canvas.toDataURL('image/jpeg', 1.0);
            document.querySelector('#dl-btn').href = dataURL;

            $.ajax({
              type: "POST",
              contentType: false,
              cache: false,
              processData: false,
              async: false,
              url: "/upload",
              data: { 
                imgBase64: dataURL
              }
            }).done(function(o) {
              console.log('saved'); 
      // If you want the file to be visible in the browser 
      // - please modify the callback in javascript. All you
      // need is to return the url to the file, you just saved 
      // and than put the image in your browser.
    });

          }

index.html 

    <!DOCTYPE html>
    <html>

      <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
      <script src="camera.js"></script> 

      </head>
      <body onload="init();">
        <h1>Take a snapshot of the current video stream</h1>
       Click on the Start WebCam button.
         <p>
        <button onclick="startWebcam();">Start WebCam</button>
        <button type="submit" id="dl-btn" href="#" download="participant.jpeg" onclick="snapshot();">Take Snapshot</button> 
        </p>
        <video onclick="snapshot(this);" width=400 height=400 id="video" controls autoplay></video>
      <p>

            Screenshots : <p>
          <canvas  id="myCanvas" width="400" height="350"></canvas>  
      </body>
    </html>

Другая проблема заключается в том, что я не могу создать пул со снимками, мне нужно отправить видеопоток на сервер для работы скадры там.

Кто-то знает, как я могу отправить видеопоток с веб-камеры в колбу?

tks

...