QR Code/Barcode Scanner Design using front end library – zxing

barcode reader

Moto for designing this post


I am a developer, in developer life some times RND situations will come. in that situations we will face more problems , to complete our requirement. in this case we will get frustration if you won’t get solutions.

Like in same case, i tried and developed this QR Code/ barcode scanner using front end library – zxing (zeebra crossing).

So Finally, here I developed and placed every step in case of barcode reader design using front end library. If more than one video input devices are available (for example front and back camera) the example shows how to read them and use a select to change the input device.



Demo Qr Code / Barcode – Scanner Application


find a code to scan Click below button to start scan
BARCODE1234

Note : Please focus your QR Code / Barcode in between highlighted area [corners].

If above scanner not working click below link for DEMO

QR Code / Barcode Scanner



Steps to design QR Code / Barcode-Scanner


Step-1

We have to dsign best view part for barcode reader.

.html
<div class="container barcode__container">
		
		<div class="demo__app">
			<h2>Demo QR Code / Barcode - Reader Application</h2>
			<hr>

			<div class="barcode__reader">
				<div class="barcode__reader-inner pr">
					<div class="barcode__place">
						<!-- Barcode info's-->
						<span class="info__barcode info__1">find a code to scan</span>
						<span class="info__barcode info__2">Click below button to start scan</span>

						<!-- Highlighted area corners parts-->
						<span class="corner br-h__lt"></span>
						<span class="corner br-h__lb"></span>
						<span class="corner br-h__rt"></span>
						<span class="corner br-h__rb"></span>

						<!-- Camera -->
						<video id="video"  class="video"   autoplay></video>

						<div class="diode">
				      		<div class="laser"></div>
				    	</div>

						<!-- group buttons-->
						<div class="btn__grp">
							<button class="btn btn-bg-1" id="startScan">Start Scan</button>
							<button class="btn btn-bg-2" id="resetScan">Reset</button>
						</div>
					</div>
					<!-- Barcode Result Display-->
					<div class="barcode__result">
						<label class="__lbl">Scanned Result</label>
						<div class="__result" id="__result">
							BARCODE1234
						</div>
					</div>

					<div class="barcode__tip">
						<p class="card-text">Note : Please focus your qr code/ barcode in between highlighted area [corners].</p>
					</div>

				</div>
			</div>
		</div>

		

	</div>


.CSS
.pr{
			position: relative;
		}
		.barcode__place {
		        border-radius: 10px;
			    background: #222;
			    margin: 10px;
			    padding: 10px;
			    position: relative;
			    width: 300px;
			    height: 300px;
			    margin: 0 auto;
			    overflow: hidden;
		}

		span.info__barcode {
		    position: absolute;
		    top: 10px;
		    padding: 5px 10px;
		    background: #525252;
		    border-radius: 5px;
		    left: 50%;
		    transform: translate(-50%,-50%);
		    color: #fff;
		}

		span.info__barcode.info__1 {
		    top: 12%;
		}

		span.info__barcode.info__2{
		    top: 50%;
		    width: 100%;
		    text-align: center;
		}
		.btn__grp {
		    background: dodgerblue;
		    position: absolute;
		    bottom: 0;
		    padding: 10px;
		    width: 100%;
		    left: 0;
		    text-align: center;
		    z-index: 1;
		}

		.btn {
		    padding: 5px;
		    border-radius: 5px;
		    border-color: transparent;
		    box-shadow: 0 2px 5px rgba(0,0,0);
		    min-width: 100px;
		    cursor: pointer;
		}

		.barcode__result {
		    padding: 10px;
		    position: relative;
		    width: 300px;
		    margin: 10px auto;
		    overflow: hidden;
		    display: none;
		}

		.__result {
		    background: #222;
		    color: #ffff;
		    font-weight: 500;
		    padding: 5px;
		    text-align: center;
		    font-size: 18px;
		    letter-spacing: 1px;
		}

		.barcode__tip {
		    text-align: center;
		    color: #b19c9c;
		    font-size: 10px;
		}

		span.corner {
		    position: absolute;
		    width: 25px;
		    height: 25px;
		    background: transparent;
		    border: 2px solid red;
		}

		span.corner.br-h__lt {left: 10px;top: 26%;border-right: none;border-bottom: none;}

		span.corner.br-h__lb {
		    bottom: 26%;
		    left: 10px;
		    border-right: none;
		    border-top: none;
		}

		span.corner.br-h__rt {
		    right: 10px;
		    top: 26%;
		    border-left: none;
		    border-bottom: none;
		}

		span.corner.br-h__rb {
		    right: 10px;
		    bottom: 26%;
		    border-left: none;
		    border-top: none;
		}

		
		p.card-text {
		    padding: 10px;
		    border-left: 5px solid #222;
		    background: #eaeaea;
		    border-radius: 5px;
		}

		

		.laser {
		    width: 150%;
		    margin-left: -25%;
		    background-color: tomato;
		    height: 1px;
		    position: absolute;
		    top: 28%;
		    z-index: 2;
		    box-shadow: 0 0 4px red;
		    animation: scanning 2s infinite;
		  }

		  .diode {
		    animation: beam .01s infinite;
		    display:none;
		  }
		  
		  
		@keyframes beam {
		  50% {
		    opacity: 0;
		  }
		}

		@keyframes scanning {
		  50% {
		    transform: translateY(140px);
		  }
		}

		video#video {
		    width: 100%;
		    height: 100%;
		    position: absolute;
		    top: 0;
		    bottom: 0;
		    left: 0;
		    right: 0;
		}
Step-2

Add barcode scanner js file to index.html and add zixing-latest js file to index.html

Download below files and include in to your project

Useful References

https://zxing-js.github.io/library/examples/multi-camera/

https://github.com/EdwardvanRaak/MaterialBarcodeScanner

https://github.com/vinayakmalik1999/Barcode_reader_PWA/tree/master/barcode-reader

https://serratus.github.io/quaggaJS/

Write a comment