We Keep Coding

Is it possible to record a video of the contents of an HTML element?

So I want to use javascript and css to create an animated video of maps. I imagined to do some animations using leaflet etc and use some javascript to record a video of it.
However so far I found that video recording is only possible for the entire screen or a canvas according to MDN (https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element) and Google documentation (https://developers.google.com/web/updates/2016/10/capture-stream)
I tried to render leaflet js onto a canvas, but I could not find any way to do so.
So is there a way to create an animated video using javascript? Either by rendering leaflet onto a canvas or by recording the content of a element?

You can use RecordRTC to record a canvas element.
If you already have a canvas that has animations in it, it is very simple to use RecordRTC to record that canvas element.
If you don't have a canvas element and you need to record an HTML element, you would first need to place a hidden canvas on the screen and draw on it your HTML content using window.requestAnimationFrame(). Then you can use RecordRTC to record that canvas element.
You can use RecordRTC's CanvasRecorder to record just the canvas.
But if you want to do other things like record the user's microphone or browser tab's audio alongside your recording your canvas, you can canvas.captureStream() and use the RecordRTC's MediaStreamRecorder to record.
In both the aforementioned cases, you will get a video file as the result.
A full example demo can be found here -> https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/Canvas-Animation-Recording-Plus-Microphone.html
The source code for that demo can be found here -> https://github.com/muaz-khan/RecordRTC/blob/master/Canvas-Recording/Canvas-Animation-Recording-Plus-Microphone.html
All credits go to Muaz Khan for maintaining such an awesome project alongside many other equally awesome webRTC projects.
NOTE: Rendering HTML element to canvas can be CPU intensive.

Send flash video stream to JavaScript

I want to make a script that will help user to center his face in the capture preview. Some <div> that would keep his outline green if the face is kept in a defined area and red if the face goes out.
For capture, I use Webcam.js a library with Flash fail-back.
For tracking, I'm using Tracking.JS that can handle object detection from a video element.
The goal is to make a real time face positioning plugin.
Different preview modes of Webcam.js :
The HTML5 preview :
A video element created by WEBCAM.JS that has for src attribute the video stream of getUserMedia function. (The video is nice handled by TRACKING.JS)
The Flash preview (IE Fail-back):
A .swf object (webcam.swf) whos prompts access of camera, displays the preview -IN THE FLASH MOTOR- and when the user snaps, it send back the picture to Javascript.
HERE IS MY PROBLEM:
Is there a way to build/edit swf file to make it send the video stream to javascript ? (Instead of only the picture when the snap is fired) The goal is to TRACKING.JS as well the HTML5 stream than the flash one in case of.
Webcam.swf > Here is Github directory of Actionscript files.
Thank you.

Attach an image to a moving element in a video using canvas

How can I create a video using HTML5 canvas where I can attach a persons face on a moving element in a video using chroma key. So that the face moves along with that element.
Came across this website JibJab which makes use of this.
Just want to know how this can be done using HTML5 canvas.
As per my research we can place a video on a video or even a static image (http://www.xindustry.com/html5greenscreen/). But how to move a static image is what I'm looking for.
Also found this solution but it will create transparent element in the video and not attach an image to it.

Record D3.js whiteboard animation as mp4 audio and video

I have a whiteboard/hand sketching app written with D3.js svg path elements. These elements are grouped into scenes with their own mp3 audio.
Multiple scenes with their animated svg paths are played according to a timeline, with the audio running perfectly.
So the end result is like a whiteboard animated movie. This works well within the app. How can i record the whole animation as a mp4 file?
I would like to run this entirely on the client side. I have looked at ffmpeg but prefer not to do a desktop install for this web app.
I looked into using chrome tab extension but it only works on chrome browser.
What other options do I have?

Javascript -> webcam -> SVG

Is there anyway to use the input from my laptop's cam using either
https://github.com/taboca/CamCanvas-API-
or the jquery webcam plugin
and then use the actual webcam image to produce an SVG image?
I'm doing an art show in a few weeks and want the camera to be the source
for some SVG animations, so that the audience has some form of interaction
with the piece. I know that both CamCanvas Jquery Webcam output in SWF i.e. flash
but can the flash file displaying the webcam be accessed from javascript and then used in
a graphic library like raphael or would I have to write everything in flash?
Is it possible to use the html 5 video tag and access the webcam on my laptop?
Further, could I just stream my camera using VLC in OGG and then the OGG stream as the input for my SVG animation?

SVG is used for vector graphics. So "webcam" and "SVG" don't fit together very well.
I don't think <video> can access devices - so you probably go better with Flash.

No, you can't use the <video> tag to access a webcam – right now.
In the future (long-term), you'll be able to use the <device> tag, but no browser supports it yet.
However, you might be able to hack together a stream to a <video> tag using VLC, since it sounds like this is something you'll be running only on a machine you control. (Also take a look at this guy's second post on taking an image from video and manipulating it on a <canvas>. There's a demo that just blew my mind.)