undefined is not an object (evalution 'navigation.mediaDevices.getUserMedia')

Question

I want to open a camera scanner and below is code that working properly in android but in ios getting an error

TypeError: undefined is not an object (evalution 'navigation.mediaDevices.getUserMedia')

here is the full tutorial links https://devdactic.com/pwa-qr-scanner-ionic/ A small help is much appreciated

async startScan() {
  // Not working on iOS standalone mode!
  const stream = await navigator.mediaDevices.getUserMedia({
    video: { facingMode: 'environment' }
  });
 
  this.videoElement.srcObject = stream;
  // Required for Safari
  this.videoElement.setAttribute('playsinline', true);
 
  this.loading = await this.loadingCtrl.create({});
  await this.loading.present();
 
  this.videoElement.play();
  requestAnimationFrame(this.scan.bind(this));
}
 
async scan() {
  if (this.videoElement.readyState === this.videoElement.HAVE_ENOUGH_DATA) {
    if (this.loading) {
      await this.loading.dismiss();
      this.loading = null;
      this.scanActive = true;
    }
 
    this.canvasElement.height = this.videoElement.videoHeight;
    this.canvasElement.width = this.videoElement.videoWidth;
 
    this.canvasContext.drawImage(
      this.videoElement,
      0,
      0,
      this.canvasElement.width,
      this.canvasElement.height
    );
    const imageData = this.canvasContext.getImageData(
      0,
      0,
      this.canvasElement.width,
      this.canvasElement.height
    );
    const code = jsQR(imageData.data, imageData.width, imageData.height, {
      inversionAttempts: 'dontInvert'
    });
 
    if (code) {
      this.scanActive = false;
      this.scanResult = code.data;
      this.showQrToast();
    } else {
      if (this.scanActive) {
        requestAnimationFrame(this.scan.bind(this));
      }
    }
  } else {
    requestAnimationFrame(this.scan.bind(this));
  }
}

All you need to do is give permission at `info.plist` to whatever media your app is using through `WKWebView` in order for `getUserMedia` to be available. — Salih Kavaf, Jan 10 '23 at 07:40

jcesarmobile · Accepted Answer · 2023-01-10T11:52:23.283

2

getUserMedia was not available on WKWebView on iOS 14.4 and older when using a custom scheme to load content, which Capacitor uses. Apple made getUserMedia available on iOS 14.5 and newer when using custom schemes and in a previous 14.x version if using https.

To make it work, it’s required to add camera and/or microphone usage descriptions in the Info.plist (depending on the features you are using)

edited Jan 10 '23 at 11:52

answered Jul 14 '20 at 11:50

jcesarmobile

51,328
11
132
176

https://stackoverflow.com/questions/45692526/ios-11-getusermedia-not-working this solution will not worked ? – cakePHP Jul 14 '20 at 12:11
1

no, getUserMedia is available in Safari, but not in the WKWebView – jcesarmobile Jul 14 '20 at 13:35
3

Apple Safari is likely to take over Microsoft Internet Explorer's longstanding championship of being ridiculously incompatible with other browsers. – O. Jones Jul 16 '20 at 12:23
This answer is wrong. All you need to do is give permission at `info.plist` to whatever media your app is using through `WKWebView` in order for `getUserMedia` to be available. – Salih Kavaf Jan 10 '23 at 07:40
It’s not wrong, getUserMedia was made available on iOS 14.5, released one year after I answered this question. The answer says “unless Apple makes getUserMedia available in the future”, and they did. Anyway, I’ll update the answer to include information about when it was made available. – jcesarmobile Jan 10 '23 at 11:44

undefined is not an object (evalution 'navigation.mediaDevices.getUserMedia')

1 Answers1