文档章节

如何用React, Webcam和JS Barcode SDK创建Web扫码App

yushulx
 yushulx
发布于 03/01 15:16
字数 726
阅读 28
收藏 0

这篇文章分享下如何结合React WebcamDynamsoft JavaScript Barcode SDK来创建Web扫码App。

Web实时扫码

从GitHub上下载react-webcam.js放到React工程中。 打开这个JS文件。在render()函数中添加一个buttoncanvas:

render() {
    return (
      <div id='videoview' width={this.props.width} height={this.props.height}>
        <button onClick={this.scanBarcode}>Scan Barcodes</button>
        <video
          autoPlay
          width={this.props.width}
          height={this.props.height}
          src={this.state.src}
          muted={this.props.audio}
          className={this.props.className}
          playsInline
          style={this.props.style}
          ref={(ref) => {
            this.video = ref;
          }}
        />
        <canvas id="overlay" width={this.props.width} height={this.props.height}></canvas>
      </div>
    );
  }

button用于触发扫码,canva用来绘制显示结果。为了让结果显示在video上方,创建一个react-webcam.css调整下布局:

#videoview {
    position: relative;
    width: 640px;
    height: 480px;
  }
 
#video {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1
}
 
#overlay {
    position: absolute;
    top: 100;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

react-webcam.js中导入这个CSS文件:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './react-webcam.css';

创建button的响应事件scanBarcode() 。函数触发时,先把video绘制到一个临时canvas上。然后得到图像数据传入barcode解码接口中:

scanBarcode() {
    if (window.reader) {
      let canvas = document.createElement('canvas');
      canvas.width = this.props.width;
      canvas.height = this.props.height
      let ctx = canvas.getContext('2d');
      ctx.drawImage(this.video, 0, 0, this.props.width, this.props.height);
     
      window.reader.decodeBuffer(
        ctx.getImageData(0, 0, canvas.width, canvas.height).data,
        canvas.width,
        canvas.height,
        canvas.width * 4,
        window.dynamsoft.BarcodeReader.EnumImagePixelFormat.IPF_ARGB_8888
      )
      .then((results) => {
        this.showResults(results);
      });
    }
     
  }

构造函数中需要绑定this。如果不绑定,thisbutton点击的时候无法使用:

constructor() {
    super();
    this.state = {
      hasUserMedia: false,
    };
 
    this.scanBarcode = this.scanBarcode.bind(this);
  }

扫描触发之后需要持续调用scanBarcode(),并把结果显示在video上:

showResults(results) {
    let context = this.clearOverlay();
    let txts = [];
    try {
      let localization;
      for (var i = 0; i < results.length; ++i) {
        if (results[i].LocalizationResult.ExtendedResultArray[0].Confidence >= 30) {
          txts.push(results[i].BarcodeText);
          localization = results[i].LocalizationResult;
          this.drawResult(context, localization, results[i].BarcodeText);
        }
      }
       
      this.scanBarcode();
       
    } catch (e) {
      this.scanBarcode();
    }
  }
 
clearOverlay() {
    let context = document.getElementById('overlay').getContext('2d');
    context.clearRect(0, 0, this.props.width, this.props.height);
    context.strokeStyle = '#ff0000';
    context.lineWidth = 5;
    return context;
  }
   
drawResult(context, localization, text) {
    context.beginPath();
    context.moveTo(localization.X1, localization.Y1);
    context.lineTo(localization.X2, localization.Y2);
    context.lineTo(localization.X3, localization.Y3);
    context.lineTo(localization.X4, localization.Y4);
    context.lineTo(localization.X1, localization.Y1);
    context.stroke();
   
    context.font = '18px Verdana';
    context.fillStyle = '#ff0000';
    let x = [ localization.X1, localization.X2, localization.X3, localization.X4 ];
    let y = [ localization.Y1, localization.Y2, localization.Y3, localization.Y4 ];
    x.sort(function(a, b) {
      return a - b;
    });
    y.sort(function(a, b) {
      return b - a;
    });
    let left = x[0];
    let top = y[0];
   
    context.fillText(text, left, top + 50);
  }

public/index.html中加载dbr-6.4.1.3.min.js文件,并创建可用于全局访问的window.reader

