How to resize using getUserMedia on iOS?

Question

Beginning with the introduction of Apple iOS 11 webRTCand getUserMediaI can get the camera input to the element <video>, but can not use conventional methods to set its size ( heightand width).

It works:

var constraints = {
    audio: false,
    video: { facingMode: 'user' }
};

navigator.mediaDevices.getUserMedia(constraints).then(
    function success(stream) {
         video.srcObject = stream;
    }
);

This does not work ( only on iOS) and the image does not display:

var constraints = {
    audio: false,
    video: { facingMode: 'user', width: 306, height: 180 }
};

navigator.mediaDevices.getUserMedia(constraints).then(
    function success(stream) {
         video.srcObject = stream;
    }
);

Error message from catch:

Invalid restriction

---

Unsuccessful attempts: mandatory , ideal, minHeightetc.

---

This is mistake? Are there any known alternatives?

Answer 1

Safari. , width: 306, ideal, Safari, , exact , .

, Safari, , , Firefox Edge, , .

, Safari .

navigator.mediaDevices.getUserMedia({video: {width: {min: 320, max: 640}}})

... :

try {
  await navigator.mediaDevices.getUserMedia({video: {width: 320}})
} catch(e) {
  await navigator.mediaDevices.getUserMedia({video: {width: 640}})
}