我正在尝试在Wordpress页面或弹出窗口中实现二维码扫描仪，因此当用户访问页面/弹出窗口链接时，他/她将能够扫描二维码。二维码基本上是一个wooccommerce产品的url，所以我希望只有在二维码是从我的网站生成的情况下，二维码扫描仪才能继续。其他不是从我的网站生成的二维码可以读取，但只显示URL或代码等信息，而无需重定向到URL。
场景是：我用二维码创建了一个wooccommerce产品，然后在restore中将二维码放在菜单/桌子上。用户将访问我的网站，打开二维码扫描仪页面，然后扫描二维码，他们将自动重定向到wooccommerce产品。如果二维码不是从我的网站生成的，它不会重定向，只是显示二维码内的信息。
我找到了这个WP插件，但它完全不起作用：https://github.com/eManagerNYC/QR-Code-Scanner
我发现了另一种使用html5 QRcode扫描仪的方法：https://github.com/dwa012/html5-qrcode
但它已经有4年的历史了，这款支持HTML5浏览器的JavaScript二维码扫描仪：https://github.com/jbialobr/JsQRScanner但我不知道如何安装或实现它。
将js目录中的所有文件放在服务器上。
将js脚本添加到您的页面中。
<script type="text/javascript" src="/js/jsqrscanner.nocache.js"></script>
创建一个scanner控件并将其附加到DOM中。
<script type="text/javascript">
function onQRCodeScanned(scannedText)
{
var scannedTextMemo = document.getElementById("scannedTextMemo");
if(scannedTextMemo)
{
scannedTextMemo.value = scannedText;
}
}
//this function will be called when JsQRScanner is ready to use
function JsQRScannerReady()
{
//create a new scanner passing to it a callback function that will be invoked when
//the scanner succesfully scan a QR code
var jbScanner = new JsQRScanner(onQRCodeScanned);
//reduce the size of analyzed images to increase performance on mobile devices
jbScanner.setSnapImageMaxSize(300);
var scannerParentElement = document.getElementById("scanner");
if(scannerParentElement)
{
//append the jbScanner to an existing DOM element
jbScanner.appendTo(scannerParentElement);
}
}
</script>
以自定义方式提供视频流：
<script type="text/javascript">
function onQRCodeScanned(scannedText)
{
var scannedTextMemo = document.getElementById("scannedTextMemo");
if(scannedTextMemo)
{
scannedTextMemo.value = scannedText;
}
}
//funtion returning a promise with a video stream
function provideVideoQQ()
{
return navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
var exCameras = [];
devices.forEach(function(device) {
if (device.kind === 'videoinput') {
exCameras.push(device.deviceId)
}
});
return Promise.resolve(exCameras);
}).then(function(ids){
if(ids.length === 0)
{
return Promise.reject('Could not find a webcam');
}
return navigator.mediaDevices.getUserMedia({
video: {
'optional': [{
'sourceId': ids.length === 1 ? ids[0] : ids[1]//this way QQ browser opens the rear camera
}]
}
});
});
}
//this function will be called when JsQRScanner is ready to use
function JsQRScannerReady()
{
//create a new scanner passing to it a callback function that will be invoked when
//the scanner succesfully scan a QR code
var jbScanner = new JsQRScanner(onQRCodeScanned, provideVideoQQ);
//reduce the size of analyzed images to increase performance on mobile devices
jbScanner.setSnapImageMaxSize(300);
var scannerParentElement = document.getElementById("scanner");
if(scannerParentElement)
{
//append the jbScanner to an existing DOM element
jbScanner.appendTo(scannerParentElement);
}
}
</script>
如果有人能帮助我如何在wordpress页面上实现这段代码，我将不胜感激。
这项工作归功于Chris Schmith
https://github.com/schmich该代码旨在提醒二维码扫描仪的内容。我对其进行了轻微修改，以在网络浏览器中显示二维码，而不是本地警告消息。
这种方法有效，它将在一个新的窗口选项卡中打开编码在QRCode中的URL链接，确保您从下载库
https://github.com/schmich/instascan/releases
如果你应该从上面的链接下载库，并在head标签中添加src of script标签，那么它100%有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
<style>
#preview{
width:500px;
height: 500px;
margin:0px auto;
}
</style>
</head>
<body>
<h1 style="color:blue">Scan your QRCode</h1>
<video id="preview"></video>
<script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
<script type="text/javascript">
var scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5, mirror: false });
scanner.addListener('scan',function(content){
window.location.href=content;
});
Instascan.Camera.getCameras().then(function (cameras){
if(cameras.length>0){
scanner.start(cameras[0]);
$('[name="options"]').on('change',function(){
if($(this).val()==1){
if(cameras[0]!=""){
scanner.start(cameras[0]);
}else{
alert('No Front camera found!');
}
}
});
}else{
console.error('No cameras found.');
alert('No cameras found.');
}
}).catch(function(e){
console.error(e);
});
</script>
<div class="btn-group btn-group-toggle mb-5" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" value="1" autocomplete="off" checked> Front Camera
</label>
</div>
</body>
</html>
要生成qrcode，您可以使用以下代码片段，
$qrcode=base_url()。'MPDF/MPDF/index'//您在此处的URL链接在'='将其分配给$qrcode 后会出现
$this->load->library('ciqrcode');
$params['data'] = $qrcode;
$params['level'] = 'H';
$params['size'] = 10;
$params['savename'] = FCPATH.'public/uploads/tes.png';
$this->ciqrcode->generate($params);