1

I want to get the video stream of my rear camera in an Ionic Application. For this, I use getUserMedia that work correctly for the front camera.

When I change the facing mode to 'environment' I got this error :

Unknown constraint named facingMode rejected ConstraintNotSatisfiedError

In my Ionic application I have already installed the npm package "webrtc-adapter".

Here is my code to get the stream from the rear camera :

this.constraints = { audio: true, video: {mandatory: { facingMode: 'environment'}}};
        cordova.plugins.diagnostic.requestRuntimePermission( (status) => {
            if (cordova.plugins.diagnostic.permissionStatus.GRANTED){

                navigator.getUserMedia(this.constraints, (stream) => {
                    let video = <HTMLVideoElement>document.getElementById('localVideo');
                    video.srcObject =  stream;
                }, function(err){
                    console.log("Error get stream: ", err.name);
                });
            }
        }, (error) => {
            console.error("Error during runtime permission :", error);
        }, cordova.plugins.diagnostic.permission.CAMERA);

I think that is a compatibility issue. Anyone can help me ?

Thank you.

Damien LD
  • 53
  • 1
  • 13

1 Answers1

3

You're using an outdated non-standard constraints syntax. adapter.js polyfills the spec, so to benefit from it you have to follow the spec. E.g. instead of:

{audio: true, video: {mandatory: {facingMode: 'environment'}}};

use

{audio: true, video: {facingMode: {exact: 'environment'}}};

I already have an answer with a working example of this. It should work with Chrome. Not sure if this will work with ionic or not. Let me know if it doesn't work.

Community
  • 1
  • 1
jib
  • 40,579
  • 17
  • 100
  • 158
  • Thank you for your answer but when I use this syntax, I have no error but the camera still in the 'user' mode – Damien LD Apr 20 '17 at 14:57
  • @DamienLD Make sure you've updated to the [latest version](https://github.com/webrtc/adapter/pull/495) of adapter. Also, what device is this on, and [what cameras](http://jsfiddle.net/jib1/tsa6rrt7/) does it have? – jib Apr 20 '17 at 22:04
  • I have the last version of adapter (3.3.3) and I run the code on two devices : Huawei Honor and Huawei P9 lite. I have two cameras on each but `d.label` return nothing, is it a problem ? – Damien LD Apr 21 '17 at 07:11
  • 1
    After many research, I found that I miss a permission to use `mediaDevices.enumerateDevices()` . Do you know which permission should I add ? – Damien LD Apr 21 '17 at 11:37
  • 1
    Finally I decided to don't use facingMode. In my case, I have create a button to switch between each camera of the device. For this, I use `mediaDevices.enumerateDevices()` to get all available cameras. Thank you for your help ! – Damien LD Apr 21 '17 at 12:37
  • @DamienLD If you don't have camera or microphone permission then `d.label` will be empty. But [my fiddle](http://jsfiddle.net/jib1/tsa6rrt7/) asks for camera permission first, so assuming you granted that it should show labels. You don't have to grant persistent permission. – jib Apr 22 '17 at 14:01