J'ai récemment rencontré un plug-in assez neuf Cordova appelé Cordova-Plugin-QRscanner ( HTTPS: / /Github.com/bitpay/cordova-plugin-qrscanner ). J'utilise d'autres scanners QR avant, mais ceux-ci se superposent simplement à une sorte d'interface utilisateur de la caméra natale jusqu'à ce que le QR ait été numérisé puis revenez à l'application.
Cependant, l'approche de ce plugin est un peu différente. La caméra est en fait montré "derrière" votre application et vous devez tout faire transparent afin de le voir.
Ceci est très intéressant car vous pouvez ensuite ajouter facilement des superpositions personnalisées avec HTML et CSS. Cependant, je ne suis pas tout à fait sûr de la meilleure approche ici.
Après avoir ajouté le plugin et simplement appeler Je suppose que je pourrais créer et pousser une nouvelle page avec ma superposition dessus, définissez la couleur de fond sur transparent, puis naviguez à nouveau une fois que le code a été numérisé. Mais cela se sent vraiment hacky.
Quelqu'un a-t-il une meilleure solution pour cela? Merci pour votre aide.
EDIT:
Ce n'est pas le même plugin, mais cet article est pertinent pour ma question.
http: //www.joshmorony.com/ionic-go-create-a-pokemon-go-style-interface-in-ionic-2/
Appliquer les styles CSS fonctionne, mais à nouveau, le reste de l'application n'est pas utilisable alors. qrsanner.scan (displaycontents); Vous ne pouvez rien voir, mais le scanner fonctionne déjà en arrière-plan. J'ai ensuite supprimé récursivement des styles (voir moyen le plus simple de supprimer Tous les styles d'une page ) de l'application et définissent la couleur de fond sur transparent pour voir si cela a fonctionné. Cela l'a fait, mais je pouvais évidemment voir toujours le texte qui a été affiché avant.
Par exemple, existe-t-il un moyen de "échanger" toute la partie visible de l'application avec la superposition et de restaurer l'état après numérisation du code?
3 Réponses :
Je ne ferais pas l'application transparente, car je ne vois pas le point de cela. Au lieu de cela, vous manifesteriez simplement le contenu de la caméra dans une DIV dans votre page, et couche d'autres éléments HTML en haut de celui-ci à l'aide d'un index Z supérieur à celui de l'élément contenant l'image de la caméra.
Comment pouvez-vous ajouter le contenu de la caméra dans un DIV? Ce serait une solution encore meilleure, mais je ne sais pas si / comment cela est possible.
Le seul moyen que j'ai trouvé pour le faire fonctionner est d'utiliser la WKWebView sur iOS. Vous pouvez regarder le code source d'un exemple ici: Github.com/airgap- IT / AirGap-Mobile-diffuster
Comme @Vrijdenker a dit que vous devriez afficher le contenu de la caméra au niveau droit et ne pas pirater étrangement le CSS.
Pour ce faire, vous pouvez déboguer à distance votre application pour localiser le conteneur de caméra et appliquer des CSS dessus pour modifier l'index z-index / l'affichage / etc.
Débogage à distance sur Android:
https://developers.google.com/web/wew Outils / Chrome-DevTools / Remote-Débogage /
Débogage à distance sur iOS:
Vous pouvez le faire sur un appareil réel ou sur simulateur
Comme je l'ai déjà mentionné, je doute que cela fonctionnera. À partir de la documentation du plugin, il semble que l'aperçu de la caméra est affiché en dehors du contexte WEBVIEW. Le prévisualisation de la caméra native de QRScanner est rendu derrière la webview de l'application Cordova . Donc, je ne pense pas que vous puissiez y accéder à partir de la vision Web.
OK, appliquez ensuite une classe CSS spécifique sur votre conteneur lorsque vous lancez le plugin, car il est spécifié dans le doc. Utilisez la directive ngclass et appliquez un opacité: 0 à votre classe spécifique
@andreas j'avais le problème il y a quelques semaines il y a quelques semaines. Voici comment je l'ai réparé:
1) Tout d'abord, créez une classe appelée Lowopity sur votre thème / Variables.scss, il doit être global, si vous le créez dans les SCSS de la page, l'ajouter de manière dynamique ne fonctionnera pas de manière dynamique. : p> 2) Lorsque vous affichez le QRScanner, vous devez appliquer la classe à l'élément ION-APP, et enregistrer éventuellement une action Backbutton: P> closeQrScanner() {
this.qrScanner.hide().then(()=>{
window.document.querySelector('ion-app').classList.remove('lowOpacity');
}); // hide camera preview
}
ngOnDestroy() {
this.closeQrScanner();
}
Comment savez-vous que le plugin fonctionne? Puisque vous ne voyez rien, le plugin peut simplement ne pas fonctionner.
Comme je l'ai dit, si je fais de tous les éléments transparents récursives, cela fonctionne. Mais évidemment, cela ne peut pas être la solution car les autres parties de l'application sont alors inutilisables.