Cordova-plugin-qrscanner issue

Hi everyone, I started to work with framework7 some days ago, so I’m still learning. I have an issue with cordova-plugin-qrscanner, the plugin apears to be starting but the background doen’t hide, so I can’t use the camera to scan qrcode.

I worked with this plugin before I started to work with framework7 without problems .

I wonder you can help me.

Thanks in advance.

Framework7 is independent from any cordova actions. This issue is very likely somewhere ele in your code.

the same code was working well in another app whitout framework7, I’m shure is something about framework7 (something I’m doing wrong), for some reason the controlers and background don’t hide

Hi Antonio

You can post a bit of code?

I used this plugin without problems

Regards

// routes.js file

path: ‘/EscanearEquipos/’,
url: ‘./pages/EscanearEquipos.html’,
on: {
pageInit: function (e, page) {

//Escaneo Código QR
	MostrarCamara();  
	QRScanner.prepare(onDone); // show the prompt

	function onDone(err, status){
	  if (err) {
	   // here we can handle errors and clean up any loose ends.
	   //console.error(err);
		app.dialog.alert(err);
	  }
	  if (status.authorized) {
		// W00t, you have camera access and the scanner is initialized.
		// QRscanner.show() should feel very fast.
		app.dialog.alert('Autorizado');
	  } else if (status.denied) {
	   // The video preview will remain black, and scanning is disabled. We can
	   // try to ask the user to change their mind, but we'll have to send them
	   // to their device settings with `QRScanner.openSettings()`.
		app.dialog.alert('Denegado');
	  } else {
		// we didn't get permission, but we didn't get permanently denied. (On
		// Android, a denial isn't permanent unless the user checks the "Don't
		// ask again" box.) We can ask again at the next relevant opportunity.
	  }
	}

	function displayContents(err, text){
	  if(err){
		// an error occurred, or the scan was canceled (error code `6`)
		//alert('Error');
		app.dialog.alert('Error');
	  } else {
		// The scan completed, display the contents of the QR code:
		// alert(text);
		var getjson =  JSON.parse(text);
		var IdEquipo = getjson.Id;
		DatosdelEquipo(IdEquipo);
		QRScanner.hide();
	  }
	}

	QRScanner.hide(function(status){
	  console.log(status);
	});

	function MostrarCamara(){
		QRScanner.show();	
		QRScanner.scan(displayContents);
	}
	
	function CerrarCamara(){
		QRScanner.hide();
		window.location.href = 'menu.html';
	}

//EscanearEquipos.html

<div id="DivCamaraQR" style="background-color: transparent !important;">
	<div class="app">
		<img src="img/Marca-EscanQR.png"/ class="imagen_scan">
	</div>
	<div class="app" style="width:100%; margin-bottom:5px; position: absolute;bottom: 0;">
		<a class="link back col button button-big button-fill color-white text-color-blue" onclick="CerrarCamara();">Cerrar Cámara</a>
	</div>
</div>

<div id="DivPedidoQR" style="display:none;">
	<div class="block text-color-white font-25 texto-derecha">Agregar Pedido</div>
	<form class="list ajax-submit" id="FormularioPedido">
	  <ul class="border_color">
		<li class="item-content item-input">
		  <div class="item-inner">
			<div class="item-title item-label text-color-white font-12">Equipo</div>
			<div class="item-input-wrap border_bottom_color">
			  <input class="text-color-white font-50" name="IdEquipo" id="IdEquipo" type="hidden" readonly="readonly">
			  <input class="text-color-white font-50" name="ClienteDual" id="ClienteDual" type="hidden" readonly="readonly">
			  <input class="text-color-white font-50" name="Equipo" id="Equipo" type="text" readonly="readonly">
			</div>
		  </div>
		</li>
		<li class="item-content item-input">
		  <div class="item-inner">
			<div class="item-title item-label text-color-white font-12">Marca</div>
			<div class="item-input-wrap border_bottom_color">
			  <input class="text-color-white font-50" name="Marca" id="Marca" type="text" readonly="readonly">
			</div>
		  </div>
		</li>
		<li class="item-content item-input">
		  <div class="item-inner">
			<div class="item-title item-label text-color-white font-12">Modelo</div>
			<div class="item-input-wrap border_bottom_color">
			  <input class="text-color-white font-50" name="Modelo" id="Modelo" type="text" readonly="readonly">
			</div>
		  </div>
		</li>
		<li class="item-content item-input">
		  <div class="item-inner">
			<div class="item-title item-label text-color-white font-12">Serial</div>
			<div class="item-input-wrap border_bottom_color">
			  <input class="text-color-white font-50" name="Serial" id="Serial" type="text" readonly="readonly">
			</div>
		  </div>
		</li>
		<li class="item-content item-input">
		  <div class="item-inner">
			<div class="item-title item-label text-color-white font-12">Area</div>
			<div class="item-input-wrap border_bottom_color">
			  <input class="text-color-white font-50" name="Area" id="Area" type="text" readonly="readonly">
			</div>
		  </div>
		</li>
		<li class="item-content item-input">
		  <div class="item-inner">
			<div class="item-title item-label text-color-white font-12">Sucursal</div>
			<div class="item-input-wrap border_bottom_color">
			  <input class="text-color-white font-50" name="Sucursal" id="Sucursal" type="text" readonly="readonly">
			</div>
		  </div>
		</li>
		<li class="item-content item-input">
		  <div class="item-inner">
			<div class="item-title item-label text-color-white font-12">Tipos de Servicio</div>
			<div class="item-input-wrap border_bottom_color">
			  <select  name="tipo_servicio" id="tipo_servicio" required class="text-color-white font-50" placeholder="Selecciona una opción...">
				  <!-- Tipos de Servicio -->
			  </select>
			</div>
		  </div>
		</li>
		<li class="item-content item-input">
		  <div class="item-inner">
			<div class="item-title item-label text-color-white font-12">Falla</div>
			<div class="item-input-wrap border_bottom_color">
			  <textarea class="text-color-white font-50" name="nota" id="nota" type="text" placeholder="Nota" form="FormularioPedido"></textarea>
			</div>
		  </div>
		</li>
	  </ul>
	  <div class="block block-strong row">
		<a class="col button button-big button-fill color-white text-color-blue GuardarPedidoQR">Crear Pedido</a>
		<a href="#" class="col button button-big button-fill color-white text-color-blue link back">Cerrar</a>
	  </div>
	</form>
</div>

<div id="DivAdjuntosPedido" style="display:none;">
	<!--Subir PDF  -->
	<div class="block text-color-white font-25 texto-derecha">Agregar PDF</div>
	<form class="list ajax-submit" id="FormSubirPDF" method="post" enctype="multipart/form-data" autocomplete="off">
	  <ul class="border_color">
		<li class="item-content item-input">
		  <div class="item-inner">
			<div class="item-input-wrap border_bottom_color fileupload fileupload-new admin-form" data-provides="fileupload">
			  <input class="text-color-white font-50" name="IdPedidoPDF" id="IdPedidoPDF" type="hidden" readonly="readonly">
				<div class="fileupload-preview thumbnail mb15">
					<output id="MostrarPDF" style="width:10px;"></output>
				</div>
				<span class="button btn-system btn-file btn-block ph5">
				<input type="file" name="SubirPDF" id="SubirPDF" class="col button button-big button-fill color-white text-color-blue" required>
				</span>
			</div>
		  </div>
		</li>
	  </ul>
	  <div class="block block-strong row">
		<a class="col button button-big button-fill color-white text-color-blue BotonSubirPDF">Subir PDF</a>
	  </div>
	</form>
	<div class="block block-strong row" id="DivPDFPedidos">
		<!-- PDFs -->
	</div>
	
	<!--Subir Imagen  -->
	<div class="block text-color-white font-25 texto-derecha">Fotos del Pedido</div>
	<form class="list ajax-submit" id="FormSubirFoto" method="post" enctype="multipart/form-data" autocomplete="off">
	  <ul class="border_color">
		<li class="item-content item-input">
		  <div class="item-inner">
			<div class="item-input-wrap border_bottom_color fileupload fileupload-new admin-form" data-provides="fileupload">
			  <input class="text-color-white font-50" name="IdPedidoFoto" id="IdPedidoFoto" type="hidden" readonly="readonly">
				<div class="fileupload-preview thumbnail mb15">
					<output id="MostrarFoto" style="width:10px;"></output>
				</div>
				<span class="button btn-system btn-file btn-block ph5">
				<!-- <span class="fileupload-new">Archivo PDF</span> -->
				<!-- <span class="fileupload-exists">Archivo PDF</span> -->
				<input type="file" name="SubirFoto" id="SubirFoto" class="col button button-big button-fill color-white text-color-blue" required>
			</span>
			</div>
		  </div>
		</li>
	  </ul>
	  <div class="block block-strong row">
		<a class="col button button-big button-fill color-white text-color-blue BotonSubirFoto">Subir Foto</a>
	  </div>
	</form>
	
	<div class="block block-strong row" id="DivFotosPedidos">
		<!-- Fotos -->
	</div>
	
	<div class="block block-strong row">
		<a href="#" class="col button button-big button-fill color-white text-color-blue link back">Cerrar</a>
	</div>
	
</div>

Hi!

You call MostrarCamara() before it´s prepare… so, MostrarCamara() you must call it after of the plugin is prepare.

QRScanner.show();	
QRScanner.scan(displayContents);

You can use console.

((Si es más fácil para ti, puedes usar el foro de preguntas en español))

Regards

Hi @Antonio_Lucero

I am having the same issue. Did you find the solution?

When scanner is opened make sure you set background-color: transparent for html, body, .views, .view, .page elements

1 Like

@Antonio_Lucero
Sabes como implementarlo en la última versión?
es decir en que archivo js y que nomenclatura debe de seguir?

I meet it too.
I use f7 5.0.4

<div id="framework7-root" class="framework7-root">
  <div class="view view-main">
    <div class="page page-previous" aria-hidden="true">1</div>
    <div class="page page-current"></div>
  </div>
</div>

when I set page-current background-color: transparent. the previous page will show on screen.

Now I must set all page elements display none.
Is there any prefer solutions?

I’ve added a custom qrscanner overlay div outside my #app container, and just toggle the custom overlay and #app container by adding an extra class to <body> whenever I start the QR scanner plugin. But as said before, this in fact has nothing to do with Framework7 in particular.

$('body').addClass('qrscanner-active');

In CSS it is like:

body.qrscanner-active {
  background: transparent;
}

body.qrscanner-active #app {
    display: none;
}

body.qrscanner-active #qr-overlay {
    display: block;
}
1 Like

@Tim
It shows black screen (does not shows camera preview but scans QR code correctly)

pageInit: function(){
$$('body').addClass('qrscanner-active');
QRScanner.show(function (status) {
      console.log(status)
 });
}

1.Console.log

showing:true
scanning:true

It depends on your html structure. I determined the necessary css changes by using the safari remote device inspector to my iPhone, and manually changing div’s until the camera view was visible.

Probably there is some div layer with black background, you should be able to find out by using the remote inspector.

Me salvaste! Una solución mucho más simple. Gracias!!