画布-视频流到图像对象

Question

我正在使用FabricJS来简化使用Canvas的处理，但是对于那些可能不了解FabricJS的人来说，您可能仍然可以给我一些见识。

我正在尝试从<video>标签启用视频流到画布（出于测试目的未隐藏，并且流确实显示），所以我可以使用一个按钮当前帧的“快照”。

问题是它引发了一个奇怪的错误，该错误不应抛出，并且如果错误没有出现，则仍然没有任何显示。这是错误：

json对象字符串是应该显示视频流的图像对象的日志。如您所见，它具有有效的宽度，高度和比例。

这是我目前的html代码（使用Vue，但实际上并没有影响我手头的问题）

<video muted="true" volume="0" autoplay="true" id="snapshot_stream"></video>
<canvas id="voxicard_front" width="500" height="618"></canvas>

将流添加到画布的代码：

setup_stream : function(){
            navigator.mediaDevices.getUserMedia({
                video: true,
            }).then(async function(stream) {
                if(this.image_box)
                    this.front_canvas.remove(this.image_box);

                this.recorder = RecordRTC(stream, {
                    type: 'video',
                });
                document.getElementById('snapshot_stream').srcObject = stream;
                document.getElementById('snapshot_stream').onloadeddata = function(){
                    this.video_box = new fabric.Image(document.getElementById('snapshot_stream'), {
                        left: 0,
                        top: 0,
                        width: 100,
                        height: 100,
                        scaleX: 0.5,
                        scaleY: 0.5, 
                    });
                    console.log(JSON.stringify(this.video_box));
                    this.front_canvas.add(this.video_box);
                    console.log("LOADED");
                }.bind(this);


                fabric.util.requestAnimFrame(function render() {
                //    this.front_canvas.renderAll(); <------------------ HERE
                      fabric.util.requestAnimFrame(render);
                }.bind(this));
            }.bind(this)).catch(function (err) {
                console.log(err);
                this.video_failed = true;
            }.bind(this));

这也是我对画布的初始化

this.front_canvas = new fabric.Canvas("voxicard_front");

        var background = fabric.Image.fromURL(document.getElementById('ref_front').src, function(img){
            img.originX = "left";
            img.originY = "top";
            img.left = 10;
            img.top = 10;
            img.setShadow({
                color: 'gray',
                blur: 8,
                offsetX: 0,
                offsetY: 0,
                opacity: 0.1,
            });

            this.front_canvas.setBackgroundImage(img, this.front_canvas.renderAll.bind(this.front_canvas), {
                scaleX: 0.7,
                scaleY: 0.7,
            });
        }.bind(this));