Show Camera stream in Canvas / Video using Phonegap

Question

For Phonegap (Android), we are currently investigating the possibility to set the stream of the camera of an Android device as the source of a video element. A bit in the lines of gUM on webbrowsers.

We would like to build a video chat app with Phonegap.

The documentation only shows functions that call the native camera application, which is not what we are looking for.

Is showing the stream of the camera of an Android mobile device inside a HTML element with Phonegap possible?

Answer 1

Plugin name : phonegap-plugin-media-stream.

Use this plugin and add video tag in HTML and use JS code. It works for me.

HTML : video tag

JS :

var constraints = navigator.mediaDevices.getSupportedConstraints();
alert(constraints);

navigator.mediaDevices.getUserMedia({
    'video': {
        'facingMode': 'environment'
    }
}).then(function(mediaStream) {
    var mediaControl = document.querySelector('video');
    mediaControl.srcObject = mediaStream;
    mediaControl.src = URL.createObjectURL(mediaStream);
});

Answer 2

Did you have a look at getUserMedia https://developer.mozilla.org/en-US/docs/NavigatorUserMedia.getUserMedia

and https://github.com/HenrikJoreteg/getUserMedia