cordova-plugin-iosrtc: Webrtc-adapter mediaConstraints.video.facingMode does not select correct camera

Expected behavior

Hi, I’m using the plugin to get AR.js to work in cordova-ios. With some adjustment on the AR.js code the video is loaded and should show the environment camera.

Observerd behavior

But I only get the selfie camera selected.

Steps to reproduce the problem

I used the bootstrap code to patch the global API, then started AR.js. The code in AR.js is:

navigator.mediaDevices.enumerateDevices().then(function (devices) {
    var userMediaConstraints = {
      audio: false,
      video: {
        facingMode: {
          ideal: 'environment'
        },
        width: {
          ideal: _this.parameters.sourceWidth,
          // min: 1024,
          // max: 1920
        },
        height: {
          ideal: _this.parameters.sourceHeight,
          // min: 776,
          // max: 1080
        }
      }
    };

    // get a device which satisfy the constraints
    navigator.mediaDevices.getUserMedia(userMediaConstraints).then(function success(stream) {
      // set the .src of the domElement
      domElement.srcObject = stream;

      var event = new CustomEvent('camera-init', {stream: stream});
      window.dispatchEvent(event);
      // to start the video, when it is possible to start it only on userevent. like in android
      document.body.addEventListener('click', function () {
        domElement.play();
      });
      // domElement.play();

    })
    });
  })
  });
[...]

Are there any other things I have to define, set or pay attention to?

Platform information

Cordova version: 9.0.0
Plugin version: 5.0.1
iOS version: 13.2.3 (iPhone 7 & XR)
Xcode version: 12.2.1

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 15 (11 by maintainers)

Most upvoted comments

Side by side is ok, but you cannot render native video and have canvas above unless you use z-index: -1on video element and body and html transparent.

Ah ok, the z-indices are set correctly by AR.js.

Can you provide a dump of “constraints.video.optional[4]” from adapter may be I can handle the case.

Sure:

{
  "audio": false,
  "video": {
    "optional": [
      {
        "minWidth": 640
      },
      {
        "maxWidth": 640
      },
      {
        "minHeight": 480
      },
      {
        "maxHeight": 480
      },
      {
        "sourceId": "com.apple.avfoundation.avcapturedevice.built-in_video:0"
      }
    ]
  }
}

smuddy on Nov 26, 2019

Missing typeof released on 6.0.5

https://github.com/cordova-rtc/cordova-plugin-iosrtc/blob/master/CHANGELOG.md#version-605

hthetiot on Nov 26, 2019

with webrtc adapter

I think, I found the problem in the getUserMedia.js.

		// Also check video sourceId (mangled by adapter.js).
		} else if (typeof constraints.video.sourceId === 'string') {
			newConstraints.video.deviceId = {
				exact: constraints.video.sourceId
			};

But the adapter writes the sourceId to constraints.video.mandatory.sourceId.

without webrtc adapter

The constraints inside getUserMedia.js are the original constrains from the AR.js call. But:

if (constraints.video.facingMode.ideal === 'string') {
  newConstraints.video.facingMode = {
    ideal: constraints.video.facingMode.ideal
  };
}

The Browser evaluates (constraints.video.facingMode.ideal === 'string') as false, so the facing mode is not passed into the native plugin code.

PS: there is typeofmissing: (**typeof** constraints.video.facingMode.ideal === 'string')

smuddy on Nov 26, 2019