Холст - видео поток к объекту изображения - PullRequest
Новая
       16

Холст - видео поток к объекту изображения

0 голосов
/ 18 июня 2019

Я использую FabricJS, чтобы упростить обработку с Canvas, но для ВАС, который может не понимать FabricJS, вы, вероятно, все же можете дать мне некоторое представление.

Я пытаюсь включить поток видео на холсте из тега <video> (не скрыт для целей тестирования, и поток ДОЛЖЕН отображаться) , и поэтому у меня может быть кнопка, чтобы сделать «снимок» текущего кадра при его нажатии.

Проблема заключается в том, что он выдает странную ошибку, которая НЕ ДОЛЖНА быть выброшена, и если ошибка не появляется, все равно ничего не отображается.Это ошибка:

Строка объекта json - это журнал объекта изображения, который должен показывать видеопоток.Как вы можете видеть, он имеет действительную ширину, высоту и масштаб.enter image description here

на данный момент это мой 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));
...