【发布时间】：2019-06-23 18:24:02
【问题描述】：
我正在尝试在我的 Wordpress 页面或弹出窗口中实现 QR 码扫描器，因此当用户访问页面/弹出窗口链接时，他/她将能够扫描 QR 码。 QR 码基本上是 woocommerce 产品 url，所以我希望 QR 码扫描仪仅在从我的网站生成 QR 码时继续。可以读取不是从我的网站生成的其他二维码，但仅显示 URL 或代码等信息，而无需重定向到 URL。
场景是：我使用 QR 码创建了一个 woocommerce 产品，然后我将 QR 码放置在 restoran 的菜单/表格上。用户将访问我的网站并打开二维码扫描仪页面，然后扫描二维码，他们将被自动重定向到 woocommerce 产品。如果二维码不是从我的网站生成的，它不会重定向，只会显示二维码内的信息。
我找到了这个 WP 插件，但它完全不起作用：https://github.com/eManagerNYC/QR-Code-Scanner
我从这里找到了另一种使用 html5 二维码扫描器的方法：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>
创建一个扫描器控件并将其附加到 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 页面上实现此代码，我们将不胜感激。
【问题讨论】：
-
你让它工作了吗？
标签： javascript php html html5-canvas