Dynamsoft vs Scandit: 基于WebAssembly的JavaScript Barcode SDK深度评测

如果你想开发基于浏览器的HTML5条形码扫描应用，你可以在Google首页中找到最好的JavaScript Barcode SDK.

Dynamsoft和Scandit这两家公司都开发了基于WebAssembly的条形码SDK，可以让Web应用的扫码性能接近原生应用。我们可以从hello world入手，来深度体验下这两个SDK之间的差异。

Hello World快速入门

Dynamsoft

网址：https://www.npmjs.com/package/dynamsoft-javascript-barcode

• 提供完整的示例代码
• 在没有license的情况下，依然可以识别，只是结果无法完整显示

• 所有摄像头使用默认逻辑。物体水平移动方向和笔记本内置摄像头画面方向相反
• 分辨率可选
• 默认支持所有主流类型的1D/2D条形码
• 默认识别多个条形码

Scandit

网址：https://www.npmjs.com/package/scandit-sdk

• 没有提供完整代码。用户需要逐段拷贝到HTML页面里
• 强制使用license。在没有license的情况下无任何反应和提示
• 对摄像头进行了判断。笔记本的内置摄像头做了镜像，物体运动方向和画面方向保持一致
• 没有可选分辨率
• 无默认条形码类型，不设置就无法使用
• 默认最多识别1个条形码

入门对比

Hello World Sample	Dynamsoft	Scandit
是否提供完整代码	是	否
无License可否运行	是	否
是否可以切换摄像头	是	是
是否可以选择分辨率	是	否
是否支持各种码型	是	否
是否支持多码识别	是	否

静态图片条形码识别

Dynamsoft

支持多种输入类型，接口非常丰富。

• decode(source: Blob | Buffer | ArrayBuffer | Uint8Array | Uint8ClampedArray | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | string): Promise<TextResult[]>
• decodeBase64String(base64: string): Promise<TextResult[]>
• decodeBuffer(buffer: Uint8Array | Uint8ClampedArray | ArrayBuffer | Blob | Buffer, width: number, height: number, stride: number, format: EnumImagePixelFormat, config?: any): Promise
• decodeUrl(url: string): Promise<TextResult[]>

参考文档：https://www.dynamsoft.com/help/Barcode-Reader-wasm/classes/barcodereader.html#decodebuffer

Scandit

只支持Uint8Array。必须先把数据通过HTML5的canvas解码之后才能调用接口识别，非常不方便。

• processImage(imageData: Uint8Array | HTMLImageElement, highQualitySingleFrameMode?: boolean): Promise

参考文档：https://docs.scandit.com/stable/web/classes/scanner.html

性能对比

为了统一测试条件，传入数据使用Uint8Array:

<input type="file" id="barcode-file" onchange="loadfile()" accept=".jpg,.jpeg,.png,.bmp" />

function loadfile() {
   
            let name = document.getElementById('barcode-file');
            var img = document.getElementById('image');

            var reader = new FileReader();
            reader.onload = function (evt) {
   
                img.onload = function () {
   
                    var canvas = document.createElement('canvas');
                    canvas.width = img.width;
                    canvas.height = img.height;
                    var context = canvas.getContext(