Resize not working on Safari iOS

[agusdutra]

Hi, I'm trying to resize the camera view, but when I do it, it crashes on Safari on iOS.

It's working pretty well on chrome on android.

It also happens with the liveStream example, the first option (640px) works fine, but when you change it, it breaks.

[poliander]

Do you mean with "resize" actually "orientation changes"?

[agusdutra]

I mean setting width and height constraints on de Quagga.init

If I pass this object to the Quagga.init

{
 ...
      inputStream: {
        name: 'Live',
        type: 'LiveStream',
        target: document.querySelector('#interactive'),
        constraints: {
          facingMode: 'environment',
          },
      }
    ...
      }

I get the default width and height of the camera view on the #interactive div

But if I change the object adding just width and height inside constraints:

 {
      ...
      inputStream: {
        name: 'Live',
        type: 'LiveStream',
        target: document.querySelector('#interactive'),
        constraints: {
          facingMode: 'environment',
          width: 300,  
          height: 100
           },
       }
       ...     
}

It stops working on IOS, and it triggers the other bug I linked.

I managed to resize the camera view using CSS and defining the elements in HTML :

HTML :

 <div id="interactive" class="viewport">
      <video autoplay="true" preload="auto" src="" muted="true" playsinline="true"></video>
      <canvas #canvas class="drawingBuffer"></canvas>
    </div>

CSS:

video {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

#interactive.viewport {
  width: 320px;
  height: 300px;
  overflow: hidden;
}

#interactive.viewport canvas, video {
  float: left;
  width: 320px;
  height: 300px;
}

.drawingBuffer{

}

#interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
  margin-left: -640px;
} 

With these styling, it works on Chrome on PC and Android, and on iOS Safari

[poliander]

Giving width 300 and height 100 as constraint is invalid, those dimensions should match those supported by your phone. Try to fiddle around with https://webrtchacks.github.io/WebRTC-Camera-Resolution/ and see what you can do. (I recommend to stick with 640x480 or 480x640 in portrait mode, those are supported by all cameras).

I found resizing the video element using CSS "transform:scale(...);" to a proper width or height works pretty good, then crop using an overflow:hidden container as you also suggested, too. additionally you can move the picture cutting using position:relative; in the surrounding container and position:absolute; top:123px; on the video element.