Orientation Bug on iOS 15.

[itsgmart]

The sample codes work well on iOS 14 but since the new update, it will only work in landscape.

Page is loaded in Portrait mode but unable to scan anything.
Rotate the phone to Landscape mode and it works.

Notice that iOS 15, there was many changes to WebRTC so some experimental option affected this.

Thanks!

[itsgmart]

Might have found the fixed. (Confirming with another iPhone iOS 15)
Fixed is only for Safari (Chrome seems like those option are default)
Setting > Safari > Advanced > Experimental Feature >Untick all GPU Process : *

[andrewgurn]

Might have found the fixed. (Confirming with another iPhone iOS 15) Fixed is only for Safari (Chrome seems like those option are default) Setting > Safari > Advanced > Experimental Feature >Untick all GPU Process : *

You're an absolute legend. This has solved the issue for me.

[huangsong]

edit scanner.js

    analyze() {
        if (!this.video.videoWidth) {
          return null;
        }
    
        //if (!this.imageBuffer) {
          let videoWidth = this.video.videoWidth;
          let videoHeight = this.video.videoHeight;
    
          this.sensorWidth = videoWidth;
          this.sensorHeight = videoHeight;
          this.sensorLeft = Math.floor((videoWidth / 2) - (this.sensorWidth / 2));
          this.sensorTop = Math.floor((videoHeight / 2) - (this.sensorHeight / 2));
    
          this.canvas.width = this.sensorWidth;
          this.canvas.height = this.sensorHeight;
    
          this.canvasContext = this.canvas.getContext('2d');
          this.imageBuffer = ZXing._resize(this.sensorWidth, this.sensorHeight);
          //return null;
        //}

fix this bug.

[ashu4code]

Now i test on IOS 14,ios 15 ,, Browser chrome safari..Instscan work well.

[ibnusulaiman83]

edit scanner.js

    analyze() {
        if (!this.video.videoWidth) {
          return null;
        }
    
        //if (!this.imageBuffer) {
          let videoWidth = this.video.videoWidth;
          let videoHeight = this.video.videoHeight;
    
          this.sensorWidth = videoWidth;
          this.sensorHeight = videoHeight;
          this.sensorLeft = Math.floor((videoWidth / 2) - (this.sensorWidth / 2));
          this.sensorTop = Math.floor((videoHeight / 2) - (this.sensorHeight / 2));
    
          this.canvas.width = this.sensorWidth;
          this.canvas.height = this.sensorHeight;
    
          this.canvasContext = this.canvas.getContext('2d');
          this.imageBuffer = ZXing._resize(this.sensorWidth, this.sensorHeight);
          //return null;
        //}

fix this bug.

how to find scanner.js files. I am using

<script type="text/javascript" src="plugins/instascan.min/instascan.min.js"></script>