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.
Related
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.
I'm trying to use Paper.js to build a tool that allows an user to select a region of interest within a video in their browser. This example reflects what I'm trying to accomplish: http://paperjs.org/examples/hit-testing/
Picture the user being able to create a blob around a portion of a youtube video to highlight a person. I then plan to use the coordinates from the points of the blob for some computer vision processing based on the interest of the user.
I think Paper.js is a great tool for this purpose, however, I'm having a hard time embedding a Youtube video inside a canvas element so that I can actually use Paper.js to build the tool. It's been surprisingly hard to find information on how I can accomplish this - this stackoverflow question provides an answer, but the youtube video must be downloaded rather than simply linked through its URL: Youtube video Inside canvas
Am I approaching this task correctly? Can anyone think of a way to accomplish this? Thanks!
I could not figure how to embed the youtube video inside the canvas, but I managed to do exactly what I wanted placing the youtube video behind the Canvas element! It turns out that a canvas is transparent, so all it took was some CSS to accomplish what I wanted. However, this disables the controls of the video, you will need to write some javascript for that to work. The following link explains how to place a video behind a canvas: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html
Suppose my image is not upright (I open it in window browser and the image it not upright), but when I upload it to some server (such as gmail, stackoverflow). The image becomes upright.
I asked this question is that I am writing a preview logic with html5 and javascript. The image that I talk about show what exactly I see in window browser. Just wondering if the server did some trick to adjust the orientation?
Image shown in windows:
Image that directly upload to stack overflow:
I'm guessing you are talking about an image you generate or manipulate client-side using a canvas element that is then rendered back into an img tag. Correct?
Server-side, the orientation can be determined by looking at the image's EXIF orientation flag. It IS possible to examine this flag client-side using a library like jQuery fileExif.
If you use a script like ImageInfo you can fetch EXIF data (if the image has it). If it hasn't you practically can't know why it happened. Might be some "fake" displaying on the computer you are working on. Some image managers might keep duplicates of an originally rotated image.
The EXIF property Orientation might tell you if the image is changed, based on it's dimensions compared to it's orientation.
On Server Side:
You can use a tool like Graphics Magic to auto-orient the image correctly: http://www.graphicsmagick.org/GraphicsMagick.html
gm.exe -convert -auto-orient MyImage.jpg MyImageCorrectOrientation.jpg
How could you programmatically convert a YouTube/Vimeo video into a series of animated images that each reflect 5 seconds of the video? Essentially, the goal is to deconstruct the video into silent, 5-second animated pictures -- think "moving pictures" from Harry Potter.
One option is to slice the video into 5-second video chunks, but the output should feel like animated GIFs ... that is, play instantly, be lighter than combining 150 pictures into one JavaScript slideshow (assuming 30 FPS), but have the image quality of a JPG or PNG. If this is possible with video, then it's an option we're open to exploring.
Another option is to take screen shots of the video, but that is not programmatic.
Ideas?
The output needs to get rendered in HTML5 on Mobile Safari.
You've a bit of a problem here — quality is directly related to file size. So if you create a video of 30fps (higher than regular broadcast TV, really?), you're going to run into issues with it being light & fast loading.
I don't know if I'd go down the route of making actual GIFs if you're looking for a high-ish framerate, but if it's for a web project, HTML5 video tag should be able to have autoplaying video that integrates into the page fairly seemlessly.
What you would want to do here is take a programme like Handbrake, put the video at the highest possible compression settings (lowest quality/framerate) & slowly bring it up until you have something that you think is the minimum you can get away with.
From there, you can look into scripting the process using these settings & something like FFmpeg. You'll probably also want to remove video metadata to save as much filespace as possible.
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.)