未捕获的类型错误：无法读取 null 的属性“naturalWidth” - FabricJs - 通过 loadFromJSON 在 Fabric.js 中预览视频

Question

There is one issue I am facing while trying to preview video on a fabric.js canvas.

FabricJS Version Tried: 4.0.0-beta.8 And 3.6.3 same error in both

It gives error saying

Uncaught TypeError: Cannot read property 'naturalWidth' of null                          :fabric.js:20490

Code for how I am adding video to canvas:

let objects = slideData.getObjects();
for (var i = 0; i < objects.length; i++) {
    if (objects[i].hasOwnProperty('videoUrl')) {
        var videoElement = createVideoElement(objects[i]['videoUrl']); //this function returns a video element
        var video = new fabric.Image(videoElement, {left: objects[i]['left'], top: objects[i]['top'], isBackgroundVideo: true});
        slideData.add(video);//adding video to canvas.
        video.sendBackwards();//setting video to be on the back so I can show text in front of it
        console.log(slideData);
    }
}

Code for how I am trying to preview video on canvas:

let jsonData = JSON.stringify(slideData.toObject(propertiesToSave)); //this is an array of properties which we want to save which includes isBackgroundVideo: true
slideData.loadFromJSON(jsonData, slideData.renderAll.bind(slideData), function(o, object) { //loading saved canvas data from JSON
    object.set('selectable', false);
    object.set('cursorHover', 'default');
    let objects = slideData.getObjects();
    for (var i = 0; i < objects.length; i++) {
        if (objects[i].hasOwnProperty('isBackgroundVideo')) {
            objects[i].getElement().play();
            fabric.util.requestAnimFrame(function render() {
                slideData.renderAll();
                fabric.util.requestAnimFrame(render);
            });
        }
    }
});

But when i execute this code then fabric.js gives error.

Uncaught TypeError: Cannot read property 'naturalWidth' of null                          :fabric.js:20490

I tried most solutions but it just does not work. I am not sure what is wrong here. If I am doing something wrong or this is just a bug in fabric.js

If you guys need more code then I can provide just comment what you need. Thanks

Answer 1

Pay atention to the statement slideData.renderAll.bind(slideData) .

Is it possible that you dispose slideData canvas somewhere else in your code?

After the disposal slideData.contextContainer becomes null .

And there's a reference to slideData.contextContainer.naturalWidth inside some internal fabric.js function (I don't know exactly, you can find function name in the error stack trace in web console. let's assume slideData.renderAll ). It explains why do you get Cannot read property 'naturalWidth' of null error.

The fix depends on your situation. For example, add a check slideData.contextContainer !== null or change the execution flow to call slideData.dispose() in a different place.