Oracle APEX 23.2中如何实现条码扫描功能？

一、利用APEX内置条码扫描支持（推荐） #

APEX 23.2已原生支持条码扫描，无需额外插件，操作步骤如下：

• 创建页面项（或Interactive Grid列），类型选择Text Field。
• 编辑项属性，找到Advanced -> Native Browser Features，开启Enable Barcode Scanner选项。
• 配置扫描后行为：可通过Dynamic Actions添加On Change事件，触发PL/SQL逻辑处理产品代码，比如查询产品信息并展示。

示例PL/SQL处理代码：

DECLARE
    v_product_name VARCHAR2(100);
BEGIN
    SELECT product_name INTO v_product_name
    FROM products
    WHERE product_code = :P1_SCANNED_CODE;
    
    :P1_PRODUCT_NAME := v_product_name;
EXCEPTION
    WHEN NO_DATA_FOUND THEN
        :P1_PRODUCT_NAME := '未找到该产品';
END;

二、使用APEX社区插件 #

若内置功能无法满足需求，可通过APEX应用商店安装免费条码扫描插件：

• 进入工作区，导航到App Builder -> Shared Components -> Plug-ins，搜索"Barcode Scanner"类插件并安装。
• 创建页面项，类型选择插件对应的扫描控件，配置支持的条码格式（如Code128、EAN13），设置扫描成功后自动填充到指定项或触发动态操作。

三、自定义JavaScript实现（基于浏览器API） #

无需依赖插件时，可使用现代浏览器支持的BarcodeDetector API手动实现：

1. 页面添加按钮和文本输入框（用于显示扫描结果）。
2. 添加按钮点击触发的Dynamic Action，执行以下JavaScript代码：

if ('BarcodeDetector' in window) {
    const barcodeDetector = new BarcodeDetector({ formats: ['code_128', 'ean_13', 'qr_code'] });
    
    navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
    .then(stream => {
        const video = document.createElement('video');
        video.srcObject = stream;
        video.play();
        
        const scanLoop = async () => {
            try {
                const barcodes = await barcodeDetector.detect(video);
                if (barcodes.length > 0) {
                    const scannedCode = barcodes[0].rawValue;
                    apex.item('P1_SCANNED_CODE').setValue(scannedCode);
                    stream.getTracks().forEach(track => track.stop());
                    apex.event.trigger(document, 'barcodeScanned');
                }
            } catch (err) {
                console.error('扫描出错:', err);
            }
            requestAnimationFrame(scanLoop);
        };
        scanLoop();
    })
    .catch(err => {
        alert('无法访问摄像头，请检查权限设置');
    });
} else {
    alert('当前浏览器不支持条码扫描，请更换现代浏览器');
}

3. 添加自定义事件barcodeScanned的Dynamic Action，执行PL/SQL逻辑处理扫描结果（同内置方案的示例代码）。

内容的提问来源于stack exchange，提问作者Moussa BOUNOUA