Closed ParVisual closed 7 years ago
bitjson
commented
7 years ago Is your application covering the video preview? You'll need to make sure the backgrounds of the <body> and any other elements are transparent.
This test repo might be helpful for you: https://github.com/bitjson/qrscanner-test
ParVisual
commented
7 years ago Hi, bitjson, thanks to reply. I'm sure that the DOM elements on my project have a transparent background. Here is my code, is quite simple. INDEX:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<style>
* {
color:#000;
}
</style>
</head>
<body ng-app="starter" style="background: none transparent;">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view style="background: none transparent;"></ion-nav-view>
</body>
</html>
TAB:
<ion-view view-title="Dashboard" style="background: none transparent;">
<ion-content class="padding" style="background: none transparent;">
</ion-content>
</ion-view>
CONTROLLER:
angular.module('starter.controllers', [])
.controller('DashCtrl', function($ionicPlatform, $scope) {
$ionicPlatform.ready(function() {
alert(window.QRScanner);
try {
window.QRScanner.prepare(
function onDone(err, status) {
if (err) {
alert(err);
}
if (status.authorized) {
alert("authorized");
window.QRScanner.show(
function(status) {
window.QRScanner.scan(
function (err, text){
alert("QRScanner.scan");
if(err){
alert(err);
} else {
alert(text);
}
}
);
}
);
} else if (status.denied) {
alert("denied");
} else {
alert("else");
}
}
);
} catch (err) {
alert(err);
};
});
})
.controller('ChatsCtrl', function($scope, Chats) {
})
.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
$scope.chat = Chats.get($stateParams.chatId);
})
.controller('AccountCtrl', function($scope) {
});
Did this project work for you? https://github.com/bitjson/qrscanner-test
bitjson
commented
7 years ago Looking at your code, I'm fairly sure there are still white backgrounds on elements that will be generated by Ionic. Unless you've made other css changes, I wouldn't expect to be able to see the video preview.
I'd recommend inspecting your application on the device using Developer Tools, and manually picking apart your application until you can find the element that's hiding the preview.
ParVisual
commented
7 years ago bitjson, thanks. I can't try the qrscanner-test, I downloaded it, but when I run from CMD I have some problems. I'll take a look at the ionic css classes in order to remove all backgrounds. I'll let you know when I have tried all optoins.
bitjson
commented
7 years ago Would you mind posting an issue here about the problems you experience trying to run it?
Sounds good – if you're unable to resolve, please feel free to re-open this issue. I'm going to close this for now (unless/until) we find an issue with the plugin. Thanks!
ParVisual
commented
7 years ago SOLUTION: I replaced all background-color:white, background-color:#fff, background-color:#ffffff into folder www/lib/ionic/css/ionic.css, and I can see the camera.
Installed on a ionic tab's project, and debuggued in a controller, after device ready. Running in a tablet Samsung Tab 2. 10.1. Plugin is recognized, authorized, and run without errors, but nothing appears on screen.
})