javascript - 在闪亮的应用程序中将 Editor QR Scanner 包装到 DT 中

Question

我正在尝试将 JavaScript QR Scanner 包装到闪亮的应用程序中。目标是在 DT 的可编辑单元格中包含 QR 码。以下博客 介绍了如何使用instascan库将 QR Scanner 制作成 DT。

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

我按照文章为闪亮（链接）打包 JavaScript 代码，但没有成功。

这里和闪亮应用程序中可编辑 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) {},
};

}));

标签： javascriptrshinyqr-codebarcode-scanner