How one would get live, video frames from a device camera in PhoneGap

Question

So, I am prototyping an application that is similar to the popular app SnapChat . If you are familiar with the app, a large part of it's user interface consists of a live video feed from the camera. This is not in an operating system video capture window, no, this has the video, with UI elements overlayed upon it.

I can't code in native to save my life, so I develop my apps in PhoneGap. Unfortunately, after all the usual Googling, I still haven't found an answer. I am looking for a way to capture video frames and render them in the DOM, live, from the device camera.

I couldn't find a plugin for this, is it capable with the PhoneGap APIs?

Answer 1

You can use HTML Media Capture for the following devices

Android 3.0 browser
Chrome for Android (0.16)
Firefox Mobile
10.0 iOS6 Safari and Chrome (partial support)

From my naive glancing it looks like it kicks the user over to the native device video capturerer and returns the video once the user is done. It looks like you can't use custom overlays in the video capture UI.

For better control you can use WebRTC which is supported by the following devices

Chrome 21
Android 4.4
Opera 18
Firefox 17

http://caniuse.com/#feat=stream

With this you can embed the capture area within the DOM and mess with it as you see fit. http://www.html5rocks.com/en/tutorials/getusermedia/intro/

I just tried out this demo mentioned on the html5rocks page on my galaxy note 3 and both the front and back camera worked