Question

概述

使用getUserMedia API在Flask上运行的HTML5页面可访问用户/我的网络摄像头。（完成）
getUserMedia API视频中的每一帧都是使用Javascript画布绘制的。（完成）
每个帧都将作为base64发送到烧瓶服务器。
然后每个帧都将从烧瓶服务器发送到python文件，在该文件中解码图像。
将使用OpenCV处理帧。

我使用flask_socketio和Javascript websockets。我是Javascript和Websockets的新手，如果解决方案很明显，请道歉。我认为帧正被发送到烧瓶服务器（HTTP / 1.1＆＃34; 200）。如果他们被送去;每隔约25秒发送一次，但我想立即发送每一帧。

非常感谢任何帮助。

HTML + JavaScript

<!DOCTYPE html>
<html>
  <head>
  </head>

      <script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
    <script type="text/javascript" charset="utf-8"></script>

  <body onload="init();">
    <h1></h1>

     <p>
    <button onclick="startWebcam();">Start WebCam</button>
    <button onclick="stopWebcam();">Stop WebCam</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>
  <script type="text/javascript">




        //--------------------
      // 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");
        }  
      }

      function stopWebcam() {
        webcamStream.stop();
      }
      //---------------------
      // TAKE A SNAPSHOT CODE
      //---------------------
      var canvas, ctx;

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



      namespace = '/test';
            // Connect to the Socket.IO server.
            // The connection URL has the following format:
            //     http[s]://<domain>:<port>[/<namespace>]
      var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
      timer = setInterval(
        function snapshot() {
         // Draws current image from the video element into the canvas
            ctx.drawImage(video, 0,0, canvas.width, canvas.height);
            var frame = canvas.toDataURL("image/png");
            console.log(frame.substring(0, 50));
      }, 1000);

            // Event handler for new connections.
            // The callback function is invoked when a connection with the
            // server is established.
        socket.on('frame', function(data) {
            socket.emit('frame', frame);
        });   


  </script>
</html>

Flask服务器（已更新）

async_mode = "eventlet"
from eventlet import wsgi, websocket
import eventlet
eventlet.monkey_patch()
from flask import Flask, render_template, session, request
from flask_socketio import SocketIO, emit, disconnect
import base64

app = Flask(__name__)
socketio = SocketIO(app)

@app.route('/')
def cam():
    return render_template("liveweb1.html", async_mode=socketio.async_mode)

@socketio.on('frame', namespace='/test')
def user_video(frame):
    feed = frame
    print (str(feed))


if __name__ == '__main__':
    eventlet.wsgi.server(eventlet.wrap_ssl(eventlet.listen(('', 8000)),
                              certfile='cert.crt',
                              keyfile='private.key',
                              server_side=True),
            app)

Flask server screenshot

Eventlet server

使用JavaScript Websockets将图像发送到Flask服务器

0 个答案: