My setup involves a video element and a canvas element as seen below:
<video id="video" width="640" height="480"></video>
<canvas id="canvas" width="640" height="480"></canvas>
The goal is to decode a PDF417 barcode from the webcam feed.
First, here's the code snippet to request permission to use the webcam:
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.srcObject = stream;
video.play();
});
}
Next, I attempt to capture the barcode using the camera and decode it:
canvas_context.drawImage(video, 0, 0, 640, 480);
try {
var source = new ZXing.BitmapLuminanceSource(canvas_context, video);
var binarizer = new ZXing.Common.HybridBinarizer(source);
var bitmap = new ZXing.BinaryBitmap(binarizer);
console.log(JSON.stringify(ZXing.PDF417.PDF417Reader.decode(bitmap, null, false), null, 4));
} catch (err) {
console.log(err);
}
However, an error occurs with the message:
Failed to execute 'getImageData' on 'CanvasRenderingContext2D': Value is not of type 'long'.
This error originates from this line of code:
var source = new ZXing.BitmapLuminanceSource(canvas_context, video);
Which points to the following method:
ZXing.BitmapLuminanceSource = function (bitmap, w, h) {
// The rest of the function remains the same
};
I'm seeking help in understanding what went wrong. Why am I encountering this error and how can it be resolved?