Video Element - serialization and deserialization of canvas, issue in loading

[monalisasaha79]

Hi, First of all Thank you very much for the awesome product. I have managed to play the video using the demo http://fabricjs.com/video-element Then I store the canvas using following command: this.project.frames[this.project.seek] = this.canvas.toObject(); this.storage.set(this.project.id, JSON.stringify(this.project)); Works Fine. No issue at all.

When I am loading the canvas from the JSON this.canvas.loadFromDatalessJSON(this.project.frames[eligibleFrame], this.canvas.renderAll.bind(this.canvas));

or

this.canvas.loadFromJSON(this.project.frames[eligibleFrame], this.canvas.renderAll.bind(this.canvas));

I am getting an error: Error loading file:///storage/20170113_122957.mp4

Deserialization works without the video element.

Is there any workaround to store the video element frame and the after load set the actual video element, like below?

if (object.get('type') == "image"){ object.setElement(this.player.nativeElement); this.canvas.renderAll(); object.setCoords(); }

Need help.

Thanks, Monalisa

[asturur]

There is no official way as of now since the VideoElement is not supported on restoring. I think this can be done, it will not work on node, no idea if it will work on ie10

[Charl0tter]

I have the same problem,Deserialization works without the video element.

[Charl0tter]

I am now very urgent demand for this feature, there is no way to achieve it,Is there any way to achieve it

[monalisasaha79]

For the time being, I have achieved it like below.

for (let object of objects){ if (object.subtype == "video"){ delete object.src; this.canvas.add(new fabric.Image(this.player.nativeElement, object)); } if (object.subtype == "frame") this.canvas.add (new fabric.Rect(object)); if (object.subtype == "circle") this.canvas.add (new fabric.Circle(object)); if (object.subtype == "rect") this.canvas.add (new fabric.Rect(object)); if (object.subtype == "triangle") this.canvas.add (new fabric.Triangle(object)); if (object.subtype == "drawing") this.canvas.add (new fabric.Path(object.path, object)); if (object.subtype == "text") this.canvas.add (new fabric.Text(object.text, object)); }

Will wait for the release.

[jamesdeantv]

Maybe this solution I found on SO will work for you:

https://stackoverflow.com/questions/34670680/fabricjs-cant-load-video-by-using-canvas-loadfromjson

When originally loading the Video through the Image class you need to call..

fabric.util.requestAnimFrame(function render() { canvas.renderAll(); fabric.util.requestAnimFrame(render); });

...in order for it to render it as a video. I think that when the JSON is being load it is still treating it as an image file and not calling that said function. If there was a way to identify the type as video and not image then add this function to an if(type = video) statement then it could possibly work.

[satendra02]

A work around to serialize and deserialize video Element using fabric

https://medium.com/@satendra02/video-element-serialization-and-deserialization-of-canvas-fc5dbf47666d

[jmc42514]

Hi, Why i cant display the video inside the canvas?

Here's my code

$(".fadeInUp a").click(function() { $(".fadeInUp .selected").removeClass('selected'); $(this).addClass('selected'); tool = $(this).attr('data-tool');

if (tool == 'video'){ video = new Video(canvas) } }); var Video = (function() { var rex = /[a-zA-Z0-9-_]{11}/, videoUrl = $('#input-url').val() === '' ? alert('Enter a valid Url'):$('#input-url').val(), videoId = videoUrl.match(rex), jsonUrl = 'http://gdata.youtube.com/feeds/api/videos/' + videoId + '?v=2&alt=json', embedUrl = '//www.youtube.com/embed/' + videoId, embedCode = ''

//Get Views from JSON $.getJSON(jsonUrl, function (videoData) { var videoJson = JSON.stringify(videoData), vidJson = JSON.parse(videoJson), views = vidJson.entry.yt$statistics.viewCount; $('.views').text(views); }); //Embed Video $("#videoembed").html(embedCode); });

[umeshpatadiya]

Also I'm having the same issue, I'm setting the video as background of canvas. it works for the first time when I add it. but while reloading the canvas from JSON, the background video doesn't rendering on canvas. please provide me some suggestions.