Fabricjs - 通过 loadFromJSON 在 FabricJs 中预览视频答案

【问题标题】：Fabricjs - Preview Video in FabricJs via loadFromJSONFabricjs - 通过 loadFromJSON 在 FabricJs 中预览视频
【发布时间】：2020-09-21 02:27:55
【问题描述】：

我正在尝试使用 loadFromJSON 在 Fabricjs 画布上加载视频。首先，我将视频添加到 JSON，然后将该 JSON 加载到同一画布以使其再次播放。（这不是最终目标，而是为了提问，以便你们可以重现问题）但不幸的是，即使在尝试了大多数可能的解决方案之后，我也无法做到这一点。

我遵循了这个指南

https://itnext.io/video-element-serialization-and-deserialization-of-canvas-fc5dbf47666d

使它像另一个stackoverflow答案中给出的那样工作，但看起来它已经过时了。我收到此错误

下面我附上我的代码。请看一下。

HTML 代码

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="vendors/Bootstrap/bootstrap.min.css">
    </head>
    <body>
        <canvas id="c" width="1280" height="720"></canvas>

        <!--Javascripts-->
        <script src="vendors/jQuery/jquery-3.4.1.slim.min.js"></script>
        <script src="vendors/Bootstrap/bootstrap.min.js"></script>
        <script src="vendors/Bootstrap/popper.min.js"></script>
        <script src="vendors/FabricJs/fabric.js"></script>
        <script src="js/script.js"></script>
    </body>
</html>

来自 script.js 的 JavaScript 代码

window.cancelRequestAnimFrame = (function() {
    return  window.cancelAnimationFrame ||
            window.webkitCancelRequestAnimationFrame ||
            window.mozCancelRequestAnimationFrame ||
            window.oCancelRequestAnimationFrame ||
            window.msCancelRequestAnimationFrame ||
            clearTimeout
})();
var data = "";
function getVideoElement(url) {
    var videoE = document.createElement('video');
    videoE.width = 530;
    videoE.height = 298;
    videoE.muted = true;
    videoE.crossOrigin = "anonymous";
    var source = document.createElement('source');
    source.src = url;
    source.type = 'video/mp4';
    videoE.appendChild(source);
    return videoE;
}
var canvas = new fabric.Canvas('c');
var url_mp4 = 'https://player.vimeo.com/external/197634410.sd.mp4?s=0d1deba61e621a45218d6488e384219dc7173ae5&profile_id=164';

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

var render_request;
var render = function render() {
    canvas.renderAll();
    render_request = fabric.util.requestAnimFrame(render);
    fab_video.getElement().onended = function() {
        cancelRequestAnimFrame(render_request);
        alert("finished");
        data = canvas.toJSON();
        console.log(data);
        canvas = canvas.loadFromJSON(JSON.stringify(data), canvasLoaded, function(o, object) {
            fabric.log(o, object);
        });

    };
}
fabric.util.requestAnimFrame(render);

function canvasLoaded() {
    canvas.renderAll.bind(canvas);
    var objs = data['objects'];
    for (var i = 0; i < objs.length; i++) {
        if (objs[i].hasOwnProperty('video_src')) {
            var videoE = getVideoElement(objs[i]['video_src']);
            var fab_video = new fabric.Image(videoE, {left: objs[i]['left'], top: objs[i]['top']});
            canvas.add(fab_video);
            fab_video.getElement().play();
            fabric.util.requestAnimFrame(function render() {
                canvas.renderAll();
                fabric.util.requestAnimFrame(render);
            });
        }
    }
}

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

如果有人能说出我做错了什么，那将是非常有帮助的，因为我总有一天会被这个问题困扰。

【问题讨论】：

尝试将width/height添加到织物图像对象var fab_video = new fabric.Image(videoE, {left: 0, top: 0, width: 530, height: 298});

标签： javascript html5-canvas html5-video fabricjs

【解决方案1】：

不确定它是否已为您解决。但是当我按照指南操作时，同样的问题发生在我身上：

https://itnext.io/video-element-serialization-and-deserialization-of-canvas-fc5dbf47666d

我认为问题的发生是因为我们试图将视频加载为 src 为 '' 的图像，这会导致上述错误（当它尝试读取属性 naturalWidth 时）。就我而言，只需升级到更高版本的结构即可解决问题。

【讨论】：