Fabric.js and <Video> - html

I want to draw shapes with by using fabric.js on a video element. I am quite new to JavaScrpit, jQuery & fabric.js.
I would be grateful if someone can give me some assistance whether this is possible. Some sample lines would be very helpful.
Drawing on an image (png) has been no issue as fabric.js offers this out of the box. However with video element I am not finding the expected result.

If you want to draw shape on video, You must be define fabric canvas on video.
when you are define of fabric canvas, you put canvas using CSS on video.
Then you are drawing on canvas to fabric.

Related

Overlaying boxes on top of a playing <video>

We're building a tool where we have a video playing in browser, and for each frame of that video, we want to draw object detection boxes on top of the video (essentially just a boundary around objects detected in each frame).
The boxes have been previously generated offline, and the vertex information for each box stored along with frame number. We're looking to pass the vertices up to the browser and have the browser render them over the video. We're looking to avoid encoding the boxes in the video itself.
What's the best html approach to solve this problem?

How to render movie in phaser Canvas background?

This seems to work:
http://html5doctor.com/demos/video-canvas-magic/demo1.html
But how can I put the movie into phaser context to play it in the background?
Phaser supports rendering videos. You can find an example on the phaser examples site.
Create a pixi.textures.VideoTexture and apply the texture to a sprite object.

HTML5 Canvas overlay for Flash

Basically, I am trying to create an HTML5 canvas to overlay an embedded 3rd party flash application. I cannot set the flash's wmode as I have no control over the flash itself, I was wondering if it was possible to work around this, and position a canvas (or anything for that matter) visibly in front of the flash element.
I understand that this is probably not possible, but I would appreciate any feedback, even if it's just telling me that what I'm asking is impossible.

How do they draw vectorized lines on web pages?

Projects such as google docs and yandex maps http://maps.yandex.ru/-/CFsgzMjN allow visitors to draw geometric figures on web pages. How did they do this without HTML5?
Is this always SVG?
They're using the canvas, look at the .ymaps-overlay-transition-container, it have the canvas tag inside it.
This may be either SVG, or just drawing using the canvas. The doctype of a document need not be html5 for these features to work.

Html5 video overlay architecture

I want to create a html5 page with video and an image overlay - meaning some image that is showing over the video. This overlay will in time also be text in some cases. Is there any good way to achieve this?
What I've been trying this far is to use a <video> tag to hold the video, and draw the image into a canvas, which I place on top of the video. To show it I need to move the video back setting z-index to -1, but then the video controls won't work. Maybe there's a solution to make the controls work again, but I'm not sure if I'm on the right path here.. I am assuming there is a recommended solution to this. Maybe using a canvas which I fill both video and overlay into. Or something completely different?
Note: I edited the question as it originally pointed in the wrong direction regarding what was important here. I'd love to have a solution which makes this work seamlessly in fullscreen and everything, but the focus is: What is the appropriate way to place items on top of video - in html5?
Achieving what you want and have it supported in out-of-the-box fullscreen is problematic. Fullscreen support in html5 video is only optional and in any way not accesible thorugh the API (See discussion here).
Even if you used the built in fullscreen there is no way you could inject content above it unless you are willing to change the video file itself on the server in runtime.
what you can do however (And what I did in a similar case) is to implement your own video controls, run the video tag without the built in controls, and have fun with overlaying as many layers as you want on top of your now out of focus video.
As for fullscreen, you can implement some sort of custom background fullscreen similar to what's been done here
edit: The problem you're having by placing a canvas over the video is blocking the built in html video controls. My suggestion is to implement your own video controls (play, pause, volume, seeker, etc.) using html and javascript calling the video API. You can probably even make it prettier then the ugly built in controls.
Your controls can be contained in a layer above the overlaid canvas, and thus the video will be shown, above it the overlay and above it your control set.
You can read a little about implementing your own controls here or here
And anyway this can easily be much better than this.