1"use strict";(globalThis.webpackChunkwebsite=globalThis.webpackChunkwebsite||[]).push([[9289],{3197(e,t,n){n.r(t),n.d(t,{assets:()=>i,contentTitle:()=>o,default:()=>u,frontMatter:()=>s,metadata:()=>a,toc:()=>d});var a=n(7118),c=n(1085),r=n(1184);const s={tags:["React","JavaScript"],title:"barcode recognition in React",description:"barcode recognition in React",authors:"tsei",image:"https://github.com/tseijp.png",hide_table_of_contents:!1,date:new Date("2020-07-04T00:00:00.000Z")},o="barcode recognition in React",i={authorsImageUrls:[void 0]},d=[{value:"\u30b9\u30ad\u30e3\u30ca\u30fc\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9",id:"\u30b9\u30ad\u30e3\u30ca\u30fc\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9",level:2},{value:"Quagga\u306e\u521d\u671f\u5316\u3068\u8a8d\u8b58\u51e6\u7406",id:"quagga\u306e\u521d\u671f\u5316\u3068\u8a8d\u8b58\u51e6\u7406",level:2}];function l(e){const t={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.R)(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(t.p,{children:"REF"}),"\n",(0,c.jsxs)(t.ul,{children:["\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"https://codesandbox.io/s/quaggajs-on-react-eexx8",children:"Quagga.js on react - CodeSandbox"})}),"\n"]}),"\n",(0,c.jsxs)(t.p,{children:["React\u4e0a\u3067\u30d6\u30c3\u30af\u30ab\u30d0\u30fc\u306e\u30d0\u30fc\u30b3\u30fc\u30c9\u304b\u3089\u5546\u54c1\u306e\u753b\u50cf\u3092\u53d6\u5f97\u3059\u308b",(0,c.jsx)(t.a,{href:"https://github.com/tseijp/use-book",children:"\u30e9\u30a4\u30d6\u30e9\u30ea"}),"\u3092\u516c\u958b\u3057\u307e\u3057\u305f\u3002\nWeb\u3067\u30ab\u30e1\u30e9\u304b\u3089\u30d0\u30fc\u30b3\u30fc\u30c9\u3092\u8a8d\u8b58\u3057\u3066\u63a2\u7d22\u7d50\u679c\u306e\u4e00\u89a7\u3092\u8868\u793a\u3057\u307e\u3059\u3002\n",(0,c.jsx)(t.a,{href:"https://tsei.jp/hook/use-book",children:"\u30c7\u30e2"}),"\u3067\u7528\u3044\u305f\u30b3\u30fc\u30c9\u306f\u3001",(0,c.jsx)(t.a,{href:"https://tsei.jp/hook/use-book",children:"Github"}),"\u3067\u516c\u958b\u3057\u3066\u307e\u3059\u3002"]}),"\n",(0,c.jsx)(t.h2,{id:"\u30b9\u30ad\u30e3\u30ca\u30fc\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9",children:"\u30b9\u30ad\u30e3\u30ca\u30fc\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9"}),"\n",(0,c.jsxs)(t.p,{children:["\u958b\u59cb\u6642\u306b\u5b9f\u884c\u3059\u308b\u95a2\u6570",(0,c.jsx)(t.code,{children:"onStarted"}),"\u3068\u8a8d\u8b58\u5f8c\u306b\u5b9f\u884c\u3059\u308b\u95a2\u6570",(0,c.jsx)(t.code,{children:"onDetected"}),"\u306f\u3001\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089",(0,c.jsx)(t.code,{children:"props"}),"\u3068\u3057\u3066\u5165\u529b\u3057\u307e\u3059\u3002\n(\u518dRender\u3059\u308b\u3068\u3044\u304f\u3064\u3082\u958b\u59cb\u3057\u3066\u3057\u307e\u3046\u306e\u3067\u3001\u3053\u308c\u3089\u306e\u95a2\u6570\u306f",(0,c.jsx)(t.code,{children:"useRef"}),"\u5185\u3067\u518d\u5b9a\u7fa9\u3055\u305b\u307e\u3059.)\n",(0,c.jsx)(t.code,{children:"useEffect"}),"\u5185\u306e\u2460\u306b\u306fQuagga\u306e\u521d\u671f\u5316\u51e6\u7406\u3001\u2461\u306b\u306fQuagga\u304c\u30d0\u30fc\u30b3\u30fc\u30c9\u3092\u8a8d\u8b58\u3057\u305f\u969b\u306e\u51e6\u7406\u3092\u5f8c\u3067\u5165\u308c\u307e\u3059\u3002\n\u307e\u305f\u3001Canvas\u306b\u8a8d\u8b58\u7d50\u679c\u3092\u63cf\u5199\u3059\u308b\u95a2\u6570\u306e",(0,c.jsx)(t.code,{children:"drawPath()"}),", ",(0,c.jsx)(t.code,{children:"drawRect()"}),", ",(0,c.jsx)(t.code,{children:"clearRect()"}),"\u3092\u5b9a\u7fa9\u3057\u3066\u304a\u304d\u307e\u3059\u3002"]}),"\n",(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:"language-jsx",children:'import React, { useCallback, useEffect, useRef } from "react";\nimport config from "./config-camera.json";\nconst Quagga = require (\'quagga\');\n\nexport function Scanner ({onStarted, onDetected}) {\n const onStartedRef = useRef((bool)=>onStarted(bool))\n const onDetectedRef = useRef((code)=>onDetected(code))\n const drawPath = useCallback((path,ctx,xy,color) => Quagga.ImageDebug.drawPath(path,xy,ctx,{color,lineWidth:2}),[])\n const drawRect = useCallback((path,ctx,isMain) => drawPath(path,ctx,{x:0,y:1},isMain?\'#0F0\':"#00F"),[])\n const clearRect = useCallback((dom,ctx) => ctx.clearRect(0,0,...["width","height"].map(s=>Number(dom.getAttribute(s)))),[])\n\n useEffect ( () => {/*...\u2460...*/}, [] ) // \u5f8c\u8ff0\n useEffect( () => {/*...\u2461...*/}, [] ) // \u5f8c\u8ff0\n\n return <div id="interactive" className="viewport" style={{width:"100%",height:"100%"}}/>\n}\n'})}),"\n",(0,c.jsx)(t.h2,{id:"quagga\u306e\u521d\u671f\u5316\u3068\u8a8d\u8b58\u51e6\u7406",children:"Quagga\u306e\u521d\u671f\u5316\u3068\u8a8d\u8b58\u51e6\u7406"}),"\n",(0,c.jsxs)(t.p,{children:["\u30ab\u30e1\u30e9\u306e\u8d77\u52d5\u306f",(0,c.jsx)(t.code,{children:"Quagga.init()"}),"\u3092\u5b9f\u884c\u3057\u3066\u304b\u3089\u6570\u79d2\u9593\u304b\u304b\u308a\u307e\u3059\u3002\n\u8d77\u52d5\u3057\u305f\u304b\u3092",(0,c.jsx)(t.code,{children:"onStarted()"}),"\u3067\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u4f1d\u3048\u3001\u30ab\u30e1\u30e9\u304c\u958b\u59cb\u3057\u3066\u304b\u3089\u8868\u793a\u3055\u305b\u307e\u3059\u3002"]}),"\n",(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:"language-jsx",children:" useEffect (() => {/*...\u2460...*/\n Quagga.init(config, (err) => {\n if (err) return\n return (Quagga.start(), onStartedRef.current(true))\n })\n return ()=>(Quagga.stop(), onStartedRef.current(false))\n }, []);\n"})}),"\n",(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:"result.boxes"}),"\u3001",(0,c.jsx)(t.code,{children:"result.box"}),"\u306b\u306f\u30d0\u30fc\u30b3\u30fc\u30c9\u3092\u691c\u51fa\u3057\u305f\u60c5\u5831\u304c\u3042\u308b\u306e\u3067\u3001\u5834\u5408\u306b\u3088\u3063\u3066\u8272\u3092\u5909\u3048\u307e\u3059\u3002"]}),"\n",(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:"language-jsx",children:' useEffect(()=>{/*...\u2461...*/\n Quagga.onProcessed( (result) => {\n if (!result) return\n const ctx = Quagga.canvas.ctx.overlay\n const dom = Quagga.canvas.dom.overlay\n result.boxes && clearRect(dom, ctx)\n result.boxes.forEac
1h( box => drawRect(box,ctx,box===result.box) )\n result.codeResult && drawPath(result.line,ctx,{x:"x",y:"y"},"#F00")\n });\n Quagga.onDetected((result) => onDetectedRef.current(result.codeResult.code))\n }, [])\n'})}),"\n",(0,c.jsxs)(t.p,{children:["\u4ee5\u4e0a\u3067\u3001\u958b\u59cb\u3057\u305f\u3068\u304d\u3068\u8a8d\u8b58\u3057\u305f\u3068\u304d\u306b\u5b9f\u884c\u3059\u308b",(0,c.jsx)(t.code,{children:"onStarted, onDetected"}),"\u95a2\u6570\u3092\u5b9a\u7fa9\u3059\u308c\u3070\u3001\n",(0,c.jsx)(t.code,{children:"<Scanner {{...onStarted, onDetected}}/>"}),"\u306e\u3088\u3046\u306b\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002"]}),"\n",(0,c.jsx)(t.p,{children:"\u307e\u305f\u3001Quaggajs\u306fcanvas\u3092\u4f5c\u6210\u3059\u308b\u306e\u3067\u3001\u6b21\u306e\u69d8\u306aCSS\u3092\u5225\u3067\u7528\u610f\u3057\u3066\u304a\u304f\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002"}),"\n",(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:"language-css",children:"#interactive.viewport canvas.drawingBuffer,\n#interactive.viewport canvas, video {\n width:100%; height:auto;\n position:absolute; top:0; left:0;\n border-radius:2em 2em 0px;\n}\n"})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(l,{...e})}):l(e)}},1184(e,t,n){n.d(t,{R:()=>s,x:()=>o});var a=n(4041);const c={},r=a.createContext(c);function s(e){const t=a.useContext(r);return a.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:s(e.components),a.createElement(r.Provider,{value:t},e.children)}},7118(e){e.exports=JSON.parse('{"permalink":"/articles/2020/07/01/note/","editUrl":"https://github.com/tseijp/tseijp/tree/main/articles/../../articles/note/2020-07-01.md","source":"@site/../../articles/note/2020-07-01.md","title":"barcode recognition in React","description":"barcode recognition in React","date":"2020-07-04T00:00:00.000Z","tags":[{"inline":true,"label":"React","permalink":"/articles/tags/react"},{"inline":true,"label":"JavaScript","permalink":"/articles/tags/java-script"}],"hasTruncateMarker":true,"authors":[{"name":"tsei","url":"https://tsei.jp","email":"[email protected]","key":"tsei","page":null}],"frontMatter":{"tags":["React","JavaScript"],"title":"barcode recognition in React","description":"barcode recognition in React","authors":"tsei","image":"https://github.com/tseijp.png","hide_table_of_contents":false,"date":"2020-07-04T00:00:00.000Z"},"unlisted":false,"prevItem":{"title":"using media query in React","permalink":"/articles/2020/07/02/note/"},"nextItem":{"title":"Python vs JS","permalink":"/articles/2020/06/01/note/"}}')}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.