时间戳

首页 > 解决方案 > Scandit Websdk Javascript 设置方向

javascript - Scandit Websdk Javascript 设置方向

问题描述

我正在使用 scandit 进行我的 webapp 二维码扫描。一切正常，但我只是停留在如何设置 scandit-barcode-picker 的大小。我希望它在横向模式下占手机屏幕的一半。我找不到任何有关设置方向的文档。这是我初始化的方式。

HTML：

<div id="scandit-barcode-picker" style="max-height: 300px !important;"></div>

Javascript：

const licenseKey = SCANDIT_LICENSE;
let decoder;
ScanditSDK.configure(licenseKey, {
engineLocation: string = "https://cdn.jsdelivr.net/npm/scandit-sdk/build"
});

ScanditSDK.BarcodePicker.create(document.getElementById("scandit-barcode-picker"), {
    playSoundOnScan: true,
    vibrateOnScan: true,
}).then(function (barcodePicker) {
    decoder = barcodePicker;
    var scanSettings = new ScanditSDK.ScanSettings({
        enabledSymbologies: ["code128", "code39"],
        codeDuplicateFilter: 1000,
    });
    decoder.applyScanSettings(scanSettings);
    decoder.setPlaySoundOnScanEnabled(true);
    decoder.on("scan", function (scanResult) {
    barcode = scanResult.barcodes.pop();
    onScanned({
        format: ScanditSDK.Barcode.Symbology.toHumanizedName(barcode.symbology),
        code: barcode.data
    });
});
decoder.resumeScanning();
});

这是采取高度但也保持纵横比。它以纵向模式显示。我想要横向模式。请问有什么帮助吗？

标签： javascriptcamera

解决方案

免责声明：我为 Scandit 工作

WebSDK BarcodePicker 自动适应并适应给定的容器元素（在本例中为scandit-barcode-pickerdiv），因此您只需通过 CSS/JS 独立于库将您想要的任何样式逻辑应用于该元素。

为了实现您的目标，您可能需要类似的东西

@media screen and (orientation: landscape) {
  #scandit-barcode-picker {
    ...
  }
}

在你的风格。

推荐阅读