<body>
    <img src="loading.gif" style="margin-top:10px" id="anim-loading">
    <script src="https://demo.dynamsoft.com/dbr_wasm/js/dbr-6.4.1.3.min.js"></script>
    <script>
      dynamsoft.dbrEnv.resourcesPath = 'https://demo.dynamsoft.com/dbr_wasm/js';
      dynamsoft.dbrEnv.onAutoLoadWasmSuccess = function () {
        window.reader = new dynamsoft.BarcodeReader();
        window.dynamsoft = dynamsoft;
        document.getElementById('anim-loading').style.display = 'none';
      };
      dynamsoft.dbrEnv.onAutoLoadWasmError = function (ex) {
        document.getElementById('anim-loading').style.display = 'none';
        alert('Fail to load the wasm file.');
      };
      dynamsoft.dbrEnv.bUseWorker = true;
 
      // Get a free trial license from https://www.dynamsoft.com/CustomerPortal/Portal/TrialLicense.aspx
      dynamsoft.dbrEnv.licenseKey = "Your Barcode SDK License"
 
    </script>
    <div id="root"></div>

这里必须把dynamsoft.dbrEnv.bUseWorker设置成true。只有使用了web worker,主线程才不会因为条形码识别耗时而卡住。

App.js中添加React Webcam

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import {Barcode} from './Barcode';
import Webcam from './react-webcam';
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <Barcode/>
        <Webcam />
      </div>
    );
  }
}
 
export default App;

运行程序:

npm start

在浏览器中访问localhost:3000

源码

https://github.com/dynamsoft-dbr/javascript-barcode/tree/master/examples/react-wasm-barcode

© 著作权归作者所有

yushulx
粉丝 29
博文 109
码字总数 61815
作品 0
杭州
私信 提问
如何在React工程中使用JavaScript Barcode SDK创建Web条形码应用

基于WebAssembly构建的Dynamsoft JavaScript Barcode SDK让Web开发者能够创建适用于浏览器的高性能条码应用。这篇文章分享下如何使用快速创建一个简单的Web条形码扫描应用。 下载 Node.js 用...

yushulx
01/17
49
0
微信公众号开发纪要(4)-调用微信扫一扫功能

在微信公众号页面中调用微信扫一扫功能,就是调用微信JS-SDK。让JS-SDK完成调用摄像头扫描,然后我们将扫描结果进行业务操作。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页...

pdzhsy
2018/07/16
0
0
angular项目结合微信扫一扫的js换成ts

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/aiTCR/article/details/84504189 js: 在index.html 引入 在typings.d.ts定义: declare var wx:any; ts:装东...

TTcccCarrie
2018/11/25
0
0
PWA(Progressive Web App)是否会成为手机小程序和Native App终结者

什么是PWA PWA简单的说就是像Native App一样可以安装运行的Web程序。Native App通过app store安装,而PWA通过浏览器安装。 PWA的优势 PWA具备一切Web应用的特征。使用JS,CSS,HTML开发。可以被...

yushulx
04/15
62
0
轻松使用OpenCV Python控制Webcam,读取Barcode

虽然手机上Barcode应用已经非常流行,但是工作的时候还是用Webcam比较方便。比如需要检测Barcode,我只需要拿Webcam对着电脑屏幕或者纸张扫一下就可以了。今天分享下如何轻松使用OpenCV控制W...

yushulx
2015/08/11
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

从0开始学FreeRTOS-(列表&列表项)-6

FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像。 在FreeRTOS中,列表与列表项使用得非常多,是FreeRTOS的一个数...

杰杰1号
22分钟前
4
0
Java的23种设计模式,详细讲解(一)

一、概述 设计模式是解决问题的方案,学习现有的设计模式可以做到经验复用。 拥有设计模式词汇,在沟通时就能用更少的词汇来讨论,并且不需要了解底层细节。 二、创建型 1. 单例(Singleton...

李红欧巴
38分钟前
5
0
android 使用asynctask结合fragment更新UI(另附线程池管理示例)

https://blog.csdn.net/qq_16064871/article/details/70767949

shzwork
38分钟前
3
0
SpringCloud实现分库分表模式下,数据库实时扩容方案

本文源码:GitHub·点这里 || GitEE·点这里 一、项目结构 1、工程结构 2、模块命名 shard-common-entity: 公共代码块shard-open-inte: 开放接口管理shard-eureka-7001: ...

知了一笑
39分钟前
5
0
js--时间切割装换工具类

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 修改data原型对象Format方法 ......

zhengzhixiang
49分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部