fix: secondary camera

[mtsmachado8]

On some devices(that have multiple cameras) we cant take the default back camera (REAR camera) -> test it on galaxy s20+ or Huawey P30 Lite -> MAR-LX3A. It looks like its beeing used or the manufacturer didn't implement it like they should. This PR solves this issue by getting another camera. It would be better if we could chose wich camera is that tough... (maybe someone can implement in the future)

This PR also solves another issue. The default camera should be Rear, Not FRONT by the documentation of capacitor. This code was getting the user view by default, not environment as it should

[gpcboekema]

We hope this will fix both issues described above for us. (no camera found (iOS IPhone 12) and default rear camera) When can we expect this fix in a release?

[hembachrterran]

Why is this PR not accepted yet?

[vadimluminous]

@hembachrterran

Same question here. Any updates on this

[Aarbel]

Planning to merge it ?

I made in the past a custom Camera component for my PWA, but had corner cases with webRTC camera "facingMode" on some devices, so it doesn't seem to be well supported by all the devices.

For example "environment" facingMode doesn't work on Microsoft Tablets, it shows the "user" camera 🤯

So we had to do this:

      const videoDevices = mediaDevices.filter(
        (device) => device.kind === "videoinput"
      );

      console.info("videoDevices: ", videoDevices);

      /* We have to check manually which is the right back device camera, because there's not
         standard library to manage that, especially for weird devices like Microsoft Surfaces */
      const backCameraDevice = videoDevices.find(
        (d) =>
          d.label.toLowerCase().includes("back") ||
          d.label.toLowerCase().includes("rear")
      );
      const backCameraId = backCameraDevice && backCameraDevice.deviceId;

      const frontCameraDevice = videoDevices.find(
        (d) => d.deviceId !== backCameraId
      );
      const frontCameraId = frontCameraDevice && frontCameraDevice.deviceId;

      const constraints = {
        audio: false,
        video: {
          deviceId: backCameraId || frontCameraId,
        },
      };

@mtsmachado8 would you like to implement this corner case ?

[guillaumeguiral]

Any update on this PR ? Thanks

[KnulstBDH]

So, any update on when this will be released?

[ninaDeimos]

4 months later and still no news?

[KnulstBDH]

As a workaround I use the html tag instead of the Ionic Camera. I created an overlay and added opacity:0 so it is not visible, yet clickable. <input (change)="addPhotosToGallery($event)" type="file" accept="image/*" multiple style="position:absolute; width:100vw; height:25vh; opacity: 0; z-index: 9999;">

Then just read the data from the input element from the DOM. Works like a charm.

[abkNiazi]

@KnulstBDH above only opens gallery or camera too?

[KnulstBDH]

@abkNiazi It shows the native media selector from the device, so the user can choose to either use the camera, or to select images from their library. On desktop it'll only open the file selector, so you're not able to test it with a camera (like a webcam), but on mobile it is also possible to choose your camera.

[abkNiazi]

@KnulstBDH As I understand is that it will be to let user choose camera or gallery/storage when natively build and run on android. My case is that Ionic app deployed on server and then opened in android app using web view. What will be expected behavior or if you have same case how it worked?

[KnulstBDH]

@abkNiazi Yes, it will let the user choose between camera or gallery, but it doesn't have to be deployed on a specific OS, because it is just a website. If I understand you correctly; When website is opened on mobile it will work the same as you described: "let user choose camera or gallery"

[abkNiazi]

@KnulstBDH thanks for your time. But unfortunately it is opening file storage and does not give option to take photo. Camera opens in selfie mode although directions are set. @Aarbel any update on the fix for this.

[lazmeister]

Is this being merged? @jcesarmobile