Ngx-scanner: zxing-scanner not working in Cordova Web View

Created on 20 Jun 2019  路  5Comments  路  Source: zxing-js/ngx-scanner

I am using zxing-scanner in Angular Web App and that Web App will load in Cordova App's Web View.
Scanner working fine in Chrome(Desktop/Tablet/Mobile) but its not working in Cordova App's Web View.

Note:
Camera permission already granted to the Cordova App.

zxing-scanner askForPermission TypeError:
navigator.mediaDevices.getUserMedia is not a function(...)

@zxing/ngx-scanner I was not able to define if I have permission for camera or not. TypeError: navigator.mediaDevices.getUserMedia is not a function(...)

zxingWeb APP in Cordova APP WebView

not a bug question wontfix

Most helpful comment

You don't have your permissions properly set. Do the following:

  1. Install https://www.npmjs.com/package/cordova-plugin-android-permissions
  2. Add xmlns:android="http://schemas.android.com/apk/res/android" to the <widget> tag in your config.xml
  3. Add the following snippet inside your <platform name="android"> tag in your config.xml:
<config-file parent="/manifest" target="AndroidManifest.xml">
    <uses-permission android:name="android.permission.CAMERA" />
</config-file>
  1. Add the following code to the location that you wish to access the camera inside your app:
const permissions = window.cordova.plugins.permissions;

permissions.checkPermission('android.permission.CAMERA', (status) => {
  if (!status.hasPermission) {
    permissions.requestPermission('android.permission.CAMERA', (request) => {
      console.log('Success requesting CAMERA permission:', request);
    }, (error) => {
      console.log('Failed to set permission:', error);
    });
  }
});

All 5 comments

You don't have your permissions properly set. Do the following:

  1. Install https://www.npmjs.com/package/cordova-plugin-android-permissions
  2. Add xmlns:android="http://schemas.android.com/apk/res/android" to the <widget> tag in your config.xml
  3. Add the following snippet inside your <platform name="android"> tag in your config.xml:
<config-file parent="/manifest" target="AndroidManifest.xml">
    <uses-permission android:name="android.permission.CAMERA" />
</config-file>
  1. Add the following code to the location that you wish to access the camera inside your app:
const permissions = window.cordova.plugins.permissions;

permissions.checkPermission('android.permission.CAMERA', (status) => {
  if (!status.hasPermission) {
    permissions.requestPermission('android.permission.CAMERA', (request) => {
      console.log('Success requesting CAMERA permission:', request);
    }, (error) => {
      console.log('Failed to set permission:', error);
    });
  }
});

Thanks @benbrownlol.

Anybody got this working on iOS?

I'm not sure with Cordova, but inside a PWA it's impossible until now.

Hi Obahcam, thx for your reply.
PWA isn't support by iOS enough indeed, although it does work fine in a browser. But it is why I'm trying with Cordova.
I'll open a seperate issue for it.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ANTONIOFC picture ANTONIOFC  路  5Comments

odahcam picture odahcam  路  6Comments

joterr picture joterr  路  4Comments

tearforfear007 picture tearforfear007  路  6Comments

werthdavid picture werthdavid  路  4Comments