Pregunta:
Fecha: 04-10-2019 08:15:59
(En Español)
<div id="main">
<div id="header">
<p id="mp1">
</p>
</div>
<div id="mainbody" style="display: inline;">
<table class="tsel" border="0" width="100%">
<tbody><tr>
<td valign="top" align="center" width="50%">
<table class="tsel" border="0">
<tbody><tr>
<td><img class="selector" id="webcamimg" src="js/vid.png" onclick="setwebcam()" align="left" style="opacity: 1;"></td>
</tr>
<tr><td colspan="2" align="center"><br>
<div id="outdiv"><video id="v" autoplay=""></video></div></td></tr>
</tbody></table>
</td>
</tr>
<tr><td colspan="3" align="center">
</td></tr>
<tr><td colspan="3" align="center"><br>
<div id="result">
</div>
</td>
</tr>
</tbody></table>
</div>
<div id="footer">
</div>
</div>
<canvas id="qr-canvas" width="800" height="600" style="width: 800px; height: 600px;"></canvas>
<script type="text/javascript">load();</script>
</div>
<!-- content-wrapper ends -->
<!-- partial:partials/_footer.html -->
<footer class="footer">
<div class="container-fluid clearfix">
</div>
</footer>
la funcion javascript es esta:
var gCtx = null;
var gCanvas = null;
var c=0;
var stype=0;
var gUM=false;
var webkit=false;
var moz=false;
var v=null;
var imghtml='<div id="qrfile"><canvas id="out-canvas" width="320" height="240"></canvas>'+
'<div id="imghelp">drag and drop a QRCode here'+
'<br>or select a file'+
'<input type="file" onchange="handleFiles(this.files)"/>'+
'</div>'+
'</div>';
var vidhtml = '<video id="v" autoplay></video>';
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
if(files.length>0)
{
handleFiles(files);
}
else
if(dt.getData('URL'))
{
qrcode.decode(dt.getData('URL'));
}
}
function handleFiles(f)
{
var o=[];
for(var i =0;i<f.length;i++)
{
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);
qrcode.decode(e.target.result);
};
})(f[i]);
reader.readAsDataURL(f[i]);
}
}
function initCanvas(w,h)
{
gCanvas = document.getElementById("qr-canvas");
gCanvas.style.width = w + "px";
gCanvas.style.height = h + "px";
gCanvas.width = w;
gCanvas.height = h;
gCtx = gCanvas.getContext("2d");
gCtx.clearRect(0, 0, w, h);
}
function captureToCanvas() {
if(stype!=1)
return;
if(gUM)
{
try{
gCtx.drawImage(v,0,0);
try{
qrcode.decode();
}
catch(e){
console.log(e);
setTimeout(captureToCanvas, 500);
};
}
catch(e){
console.log(e);
setTimeout(captureToCanvas, 500);
};
}
}
function htmlEntities(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
function read(a)
{
var html="<br>";
if(a.indexOf("http://") === 0 || a.indexOf("https://") === 0)
html+="<a target='_blank' href='"+a+"'>"+a+"</a><br>";
html+="<b>"+htmlEntities(a)+"</b><br><br>";
document.getElementById("result").innerHTML=html;
}
function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
function success(stream)
{
v.srcObject = stream;
v.play();
gUM=true;
setTimeout(captureToCanvas, 500);
}
function error(error)
{
gUM=false;
return;
}
function load()
{
if(isCanvasSupported() && window.File && window.FileReader)
{
initCanvas(800, 600);
qrcode.callback = read;
document.getElementById("mainbody").style.display="inline";
setwebcam();
}
else
{
document.getElementById("mainbody").style.display="inline";
document.getElementById("mainbody").innerHTML='<p id="mp1">Lector de codigos QR</p><br>'+
'<br><p id="mp2">Lo lamentamos tu navegador no es Compatible</p><br><br>'+
'<p id="mp1">try <a href="http://www.mozilla.com/firefox"><img src="firefox.png"/></a> or <a href="http://chrome.google.com"><img src="chrome_logo.gif"/></a> or <a href="http://www.opera.com"><img src="Opera-logo.png"/></a></p>';
}
}
function setwebcam()
{
var options = true;
if(navigator.mediaDevices && navigator.mediaDevices.enumerateDevices)
{
try{
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
devices.forEach(function(device) {
if (device.kind === 'videoinput') {
if(device.label.toLowerCase().search("back") >-1)
options={'deviceId': {'exact':device.deviceId}, 'facingMode':'environment'} ;
}
console.log(device.kind + ": " + device.label +" id = " + device.deviceId);
});
setwebcam2(options);
});
}
catch(e)
{
console.log(e);
}
}
else{
console.log("no navigator.mediaDevices.enumerateDevices" );
setwebcam2(options);
}
}
function setwebcam2(options)
{
console.log(options);
document.getElementById("result").innerHTML="capturando";
if(stype==1)
{
setTimeout(captureToCanvas, 500);
return;
}
var n=navigator;
document.getElementById("outdiv").innerHTML = vidhtml;
v=document.getElementById("v");
if(n.mediaDevices.getUserMedia)
{
n.mediaDevices.getUserMedia({video: options, audio: false}).
then(function(stream){
success(stream);
}).catch(function(error){
error(error)
});
}
else
if(n.getUserMedia)
{
webkit=true;
n.getUserMedia({video: options, audio: false}, success, error);
}
else
if(n.webkitGetUserMedia)
{
webkit=true;
n.webkitGetUserMedia({video:options, audio: false}, success, error);
}
document.getElementById("qrimg").style.opacity=0.2;
document.getElementById("webcamimg").style.opacity=1.0;
stype=1;
setTimeout(captureToCanvas, 500);
}
function setimg()
{
document.getElementById("result").innerHTML="";
if(stype==2)
return;
document.getElementById("outdiv").innerHTML = imghtml;
//document.getElementById("qrimg").src="qrimg.png";
//document.getElementById("webcamimg").src="webcam2.png";
document.getElementById("qrimg").style.opacity=1.0;
document.getElementById("webcamimg").style.opacity=0.2;
var qrfile = document.getElementById("qrfile");
qrfile.addEventListener("dragenter", dragenter, false);
qrfile.addEventListener("dragover", dragover, false);
qrfile.addEventListener("drop", drop, false);
stype=2;
}
Lo que necesito es como asignar el codigo captado a un campo de texto y no al div con id "result" como en el codigo original.Gracias. Votos: -1 - Respuestas: 5 - Vistas: 9 Compartir en: Google Facebook Twitter LinkedIn Link
Leer Codigo QR[No resuelta]
Saludos, tengo que leer un codigo qr desde el celular, estoy tratando de implementar el ejemplo de webqr.com, :<div id="main">
<div id="header">
<p id="mp1">
</p>
</div>
<div id="mainbody" style="display: inline;">
<table class="tsel" border="0" width="100%">
<tbody><tr>
<td valign="top" align="center" width="50%">
<table class="tsel" border="0">
<tbody><tr>
<td><img class="selector" id="webcamimg" src="js/vid.png" onclick="setwebcam()" align="left" style="opacity: 1;"></td>
</tr>
<tr><td colspan="2" align="center"><br>
<div id="outdiv"><video id="v" autoplay=""></video></div></td></tr>
</tbody></table>
</td>
</tr>
<tr><td colspan="3" align="center">
</td></tr>
<tr><td colspan="3" align="center"><br>
<div id="result">
</div>
</td>
</tr>
</tbody></table>
</div>
<div id="footer">
</div>
</div>
<canvas id="qr-canvas" width="800" height="600" style="width: 800px; height: 600px;"></canvas>
<script type="text/javascript">load();</script>
</div>
<!-- content-wrapper ends -->
<!-- partial:partials/_footer.html -->
<footer class="footer">
<div class="container-fluid clearfix">
</div>
</footer>
la funcion javascript es esta:
var gCtx = null;
var gCanvas = null;
var c=0;
var stype=0;
var gUM=false;
var webkit=false;
var moz=false;
var v=null;
var imghtml='<div id="qrfile"><canvas id="out-canvas" width="320" height="240"></canvas>'+
'<div id="imghelp">drag and drop a QRCode here'+
'<br>or select a file'+
'<input type="file" onchange="handleFiles(this.files)"/>'+
'</div>'+
'</div>';
var vidhtml = '<video id="v" autoplay></video>';
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
if(files.length>0)
{
handleFiles(files);
}
else
if(dt.getData('URL'))
{
qrcode.decode(dt.getData('URL'));
}
}
function handleFiles(f)
{
var o=[];
for(var i =0;i<f.length;i++)
{
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);
qrcode.decode(e.target.result);
};
})(f[i]);
reader.readAsDataURL(f[i]);
}
}
function initCanvas(w,h)
{
gCanvas = document.getElementById("qr-canvas");
gCanvas.style.width = w + "px";
gCanvas.style.height = h + "px";
gCanvas.width = w;
gCanvas.height = h;
gCtx = gCanvas.getContext("2d");
gCtx.clearRect(0, 0, w, h);
}
function captureToCanvas() {
if(stype!=1)
return;
if(gUM)
{
try{
gCtx.drawImage(v,0,0);
try{
qrcode.decode();
}
catch(e){
console.log(e);
setTimeout(captureToCanvas, 500);
};
}
catch(e){
console.log(e);
setTimeout(captureToCanvas, 500);
};
}
}
function htmlEntities(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
function read(a)
{
var html="<br>";
if(a.indexOf("http://") === 0 || a.indexOf("https://") === 0)
html+="<a target='_blank' href='"+a+"'>"+a+"</a><br>";
html+="<b>"+htmlEntities(a)+"</b><br><br>";
document.getElementById("result").innerHTML=html;
}
function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
function success(stream)
{
v.srcObject = stream;
v.play();
gUM=true;
setTimeout(captureToCanvas, 500);
}
function error(error)
{
gUM=false;
return;
}
function load()
{
if(isCanvasSupported() && window.File && window.FileReader)
{
initCanvas(800, 600);
qrcode.callback = read;
document.getElementById("mainbody").style.display="inline";
setwebcam();
}
else
{
document.getElementById("mainbody").style.display="inline";
document.getElementById("mainbody").innerHTML='<p id="mp1">Lector de codigos QR</p><br>'+
'<br><p id="mp2">Lo lamentamos tu navegador no es Compatible</p><br><br>'+
'<p id="mp1">try <a href="http://www.mozilla.com/firefox"><img src="firefox.png"/></a> or <a href="http://chrome.google.com"><img src="chrome_logo.gif"/></a> or <a href="http://www.opera.com"><img src="Opera-logo.png"/></a></p>';
}
}
function setwebcam()
{
var options = true;
if(navigator.mediaDevices && navigator.mediaDevices.enumerateDevices)
{
try{
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
devices.forEach(function(device) {
if (device.kind === 'videoinput') {
if(device.label.toLowerCase().search("back") >-1)
options={'deviceId': {'exact':device.deviceId}, 'facingMode':'environment'} ;
}
console.log(device.kind + ": " + device.label +" id = " + device.deviceId);
});
setwebcam2(options);
});
}
catch(e)
{
console.log(e);
}
}
else{
console.log("no navigator.mediaDevices.enumerateDevices" );
setwebcam2(options);
}
}
function setwebcam2(options)
{
console.log(options);
document.getElementById("result").innerHTML="capturando";
if(stype==1)
{
setTimeout(captureToCanvas, 500);
return;
}
var n=navigator;
document.getElementById("outdiv").innerHTML = vidhtml;
v=document.getElementById("v");
if(n.mediaDevices.getUserMedia)
{
n.mediaDevices.getUserMedia({video: options, audio: false}).
then(function(stream){
success(stream);
}).catch(function(error){
error(error)
});
}
else
if(n.getUserMedia)
{
webkit=true;
n.getUserMedia({video: options, audio: false}, success, error);
}
else
if(n.webkitGetUserMedia)
{
webkit=true;
n.webkitGetUserMedia({video:options, audio: false}, success, error);
}
document.getElementById("qrimg").style.opacity=0.2;
document.getElementById("webcamimg").style.opacity=1.0;
stype=1;
setTimeout(captureToCanvas, 500);
}
function setimg()
{
document.getElementById("result").innerHTML="";
if(stype==2)
return;
document.getElementById("outdiv").innerHTML = imghtml;
//document.getElementById("qrimg").src="qrimg.png";
//document.getElementById("webcamimg").src="webcam2.png";
document.getElementById("qrimg").style.opacity=1.0;
document.getElementById("webcamimg").style.opacity=0.2;
var qrfile = document.getElementById("qrfile");
qrfile.addEventListener("dragenter", dragenter, false);
qrfile.addEventListener("dragover", dragover, false);
qrfile.addEventListener("drop", drop, false);
stype=2;
}
Lo que necesito es como asignar el codigo captado a un campo de texto y no al div con id "result" como en el codigo original.Gracias. Votos: -1 - Respuestas: 5 - Vistas: 9 Compartir en: Google Facebook Twitter LinkedIn Link
Respuestas:
-
Fecha: 07-10-2019 06:14:16 yo de ti me iria por la tecnologia react-native de facebook, un ejemplo simple podria ser este
import * as React from 'react'; import { Text, View, StyleSheet, Button } from 'react-native'; import Icon from 'react-native-vector-icons/FontAwesome'; import Constants from 'expo-constants'; import * as Permissions from 'expo-permissions'; import SQL from "./../components/SQL"; import { BarCodeScanner } from 'expo-barcode-scanner'; export default class BarcodeScannerExample extends React.Component { state = { hasCameraPermission: null, scanned: false, }; static navigationOptions = { title: 'Captura de QR', }; async componentWillMount() { SQL.InitDatabase(); } async componentDidMount() { this.getPermissionsAsync(); } getPermissionsAsync = async () => { const { status } = await Permissions.askAsync(Permissions.CAMERA); this.setState({ hasCameraPermission: status === 'granted' }); }; render() { const { hasCameraPermission, scanned } = this.state; if (hasCameraPermission === null) { return <Text>Accediendo a la Cámara</Text>; } if (hasCameraPermission === false) { return <Text>No se Tiene acceso a la cámara</Text>; } return ( <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'flex-end', }}> <BarCodeScanner onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned} style={StyleSheet.absoluteFillObject} /> {scanned && ( <Button title={'Volver A scanear'} onPress={() => this.setState({ scanned: false })} /> )} </View> ); } handleBarCodeScanned = ({ type, data }) => { this.setState({ scanned: true }); SQL.AddQr(data, type); }; }
Votos: 1 - Link respuesta -
Fecha: 07-10-2019 16:52:24 En ese caso crea un input con un id por ejemplo
<input id="qrResultText">
y cambia la funcion
function read(a) { var html="<br>"; if(a.indexOf("http://") === 0 || a.indexOf("https://") === 0) html+="<a target='_blank' href='"+a+"'>"+a+"</a><br>"; html+="<b>"+htmlEntities(a)+"</b><br><br>"; document.getElementById("result").innerHTML=html; }
agregando el id necesario es decir
document.getElementById('qrResultText').value = html
por supuesto es más complejo pero debería funcionar Votos: 1 - Link respuesta -
-
Fecha: 11-01-2021 07:17:47 @ Lograste resolver solo colocando el <input id="result">
Lo he cambiado así pero aún así no me aparece en la caja del input solo en consola. Votos: 0 - Link respuesta -
Fecha: 28-02-2021 18:11:03 Saludos, despúes de mucho tiempo me respondo a mí mismo,no es la solución a la librería que puse pero funciona muy bien se llama instascan primero agregan <script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
luego un campo en el que se copiará el código escaneado por ejemplo: <input type="text" class="form-control" name="codigo" id="codigo" placeholder="N° de guía Local">
y una etiqueta de tipo video para mostrar la cámara <video id="preview"></video>
el ejemplo en el que me basé se ejecuta automáticamente al ingresar a la página, yo lo mando a llamar con una función así que se pone un botón: <button class="btn btn-primary" type="button" onclick="escanear();">Escanear Código QR</button> y finalmente la función que hace la magia:
<script type="text/javascript">
function escanear() {
//$("#captura").css("display","block");
$("#codigo").focus();
let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
scanner.addListener('scan', function (content) {
// alert(content);
$("#codigo").val(content);
scanner.stop();
});
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 0) {
scanner.start(cameras[1]);
} else {
console.error('No cameras found.');
}
}).catch(function (e) {
console.error(e);
});
}
</script>
si alguien sabe cómo usar instascan para código de barras agradecería que me avisen. Votos: 0 - Link respuesta
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión