Search code examples
javascripthtmlcameravideo-capturemobile-browser

html5 mobile capture camera and generate a preview box


How can I capture the camera and start a 'live preview' on a little div on the on the page on mobile?

In the past I encountered some javascript web audio api that can allow you to create sound, manipulate them, start recording audio, buffer etc..

So I hope there is some similar solution also for the video stuff, so I could be able to start capturing video camera and pass data to the preview box on the screen

Here I found a link: http://mobilehtml5.org/ts/?id=23 that shows how to use <input type="file"> to access to mobile built-in microphone and camera, but I'm not sure if I am on the right way..

Any help and suggestion will be really much appreciated


Solution

  • Have you had a look at this html5rocks tutorial, it walks through the Javascript and markup necessary and shows a series of demos including how to apply CSS filters.

    http://www.html5rocks.com/en/tutorials/getusermedia/intro/

    I believe it has all you need.