Webrtc rear camera not working in IOS 11

Question

Below is my code that work fine in android and ios 11 with front camera while when i use rear camera it gives error

below works

video: { width: 400, height: 200, facingMode: "user"  }

Below not works

video: { width: 400, height: 200, facingMode: "environment"  }

Complete code

**

var constraints = window.constraints = {
  audio: false,
  video: { width: 400, height: 200, facingMode: "environment"  }
};
function handleSuccess(stream) {
  var videoTracks = stream.getVideoTracks();
  console.log('Got stream with constraints:', constraints);
  console.log('Using video device: ' + videoTracks[0].label);
  stream.oninactive = function() {
    console.log('Stream inactive');
  };
  window.stream = stream; // make variable available to browser console
  video.srcObject = stream;
}
function handleError(error) {
  if (error.name === 'ConstraintNotSatisfiedError') {
    errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
        constraints.video.width.exact + ' px is not supported by your device.');
  } else if (error.name === 'PermissionDeniedError') {
    errorMsg('Permissions have not been granted to use your camera and ' +
      'microphone, you need to allow the page access to your devices in ' +
      'order for the demo to work.');
  }
  errorMsg('getUserMedia error: ' + error.name, error);
}
function errorMsg(msg, error) {
  errorElement.innerHTML += '<p>' + msg + '</p>';
  if (typeof error !== 'undefined') {
    console.error(error);
  }
}
navigator.mediaDevices.getUserMedia(constraints).
    then(handleSuccess).catch(handleError);

**

Does [this](https://stackoverflow.com/q/43515300/1971013) help? (I'd try the most standard settings, so `audio: true`. Probably not the issue, but just to make sure.) — meaning-matters, Mar 10 '18 at 08:12

score 3 · Answer 1 · answered Mar 12 '18 at 12:52

As for now, getUserMedia under Apple's iOS11 do not support width and height constrains.

The only way to use the back camera is passing the following constraints:

var constraints = window.constraints = {
   audio: false,
   video: { facingMode: 'environment' }
 };

I have opened a bug in Apple for this, but it was closed as a duplicate. Keep an open eye for updates from Apple regarding this issue.

Marek Wysmułek · Answer 2 · 2020-05-26T15:44:09.570

0

To access rear camera on Safari Iphone, using getUserMedia, you need to set in Safari access settings permanent access to the camera. The "always ask" is not enought.

(I assumed, you application is served over HTTPS - which is requested for getUserMedia to work at all).

edited May 26 '20 at 15:44

answered May 26 '20 at 15:37

Marek Wysmułek

786
6
6

Webrtc rear camera not working in IOS 11

2 Answers2