This article is also available here.(Japanese)
https://cloud.flect.co.jp/entry/2020/05/01/131657
In my previous posts, I showed you how to convert the image used in temas or zoom to Anime.
It’s a catchy story, so I was happy to get a decent response.
This time, I’m going to talk about barcode scanners and WASM, although they’re quite different.
Nowadays, with the spread of smart phones, anyone can access IT easily, so it is very important to improve the user experience.
I think one important way to improve the user experience is to provide a service that can be used without installing any special software.
You don’t want to put all this gibberish software on your smartphone.In order to avoid this installation, we may develop and provide software that runs on your smartphone’s browser.
On the other hand, software that runs on a browser generally has a degraded response performance when compared to native apps.Degradation of response performance directly affects the user experience, so in some cases the disadvantages may outweigh the advantages of running it in a browser.
One way around these problems is to use a technique called WebAssembly (wasm), which speeds up the software that runs in the browser.
In this issue, we’re going to talk about how we made a multi-barcode scanner that runs on a smartphone’s browser faster using WASM.
This is a result, my barcode scanner run pretty fast like this.
Multi barcodes scanner and wasm
The multi-barcode scanner is a technology that can read multiple barcodes by a smartphone’s camera at the same time.
One of the best known multi-barcode scanners is the MatrixScan from Swiss-based startup Scandit.
If you watch the linked video, you’ll understand it instantly, the response performance is fast. And the accuracy is high.
I vividly remember when I was about to start developing a multi-barcode scanner, I was so impressed with its response and accuracy that I almost broke my heart. What’s the point of developing your own?
However, this MatixScan is only supported by native apps (as of 4/30/2020) and is not supported by browsers. Another concern is that since it’s a paid service, you have to pay a license fee to integrate it into your service or product.
Not being able to subtly match my requirements like this, I decided to develop a fast, high performance multi-barcode scanner that runs on a smartphone’s browser as a software component that could be integrated by my own.
When it comes to developing your own multi-barcode scanner
There are several barcode scanners in the world that are provided with Javascript, so we will make use of OSS instead of building from scratch.
It’s just slower than the native app. When I was wondering how to make it faster, I found that EBAY had published a story about how they used WASM for barcode scanners to make it faster.
Using this as a reference, we also tried to speed up using WASM.
In the following, I will introduce the flow of the OSS barcode scanner library when it is converted to WASM and the evaluation of the response performance.
Make barcode scanner as wasm
The barcode scanner of OSS to be converted to WASM this time is zxing.
I chose this library for two reasons.
- I was using a Javascript version of the multi-barcode scanner that I had originally developed.
- Because there are alredy the repository that have the programs to convert the zxing library to WASM, so I thought the hurdle of introduction seems to be low.
Now, let’s move on to WASMization.
Basically, you can implement the content described in the readme of the above repository, but since the information is a little outdated, you need to modify some of it.
First, let’s set up the environment to create the WASM. If you already have the environment, please skip it.
The work will be cloned and built from the repository, but it’s almost automated, so you won’t have to worry about it.
See the official page for more information.
$ git clone https://github.com/emscripten-core/emsdk.git
$ cd emsdk
$ ./emsdk install latest
$ ./emsdk activate latest
$ source ./emsdk_env.shNext, create a clone from the repository of zxing’s WASMization.
I dare to describe the command for Linux here, because the official method describes the method for Windows version.
Also, the official method doesn’t work because the command is outdated, so it needs to be replaced.
$ git clone https://github.com/yushulx/zxing-cpp-emscripten
$ cd zxing-cpp-emscripten/build-wasm
$ sed -i.old s/emconfigure/emcmake/ configure.sh # このコマンド入れ替えが必要。(2020/4/30現在)
$ ./build.shNow, I think we’ve created two files, as shown below.
The following is a file of zxing that has been WASM’d.
$ ls zxing.*
zxing.js zxing.wasmIt’s very easy to do, isn’t it?
Evaluation for the performance
Let’s use this to see how much faster it will be.
In fact, this performance comparison has been published in the above repository, but the measurement environment was unknown, so the
This time, I’d like to measure it with the following two google smartphones: the Pixel3 and Pixel4.
Also, since zxing has the behavior of scanning and retrying several times if it doesn’t get a read, the
Barcodes that are easy to read and those that are hard to read will have different response performance. In addition, I think the response performance will vary depending on the size of the image.
So, this time, we evaluated the processing speed using the following two barcodes.
- The first one (Barcode01 below) is a barcode taken in an appropriate environment. (381px x 155px)
- The second one (Barcode02 below) is a clean barcode generated by OSS. (433px x 221px)
The results of the processing time for 1000 scans were as follows.
As for Barcode01, for both Pixel3 and 4, the approximate time for JS is 17–18 seconds, but for wasm, it is 4–6 seconds.
As for Barcode02, for both Pixel3 and 4, the approximate time for JS is 11 seconds, but for wasm, it is 3–4 seconds.
Based on this result, it can be said that the speed is roughly three to four times faster due to WASMization.
The fact that you can achieve this much speed by simply replacing the library is pretty appealing, and it’s no wonder that WASM is getting so much attention.
If you are interested in this program, please try it out at the following URL. (This is an experiment, so the making is rough.)
https://barcode-wasm-test.herokuapp.com/index.html
FInally
If you are interested in this program, please try it out at the following URL. (This is an experiment, so the making is rough.) This time, I’ve converted the barcode scanning library used by the multi-barcode scanner into a WASM.
As a result of scanning actual barcodes and evaluating the processing speed, it was found that a roughly three to four times faster speed can be expected with the use of WASM.
If this much performance improvement can be expected by simply replacing a library with a WASMized version of the same functionality, then
We may see more and more people thinking about going to WASM first as a measure against performance problems.
I think that WASMization is a very important technology for improving the user experience, so I’ll continue to keep a close eye on it.
Below is a demo of a multi-barcode scanner that runs on the browser of a smartphone incorporating this technology.
If you are interested, please get in touch with us.
You can scan at once, even if the orientation is different like this. (Taken with Pixel4)
