ZXing.NET 如何从 HTML5 视频中解码 PDF417 条形码？

Question

我试图使用jQuery/JavaScript和ZXing.NET从视频源解码PDF417条形码。

这是我的HTML代码：

<video id="video" width="800" height="800"></video>
<canvas id="canvas" width="800" height="800"></canvas>

这里有相机的 jQuery 代码以及调用 .NET 方法进行条形码调试的代码：

var video = document.getElementById('video');

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    const hdConstraints = {
        video: { width: { min: 1280 }, height: { min: 720 } }
    };

    navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
        video.srcObject = stream;
        video.play();
    });
}

$("#video").on("playing", function () {
    setInterval(function () { scanBarcode() }, 500);
});

function scanBarcode() {
    var video = document.getElementById('video');
    var canvas = document.getElementById('canvas');
    var canvas_context = canvas.getContext('2d');
    canvas_context.drawImage(video, 0, 0, 640, 480);
    var image = document.getElementById("canvas").toDataURL("image/png");
    image = image.replace('data:image/png;base64,', '');
    $.post("Home/OnScan", { imageData: image }, function (data, status) {
        console.log(data);
    });
}

正如您所看到的，我正在获取画布图像并将其传递给我的.NET方法。

这是我用来调试PDF417条形码的.NET方法：

public JsonResult OnScan(string imageData)
{
    BitmapImage bitmapImage = new BitmapImage();
    byte[] byteBuffer = Convert.FromBase64String(imageData);
    Bitmap bmp;
    using (var ms = new MemoryStream(byteBuffer))
    {
        bmp = new Bitmap(ms);
    }
    BarcodeReader reader = new BarcodeReader();
    DecodingOptions options = new DecodingOptions
    {
        TryHarder = true,
        PossibleFormats = new List<BarcodeFormat> { BarcodeFormat.PDF_417 }
    };
    reader.Options = options;
    var result = reader.Decode(bmp);
    return Json(result.Text, JsonRequestBehavior.AllowGet);
}

现在这仍然无法工作，但我记得当我在Xamarin.Forms中第一次尝试时，它也不起作用，直到我添加了CameraResolutionSelector选项：

var options = new MobileBarcodeScanningOptions
{
    TryHarder = true,
    CameraResolutionSelector = HandleCameraResolutionSelectorDelegate,
    PossibleFormats = new List<BarcodeFormat> { BarcodeFormat.PDF_417 },
};

这里是 HandleCameraResolutionSelectorDelegate 方法：

public CameraResolution HandleCameraResolutionSelectorDelegate(List<CameraResolution> availableResolutions)
{
    //Don't know if this will ever be null or empty
    if (availableResolutions == null || availableResolutions.Count < 1)
        return new CameraResolution() { Width = 800, Height = 600 };
    //Debugging revealed that the last element in the list
    //expresses the highest resolution. This could probably be more thorough.
    return availableResolutions[availableResolutions.Count - 1];
}

我开始怀疑相机的分辨率导致我的条形码无法扫描......另外，当我将BarcodeFormat更改为QR_CODE并扫描QR码时，它可以工作，但不能用于PDF417条形码。我做错了什么？

- user979331

---

请查看此链接：https://medium.com/@yushulx/building-html5-barcode-reader-with-pure-javascript-sdk-842391372818，以及 https://simpl.info/getusermedia/sources/ 中的示例。 - I_Al-thamary

Answer 1

我有一些类似于这个问题的实例，其中使用表面上良好的图像重建，但zxing无法按预期解码，而我无法确定原因。

尝试将PureBarcode = true放置将解决此问题。

DecodingOptions options = new DecodingOptions
{
    TryHarder = true,
    PossibleFormats = new List<BarcodeFormat> { BarcodeFormat.PDF_417 },
    PureBarcode = true,
    AutoRotate = true,
    TryInverted = true,
    CameraResolutionSelector = HandleCameraResolutionSelectorDelegate
};

CameraResolution HandleCameraResolutionSelectorDelegate(List<CameraResolution> availableResolutions)
{
    if (availableResolutions == null || availableResolutions.Count < 1)
        return new CameraResolution () { Width = 800, Height = 600 };   
    return availableResolutions [availableResolutions.Count - 1];
}

- Vignesh Kumar A

---

正如我在这个问题的其他答案中提到的那样，PureBarcode只应该在非常特殊的情况下使用，即几乎是合成条形码，并且周围只有一个白色区域。 - Michael