使用xmlhttpresponse从客户端向服务器发送视频流

时间:2019-07-07 18:31:50

标签: javascript opencv flask server webrtc

我正在尝试创建面部检测Web应用程序。 该应用程序以这种方式工作。 1-用户导航到网址 2-相机在客户端计算机上启动 3-每帧然后发送到服务器进行人脸检测 然后在网页上显示经过4处理的帧

现在我的问题是,每当我在localhost上执行此操作时,它几乎都是实时运行的,但是当我在AWS上托管它时,响应时间就这么短,视频滞后了那么多,是否有任何原因或原因还有其他方法可以帮助您。

要发送和接收的html页面javascript代码

    video.addEventListener('play', function() {
            var $this = this; //cache

            // loop function to send video frames continuously
            (function oop() {

            // Till the video is playing
            if (!$this.paused && !$this.ended) {


                console.log($this.videoWidth);
                console.log($this.videoHeight);
                // draws the video frames to the canvas created
                context.drawImage($this, 0, 0,200,200);


                // generates the data from the canvas for each frame
                var data = canvas.toDataURL('image/png');
                //sending data using XMLHttpRequest (easy to use)
                var xhr = new XMLHttpRequest();
                // specify the method = POST for sending 
                // url - which will be recieving our data
                xhr.open("POST","http://127.0.0.1:5000/camera", true);
                // transmit the frame to specified url
                xhr.send(data);
                // console.log(value)


                //receving the frames   
                var str = "data:image/jpeg;base64,";
                var request = new XMLHttpRequest();
                request.open('GET','http://127.0.0.1:5000/camera');
                request.responseType = 'text';
                request.onload = function() {   
                    var value = str.concat(request.response);   
                    img.src=value
                    // console.log(value)
                };
                request.send();


                // specify the rate the function will iterate
                setTimeout(oop, 1000 / 30); // drawing at 30fps

            }
            })();

        }, 0);

    }, false);

服务器端代码

    from flask import request, Flask, render_template
    import base64
    import cv2
    import numpy as np
    from PIL import Image
    import io
    from flask_cors import CORS


    app=Flask(__name__)
    CORS(app)       # used for cross origin request handling
    # important -- otherwise we won't be able to send image to webpage

    count=0
    main_source=0

    # index function execute when traffic occur at '/'
    @app.route("/")
    def index():
        return render_template('index.html')


    @app.route('/camera', methods=['POST','GET'])
    def camera():
        if request.method == 'POST':
            # reading the image (byte stream)
            data=request.stream.read()
            # seperating data from the header {data:image/png;....}
            data=str(data).split(',')[1]

            global count
            global main_source
            count+=1

            ''' starting conversion of html-base64 data to cv-numpy array '''
            # decoding base64 data
            img = base64.b64decode(data)
            # generating numpy array from decoded data
            npimg = np.frombuffer(img, dtype=np.uint8)
            # generating 3d array from 1d
            source = cv2.imdecode(npimg, 1)
            ''' conversion finished '''


            ''' applying face detection on captured image '''
            # defining classifier --- haarcascade face classifier                                               
            face_cascade=
            cv2.CascadeClassifier('haarcascade_frontalface_default.xml')
            face_img = source.copy()
            # get faces from the image
            face_rects = face_cascade.detectMultiScale(face_img,scaleFactor=1.2)
            # draw rectangle over each face in image
            for (x,y,w,h) in face_rects: 
                cv2.rectangle(face_img, (x,y), (x+w,y+h), (255,255,255), 10) 
            ''' face detection finished '''


            ''' conversion of image again to base64 for html '''
            face_img = face_img[...,::-1]                               # bgr to rgb
            im = Image.fromarray(face_img.astype("uint8"), mode='RGB')  # using pillow image library
            rawBytes = io.BytesIO()
            im.save(rawBytes, "JPEG")                                   # saving image to buffer
            rawBytes.seek(0)                                            # return to the start of the file
            encoded_string = base64.b64encode(rawBytes.read())          # read from file buffer and convert to base64
            ''' conversion to base64 finished '''


            main_source=encoded_string
            return ""

        else:
            print("return")
            if type(main_source)==int:
                return ""
            return main_source


    if __name__ == "__main__":
        app.run()

提前谢谢。

0 个答案:

没有答案