How to start back camera using webkitGetUserMedia

Question

I am trying to open a back video camera in old phone(android version 5.0). As these old device not supported navigator.mediaDevices && navigator.mediaDevices.getUserMedia so i am dependent only on webkitGetUserMedia. I have a success to open up a camera and show video but it is only using front camera and i need a back camera video. Here is my code

if(navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia({video: true}, function(stream){
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }, errBack);

I don't find any documentation related to this. Is there any way to open up back camera using webkitGetUserMedia? Secondly As i am using in cordova based application and by default Cordova use default system webview(Have option to use crosswalk but dont want to mix up it with cordova based app) is there any possibility to integrate any other webview to achieve this(getUserMedia etc) ?

Answer 1

You need to change the facing mode

{ audio: true, video: { facingMode: "user" } }

or

{ audio: true, video: { facingMode: { exact: "environment" } } }

Answer 2

First of all I highly recommend using the AdapterJS which shims all the differences through all the different browser implementations (good blog on this topic from Tsahi).

Secondly you are using the deprecated GUM-API, which I wouldn't recommend. I found an issue on a GitHub project which is exactly your issue, maybe this will help you.

Stated within the issue:

The navigator.getUserMedia function is deprecated and you should instead use the newer MediaDevices.getUserMedia function. The link for the docs.

So if you applied these changes the GUM should accept the

{ audio: true, video: { facingMode: { exact: "environment" } } }

constraints (which the first answer stated correctly) which should give you the video stream of the back-camera of your phone.

Answer 3

you might want to take inspiration from how adapter.js shims facingMode in old versions: https://github.com/webrtcHacks/adapter/blob/master/src/js/chrome/getusermedia.js

Basically it attempts to use navigator.mediaDevices.enumerateDevices (you might have to resort to the earlier MediaStreamTrack.getSources() function) to enumerate devices and then attempts to guess which one is the back camera, passing the deviceId to getUserMedia. Be careful with this as your old version might have different constraint names (refer to the constraintsToChrome_ function) for the deviceId and documentation for this is very sparse.