[SOLVED] How to load video by using canvas.loadFromJSON in fabricJS

How to load video by using canvas.loadFromJSON in fabricJS

I'm trying to set video as background on canvas, when I set it for the first time it works fine. but while reloading it by using loadFromJSON() it is showing blank background on canvas.

I'm using angular 6 .

here is the snippet

(note: here I have used simple class. while in my code I'm using number of custom classes)

var removeFromArray = fabric.util.removeFromArray;
var custom_attributes = ['customSourceType', 'id', 'scaleMode', 'original_src', 'exclusiveName', 'video_src', 'background_image'];

fabric.Object.prototype.toObject = (function (toObject) {
    return function (propertiesToInclude) {
        propertiesToInclude = (propertiesToInclude || []).concat(
            ['video_src', 'background_image', 'src']
        );
        return toObject.apply(this, [propertiesToInclude]);
    };
})(fabric.Object.prototype.toObject);


fabric.Object.NUM_FRACTION_DIGITS = 2;
fabric.Object.prototype.set({
    borderColor: '#00c3f9',
    cornerColor: '#00c3f9',
    cornerStrokeColor: '#ffffff',
    cornerStyle: 'circle',
    minScaleLimit: 0,
    lockScalingFlip: true,
    selectionDashArray: [5, 0],
    borderDashArray: [5, 5],
    cornerDashArray: [2, 0],
    borderScaleFactor: 1,
    cornerSize: 15,
    transparentCorners: false,
    centeredRotation: true
});


var canvas = new fabric.Canvas('c', {
    hoverCursor: 'pointer',
    selection: true,
    selectionBorderColor: '#00c3f9',
    selectionColor: 'rgba(0, 195, 249, 0.2)',
    preserveObjectStacking: true,
    originX: 'center',
    originY: 'center',
});
var url_mp4 = 'http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4';

function getVideoElement(url) {
    var videoE = document.createElement('video');
    videoE.width = 400;
    videoE.height = 250;
    videoE.muted = true;
    videoE.crossOrigin = "anonymous";
    var source = document.createElement('source');
    source.src = url;
    source.type = 'video/mp4';
    videoE.appendChild(source);
    return videoE;
}

var videoE = getVideoElement(url_mp4);
var fab_video = new fabric.Image(videoE, {left: 0,   top: 0});
    fab_video.set('video_src', url_mp4);
    fab_video.set('background_image', url_mp4);

fab_video.set('video_src', url_mp4);
canvas.setBackgroundImage(fab_video);
fab_video.getElement().volume = 0;
fab_video.getElement().play();
fabric.util.requestAnimFrame(function render() {
    canvas.renderAll();
    fabric.util.requestAnimFrame(render);
});




var data = canvas.toJSON(custom_attributes);

$(document.body).on('click', '#loadfromjson' ,function(){
console.clear();
var json = canvas.toJSON(custom_attributes);
    canvas.loadFromJSON(json, canvasLoaded);
});


function canvasLoaded() {
   var jsonDATA = canvas.toJSON(custom_attributes);
   canvas.renderAll.bind(canvas);
   var canvasBG = jsonDATA['backgroundImage'];
   console.log(canvasBG);
      if(canvasBG.hasOwnProperty('video_src')) {
         var url_mp4 = 'http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4';
        var videoE = this.getVideoElement(url_mp4, 480, 620);
        fab_video = new fabric.Image(videoE, {
            left: 0,
            top: 0,
            height: 480,
            width: 620,
            objectCaching: false,
            excludeFromExport: false
        });
        
        fab_video.toObject = (function (toObject) {
            return function () {
                return fabric.util.object.extend(toObject.call(this), { 'video_src': url_mp4, 'background_image': url_mp4 });
            };
        })(fab_video.toObject);
        canvas.setBackgroundImage(fab_video, function () {
            canvas.renderAll.bind(canvas);
        }, {
                height: 480,
                width: 620,
                crossOrigin: 'anonymous',
                background_image: url_mp4,
                isFromServer: true,
                video_src: url_mp4
            });
        fab_video.getElement().volume = 0;
        fab_video.getElement().play();
        fabric.util.requestAnimFrame(function render() {
            canvas.renderAll();
            fabric.util.requestAnimFrame(render);
        });
      }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js?v1"></script>
<button id="loadfromjson">Load from JSON</button>
<canvas id="c" width="600" height="400"></canvas>

Solution

Got it worked from here, thanks to this blog.

I have updated the working snippet in the question for other who are facing the same issue.