Building UWP Barcode Reader with C++/WinRT and JavaScript
This article shows how to use Dynamsoft C++ barcode reader SDK to create a Window runtime component, as well as how to use the WinRT component and JavaScript to build a UWP app on Windows 10.
Prerequisites
Building WinRT Component with C++ DLLs
Create a new Windows Runtime Component project by using the C++ template.
Open the properties of the Windows Runtime Component project to add the path of header files and library files, as well as add the input dependency.
According to the dependent libraries, change the build platform from Any CPU to x86 or x64.
Rename default class to BarcodeReader and add a new method DecodeFileStream().
BarcodeReader.h:
#pragma once
#include "DynamsoftBarcodeReader.h"
#include <wrl.h>
#include <robuffer.h>
using namespace Windows::Storage;
using namespace Windows::Storage::Streams;
using namespace Microsoft::WRL;
using namespace Platform;
namespace Dynamsoft
{
public ref class BarcodeReader sealed
{
public:
BarcodeReader();
Array<String^>^ DecodeFileStream(IBuffer^ pixelBuffer);
};
}
BarcodeReader.cpp:
#include "pch.h"
#include "BarcodeReader.h"
using namespace Dynamsoft;
using namespace Platform;
BarcodeReader::BarcodeReader()
{
}
byte* GetPointerToPixelData(IBuffer^ pixelBuffer, unsigned int *length)
{
if (length != nullptr)
{
*length = pixelBuffer->Length;
}
// Query the IBufferByteAccess interface.
ComPtr<IBufferByteAccess> bufferByteAccess;
reinterpret_cast<IInspectable*>(pixelBuffer)->QueryInterface(IID_PPV_ARGS(&bufferByteAccess));
// Retrieve the buffer data.
byte* pixels = nullptr;
bufferByteAccess->Buffer(&pixels);
return pixels;
}
Array<String^>^ BarcodeReader::DecodeFileStream(IBuffer ^ pixelBuffer)
{
CBarcodeReader reader;
reader.InitLicense("t0068NQAAACqUjZa21C+W7fRdPkf2FRFRr+QpfVC2tDsl/8t25TzYCNxl5s0OkuwFgEMGNfN95Z0HYQ55ROi1px9JqVAP7/c=");
unsigned int length = 0;
byte* buffer = GetPointerToPixelData(pixelBuffer, &length);
int ret = reader.DecodeFileInMemory(buffer, length, "");
STextResultArray *paryResult = NULL;
reader.GetAllTextResults(&paryResult);
Array<String^>^ results = ref new Array<String^>(paryResult->nResultsCount);
for (int i = 0; i < paryResult->nResultsCount; ++i) {
std::string s_str = std::string(paryResult->ppResults[i]->pszBarcodeText);
std::wstring wid_str = std::wstring(s_str.begin(), s_str.end());
const wchar_t* w_char = wid_str.c_str();
results->set(i, ref new String(w_char));
}
return results;
}
Build the project to generate Dynamsoft.winmd and Dynamsoft.dll.
Building a Simple UWP Barcode Reader in JavaScript
Create a new UWP project by using the JavaScript template.
Add the created Windows Runtime Component project as a reference.
Add a button and a div to index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>UWPBarcode</title>
<link href="css/default.css" rel="stylesheet" />
</head>
<body>
<h1>Dynamsoft Barcode Reader</h1>
<button type="button" id="fileinput">Load an image</button>
<div id="results"></div>
<script src="js/main.js"></script>
</body>
</html>
Use file picker to load an image from local disk, and call the native API to decode barcodes in main.js:
var reader = new Dynamsoft.BarcodeReader();
function readBarcode() {
var picker = new Windows.Storage.Pickers.FileOpenPicker();
picker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail;
picker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
picker.fileTypeFilter.append(".jpg");
picker.fileTypeFilter.append(".jpeg");
picker.fileTypeFilter.append(".png");
picker.pickSingleFileAsync().then(function(file) {
if (file != null) {
Windows.Storage.FileIO.readBufferAsync(file).then(function (buffer) {
let result = reader.decodeFileStream(buffer);
document.getElementById('results').innerHTML = JSON.stringify(result);
}
);
}
else {
document.getElementById('results').innerHTML = "Operation cancelled.";
}
});
}
document.getElementById('fileinput').addEventListener('click', readBarcode, false);
Add dependent native DLLs to the project and set “Copy always” as the build action.
Build and run the app.
