在闪亮的应用程序中将编辑器 QR 扫描仪包装成 DT

问题描述

我正在尝试将 JavaScript QR 扫描仪包装到闪亮的应用程序中。目标是在 DT 的可编辑单元格中包含二维码。下面的 blog 描述了如何使用 instascan 库将 QR Scanner 变成 DT。

是否可以直接使用博客中使用的JS代码在shiny app中自定义DT。

我按照文章为闪亮的 JavaScript 代码打包 (link) 没有成功。

此处和闪亮应用中可编辑 DT 的示例

library(shiny)
library(DT)
shinyApp(
  ui = fluidPage(
    DTOutput('x2')
  ),server = function(input,output,session) {
    x = head(iris)
    x$barCode = ""
    output$x2 = renderDT(x,editable = TRUE)
  }
)

将 instascan 库添加到 DT 的 JS 代码。

(function( factory ){
    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery','datatables','datatables-editor'],factory );
    }
    else if ( typeof exports === 'object' ) {
        // Node / Commonjs
        module.exports = function ($,dt) {
            if ( ! $ ) { $ = require('jquery'); }
            factory( $,dt || $.fn.dataTable || require('datatables') );
        };
    }
    else if ( jQuery ) {
        // browser standard
        factory( jQuery,jQuery.fn.dataTable );
    }
}(function( $,DataTable ) {
'use strict';


if ( ! DataTable.ext.editorFields ) {
    DataTable.ext.editorFields = {};
}
var _fieldTypes = DataTable.Editor
    ? DataTable.Editor.fieldTypes
    : DataTable.ext.editorFields;

_fieldTypes.qr = {
    create: function (conf) {
        // Section 1 - DOM setup
        var safeId = DataTable.Editor.safeId(conf.id);
        var video = $('<video/>').css({
            display: 'none','max-width': '100%',padding: '2% 0%',});
        var input = $('<input id="' + safeId + '"/>');
        var scan = $('<button>Scan</button>').css({ margin: '0% 1%' });
        var container = $('<div/>').append(input).append(scan).append(video);

        conf.qrInput = input;

        // Section 2 - Instascan setup
        var scanner = new Instascan.Scanner({ video: video[0] });
        scanner.addListener('scan',function (content) {
            input.val(content).css({ border: 'blue 2px solid' });
            video.css({ border: 'blue 2px solid' });

            setTimeout(() => {
                input.css({ border: 'none' });
                video.css({ border: 'none' });
            },500);
        });

        // Section 3 - Toggle control
        scan.on('click',function () {
            if (this.innerHTML === 'Scan') {
                Instascan.Camera.getCameras()
                    .then(function (cameras) {
                        if (cameras.length > 0) {
                            video.css({ display: 'block' });
                            scanner.start(cameras[0]);
                        } else {
                            console.error('No cameras found.');
                        }
                    })
                    .catch(function (e) {
                        console.error(e);
                    });

                this.innerHTML = 'Stop';
            } else if (this.innerHTML === 'Stop') {
                video.css({ display: 'none' });
                scanner.stop();
                this.innerHTML = 'Scan';
            }
        });

        // Section 4 - Close behavIoUr
        this.on('close',function () {
            video.css({ display: 'none' });
            scanner.stop();
            this.innerHTML = 'Scan';
        });

        return container;
    },get: function (conf) {
        return conf.qrInput.val();
    },set: function (conf,val) {
        conf.qrInput.val(val !== null ? val : '');
    },enable: function (conf) {},disable: function (conf) {},};

}));

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）