how to display live stream in fabric canvas flask

I want to display the live stream in the canvas it not working. My canvas display a static image, but I can zoom-in this image. When I change live stream into the background of the canvas it work, but I can't zoom-in the background. I want to display live stream and zoom-in it. Pls help me.

my python code:

def camera_streaming():
    path = 'D:/myfile/static/display/'
    t = 60/100
    while True:
        for r, d, f in os.walk(path):
            for file in f:
                image_paht = os.path.join(path, file)
                #print(image_paht)
                frame = open(image_paht, 'rb').read()
                yield(b'--frame\r\n'
                    b'Content-Type: image/jpeg\r\n\r\n'+ frame + b'\r\n')
                time.sleep(t)

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

html

<style>
  div.canvas-container{
    max-width: 640px;
    max-height: 480px;
    overflow: hidden;
    /*border: 1px solid red;*/
}
/* #c{
       background-image: url("{{ url_for('video_feed') }}"); 
    } */

    </style>

<button id="btnZoomIn">ZoomIn</button>
<canvas id="c" width="640" height="480"></canvas>

<script>
var src = "{{ url_for('video_feed') }}";
var SCALE_FACTOR = 1.3;
var canvasHeight = 480;
var canvasWidth = 640;


// canvas
var canvas = new fabric.Canvas('c');

var getFabricCanvases = (function () {
    var fabricCanvasCollection;
    return function getCanvases() {
        if (!fabricCanvasCollection) {
            fabricCanvasCollection = [];
            var fabricCanvas = $('.canvas-container canvas');
            fabricCanvas.each(function(index, item) {
                fabricCanvasCollection.push($(item));
            });
        }
        return fabricCanvasCollection;
    }
})();

fabric.Image.fromURL(src, function(img) {
        image = img;
        image.set("selectable", false);
        image.set("evented", false);
        canvas.add(image);
        canvas.renderAll();
      });

// button Zoom In
$("#btnZoomIn").click(function(){
    zoomIn();
});

function zoomIn() {
    if(canvas.getZoom().toFixed(5) > zoomMax){
        console.log("zoomIn: Error: cannot zoom-in anymore");
        return;
    }

    canvas.setZoom(canvas.getZoom()*SCALE_FACTOR);
    canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
    canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);
    canvas.renderAll();
}
</script>