[{"data":1,"prerenderedAt":6206},["ShallowReactive",2],{"navigation_docs":3,"-functions-use-barcode-detector":37,"-functions-use-barcode-detector-surround":6201},[4,9,20,32],{"title":5,"path":6,"stem":7,"icon":8},"Getting started","\u002Fgetting-started","0.getting-started","i-lucide-rocket",{"title":10,"icon":11,"path":12,"stem":13,"children":14,"page":19},"Functions","i-lucide-function-square","\u002Ffunctions","1.functions",[15],{"title":16,"path":17,"stem":18},"useBarcodeDetector","\u002Ffunctions\u002Fuse-barcode-detector","1.functions\u002F1.use-barcode-detector",false,{"title":21,"path":22,"stem":23,"children":24,"icon":27},"Nuxt","\u002Fnuxt","2.nuxt\u002F1.index",[25,28],{"title":26,"path":22,"stem":23,"icon":27},"Module","i-simple-icons-nuxtdotjs",{"title":29,"path":30,"stem":31,"icon":27},"Nuxt UI integration","\u002Fnuxt\u002Fnuxt-ui","2.nuxt\u002F2.nuxt-ui",{"title":33,"path":34,"stem":35,"icon":36},"Compatibility & polyfill","\u002Fcompatibility","3.compatibility","i-lucide-globe",{"id":38,"title":16,"body":39,"description":6195,"extension":6196,"links":6197,"meta":6198,"navigation":260,"path":17,"seo":6199,"stem":18,"__hash__":6200},"docs\u002F1.functions\u002F1.use-barcode-detector.md",{"type":40,"value":41,"toc":6170},"minimark",[42,46,58,94,111,134,139,144,147,706,716,720,731,939,943,949,1144,1148,1244,1248,1258,1469,1487,1491,1499,1640,1652,1738,1742,1923,1927,2084,2088,2097,2130,2134,2142,2362,2366,2552,2556,2565,2709,2713,2751,3411,3426,3550,3554,3690,3694,3829,3835,3898,3903,3914,3919,3943,4545,4739,5010,5015,5035,5364,5374,5722,5734,5835,5839,5855,5876,5882,5928,5932,5944,6166],[43,44,16],"h1",{"id":45},"usebarcodedetector",[47,48,49,50,57],"p",{},"Reactive wrapper around the ",[51,52,56],"a",{"href":53,"rel":54},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FAPI\u002FBarcode_Detection_API",[55],"nofollow","Barcode Detection API",".",[47,59,60,61,65,66,69,70,69,73,69,76,69,79,69,82,69,85,69,88,69,91,57],{},"Accepts any source ",[62,63,64],"code",{},"BarcodeDetector#detect"," understands: ",[62,67,68],{},"HTMLImageElement",", ",[62,71,72],{},"SVGImageElement",[62,74,75],{},"HTMLVideoElement",[62,77,78],{},"HTMLCanvasElement",[62,80,81],{},"ImageBitmap",[62,83,84],{},"OffscreenCanvas",[62,86,87],{},"VideoFrame",[62,89,90],{},"Blob",[62,92,93],{},"ImageData",[47,95,96,97,99,100,103,104,107,108,57],{},"For an ",[62,98,75],{}," source, manages a ",[62,101,102],{},"getUserMedia"," stream and runs detection on each animation frame. For any other source, runs detection whenever the source ref changes (with ",[62,105,106],{},"immediate: true",") or on demand via ",[62,109,110],{},"detect()",[112,113,114],"blockquote",{},[47,115,116,117,120,121,123,124,127,128,131,132,57],{},"The composable defaults to ",[62,118,119],{},"immediate: false",". Browsers (notably Safari\u002FiOS) require a user gesture for ",[62,122,102],{}," and ",[62,125,126],{},"video.play()",", so call ",[62,129,130],{},"start()"," from a click handler. For non-video sources you can opt back into auto-detect with ",[62,133,106],{},[135,136,138],"h2",{"id":137},"usage","Usage",[140,141,143],"h3",{"id":142},"demo","Demo",[47,145,146],{},"Point a camera at any QR code or supported barcode. Detected polygons are drawn over the live feed and listed below.",[148,149,150,153],"code-preview",{},[151,152],"use-barcode-detector-demo",{},[154,155,157],"template",{"v-slot:code":156},"",[158,159,163],"pre",{"className":160,"code":161,"language":162,"meta":156,"style":156},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue'\nimport { BarcodeDetectorOverlay, useBarcodeDetector } from '@orbisk\u002Fvue-use-barcode-detection'\n\nconst video = useTemplateRef\u003CHTMLVideoElement>('video')\nconst { isSupported, supportedFormats, detected, error, isActive, start, stop } =\n useBarcodeDetector(video)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cp v-if=\"!isSupported\">\u003Ccode>BarcodeDetector\u003C\u002Fcode> is not available.\u003C\u002Fp>\n \u003Cp v-if=\"error\">{{ error.message }}\u003C\u002Fp>\n\n \u003Cdiv class=\"stage\">\n \u003Cvideo ref=\"video\" playsinline muted \u002F>\n \u003CBarcodeDetectorOverlay :detected=\"detected\" :source=\"video\" \u002F>\n \u003C\u002Fdiv>\n\n \u003Cbutton @click=\"isActive ? stop() : start()\">\n {{ isActive ? 'Stop' : 'Start camera' }}\n \u003C\u002Fbutton>\n\n \u003Cul>\n \u003Cli v-for=\"(b, i) in detected\" :key=\"i\">\n \u003Cstrong>{{ b.format }}\u003C\u002Fstrong> — \u003Ccode>{{ b.rawValue }}\u003C\u002Fcode>\n \u003C\u002Fli>\n \u003C\u002Ful>\n\u003C\u002Ftemplate>\n","vue",[62,164,165,200,228,255,262,298,344,353,363,368,377,422,451,456,478,506,539,549,554,576,582,591,596,606,640,678,688,697],{"__ignoreMap":156},[166,167,170,174,178,182,185,188,191,195,197],"span",{"class":168,"line":169},"line",1,[166,171,173],{"class":172},"sMK4o","\u003C",[166,175,177],{"class":176},"swJcz","script",[166,179,181],{"class":180},"spNyl"," setup",[166,183,184],{"class":180}," lang",[166,186,187],{"class":172},"=",[166,189,190],{"class":172},"\"",[166,192,194],{"class":193},"sfazB","ts",[166,196,190],{"class":172},[166,198,199],{"class":172},">\n",[166,201,203,207,210,214,217,220,223,225],{"class":168,"line":202},2,[166,204,206],{"class":205},"s7zQu","import",[166,208,209],{"class":172}," {",[166,211,213],{"class":212},"sTEyZ"," useTemplateRef",[166,215,216],{"class":172}," }",[166,218,219],{"class":205}," from",[166,221,222],{"class":172}," '",[166,224,162],{"class":193},[166,226,227],{"class":172},"'\n",[166,229,231,233,235,238,241,244,246,248,250,253],{"class":168,"line":230},3,[166,232,206],{"class":205},[166,234,209],{"class":172},[166,236,237],{"class":212}," BarcodeDetectorOverlay",[166,239,240],{"class":172},",",[166,242,243],{"class":212}," useBarcodeDetector",[166,245,216],{"class":172},[166,247,219],{"class":205},[166,249,222],{"class":172},[166,251,252],{"class":193},"@orbisk\u002Fvue-use-barcode-detection",[166,254,227],{"class":172},[166,256,258],{"class":168,"line":257},4,[166,259,261],{"emptyLinePlaceholder":260},true,"\n",[166,263,265,268,271,273,276,278,281,284,287,290,293,295],{"class":168,"line":264},5,[166,266,267],{"class":180},"const",[166,269,270],{"class":212}," video ",[166,272,187],{"class":172},[166,274,213],{"class":275},"s2Zo4",[166,277,173],{"class":172},[166,279,75],{"class":280},"sBMFI",[166,282,283],{"class":172},">",[166,285,286],{"class":212},"(",[166,288,289],{"class":172},"'",[166,291,292],{"class":193},"video",[166,294,289],{"class":172},[166,296,297],{"class":212},")\n",[166,299,301,303,305,308,310,313,315,318,320,323,325,328,330,333,335,338,341],{"class":168,"line":300},6,[166,302,267],{"class":180},[166,304,209],{"class":172},[166,306,307],{"class":212}," isSupported",[166,309,240],{"class":172},[166,311,312],{"class":212}," supportedFormats",[166,314,240],{"class":172},[166,316,317],{"class":212}," detected",[166,319,240],{"class":172},[166,321,322],{"class":212}," error",[166,324,240],{"class":172},[166,326,327],{"class":212}," isActive",[166,329,240],{"class":172},[166,331,332],{"class":212}," start",[166,334,240],{"class":172},[166,336,337],{"class":212}," stop ",[166,339,340],{"class":172},"}",[166,342,343],{"class":172}," =\n",[166,345,347,350],{"class":168,"line":346},7,[166,348,349],{"class":275}," useBarcodeDetector",[166,351,352],{"class":212},"(video)\n",[166,354,356,359,361],{"class":168,"line":355},8,[166,357,358],{"class":172},"\u003C\u002F",[166,360,177],{"class":176},[166,362,199],{"class":172},[166,364,366],{"class":168,"line":365},9,[166,367,261],{"emptyLinePlaceholder":260},[166,369,371,373,375],{"class":168,"line":370},10,[166,372,173],{"class":172},[166,374,154],{"class":176},[166,376,199],{"class":172},[166,378,380,383,385,388,390,392,395,397,400,402,404,407,409,411,413,416,418,420],{"class":168,"line":379},11,[166,381,382],{"class":172}," \u003C",[166,384,47],{"class":176},[166,386,387],{"class":180}," v-if",[166,389,187],{"class":172},[166,391,190],{"class":172},[166,393,394],{"class":193},"!isSupported",[166,396,190],{"class":172},[166,398,399],{"class":172},">\u003C",[166,401,62],{"class":176},[166,403,283],{"class":172},[166,405,406],{"class":212},"BarcodeDetector",[166,408,358],{"class":172},[166,410,62],{"class":176},[166,412,283],{"class":172},[166,414,415],{"class":212}," is not available.",[166,417,358],{"class":172},[166,419,47],{"class":176},[166,421,199],{"class":172},[166,423,425,427,429,431,433,435,438,440,442,445,447,449],{"class":168,"line":424},12,[166,426,382],{"class":172},[166,428,47],{"class":176},[166,430,387],{"class":180},[166,432,187],{"class":172},[166,434,190],{"class":172},[166,436,437],{"class":193},"error",[166,439,190],{"class":172},[166,441,283],{"class":172},[166,443,444],{"class":212},"{{ error.message }}",[166,446,358],{"class":172},[166,448,47],{"class":176},[166,450,199],{"class":172},[166,452,454],{"class":168,"line":453},13,[166,455,261],{"emptyLinePlaceholder":260},[166,457,459,461,464,467,469,471,474,476],{"class":168,"line":458},14,[166,460,382],{"class":172},[166,462,463],{"class":176},"div",[166,465,466],{"class":180}," class",[166,468,187],{"class":172},[166,470,190],{"class":172},[166,472,473],{"class":193},"stage",[166,475,190],{"class":172},[166,477,199],{"class":172},[166,479,481,484,486,489,491,493,495,497,500,503],{"class":168,"line":480},15,[166,482,483],{"class":172}," \u003C",[166,485,292],{"class":176},[166,487,488],{"class":180}," ref",[166,490,187],{"class":172},[166,492,190],{"class":172},[166,494,292],{"class":193},[166,496,190],{"class":172},[166,498,499],{"class":180}," playsinline",[166,501,502],{"class":180}," muted",[166,504,505],{"class":172}," \u002F>\n",[166,507,509,511,514,517,519,521,524,526,529,531,533,535,537],{"class":168,"line":508},16,[166,510,483],{"class":172},[166,512,513],{"class":176},"BarcodeDetectorOverlay",[166,515,516],{"class":180}," :detected",[166,518,187],{"class":172},[166,520,190],{"class":172},[166,522,523],{"class":193},"detected",[166,525,190],{"class":172},[166,527,528],{"class":180}," :source",[166,530,187],{"class":172},[166,532,190],{"class":172},[166,534,292],{"class":193},[166,536,190],{"class":172},[166,538,505],{"class":172},[166,540,542,545,547],{"class":168,"line":541},17,[166,543,544],{"class":172}," \u003C\u002F",[166,546,463],{"class":176},[166,548,199],{"class":172},[166,550,552],{"class":168,"line":551},18,[166,553,261],{"emptyLinePlaceholder":260},[166,555,557,559,562,565,567,569,572,574],{"class":168,"line":556},19,[166,558,382],{"class":172},[166,560,561],{"class":176},"button",[166,563,564],{"class":180}," @click",[166,566,187],{"class":172},[166,568,190],{"class":172},[166,570,571],{"class":193},"isActive ? stop() : start()",[166,573,190],{"class":172},[166,575,199],{"class":172},[166,577,579],{"class":168,"line":578},20,[166,580,581],{"class":212}," {{ isActive ? 'Stop' : 'Start camera' }}\n",[166,583,585,587,589],{"class":168,"line":584},21,[166,586,544],{"class":172},[166,588,561],{"class":176},[166,590,199],{"class":172},[166,592,594],{"class":168,"line":593},22,[166,595,261],{"emptyLinePlaceholder":260},[166,597,599,601,604],{"class":168,"line":598},23,[166,600,382],{"class":172},[166,602,603],{"class":176},"ul",[166,605,199],{"class":172},[166,607,609,611,614,617,619,621,624,626,629,631,633,636,638],{"class":168,"line":608},24,[166,610,483],{"class":172},[166,612,613],{"class":176},"li",[166,615,616],{"class":180}," v-for",[166,618,187],{"class":172},[166,620,190],{"class":172},[166,622,623],{"class":193},"(b, i) in detected",[166,625,190],{"class":172},[166,627,628],{"class":180}," :key",[166,630,187],{"class":172},[166,632,190],{"class":172},[166,634,635],{"class":193},"i",[166,637,190],{"class":172},[166,639,199],{"class":172},[166,641,643,646,649,651,654,656,658,660,663,665,667,669,672,674,676],{"class":168,"line":642},25,[166,644,645],{"class":172}," \u003C",[166,647,648],{"class":176},"strong",[166,650,283],{"class":172},[166,652,653],{"class":212},"{{ b.format }}",[166,655,358],{"class":172},[166,657,648],{"class":176},[166,659,283],{"class":172},[166,661,662],{"class":212}," — ",[166,664,173],{"class":172},[166,666,62],{"class":176},[166,668,283],{"class":172},[166,670,671],{"class":212},"{{ b.rawValue }}",[166,673,358],{"class":172},[166,675,62],{"class":176},[166,677,199],{"class":172},[166,679,681,684,686],{"class":168,"line":680},26,[166,682,683],{"class":172}," \u003C\u002F",[166,685,613],{"class":176},[166,687,199],{"class":172},[166,689,691,693,695],{"class":168,"line":690},27,[166,692,544],{"class":172},[166,694,603],{"class":176},[166,696,199],{"class":172},[166,698,700,702,704],{"class":168,"line":699},28,[166,701,358],{"class":172},[166,703,154],{"class":176},[166,705,199],{"class":172},[47,707,708,709,715],{},"Prefer the ",[51,710,712],{"href":711},"#component",[62,713,714],{},"\u003CUseBarcodeDetector \u002F>"," component below if you want the same thing in one tag, with the overlay built in.",[140,717,719],{"id":718},"live-camera","Live camera",[47,721,722,724,725,727,728,730],{},[62,723,130],{}," must be called from a user gesture (e.g. a button click) so Safari\u002FiOS will accept the ",[62,726,102],{}," + ",[62,729,126],{}," calls.",[158,732,734],{"className":160,"code":733,"language":162,"meta":156,"style":156},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue'\nimport { useBarcodeDetector } from '@orbisk\u002Fvue-use-barcode-detection'\n\nconst video = useTemplateRef\u003CHTMLVideoElement>('video')\nconst { isSupported, detected, error, isActive, start, stop } = useBarcodeDetector(video)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cvideo ref=\"video\" playsinline muted \u002F>\n \u003Cbutton @click=\"isActive ? stop() : start()\">\n {{ isActive ? 'Stop' : 'Start camera' }}\n \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[62,735,736,756,774,792,796,822,859,867,871,879,901,919,923,931],{"__ignoreMap":156},[166,737,738,740,742,744,746,748,750,752,754],{"class":168,"line":169},[166,739,173],{"class":172},[166,741,177],{"class":176},[166,743,181],{"class":180},[166,745,184],{"class":180},[166,747,187],{"class":172},[166,749,190],{"class":172},[166,751,194],{"class":193},[166,753,190],{"class":172},[166,755,199],{"class":172},[166,757,758,760,762,764,766,768,770,772],{"class":168,"line":202},[166,759,206],{"class":205},[166,761,209],{"class":172},[166,763,213],{"class":212},[166,765,216],{"class":172},[166,767,219],{"class":205},[166,769,222],{"class":172},[166,771,162],{"class":193},[166,773,227],{"class":172},[166,775,776,778,780,782,784,786,788,790],{"class":168,"line":230},[166,777,206],{"class":205},[166,779,209],{"class":172},[166,781,243],{"class":212},[166,783,216],{"class":172},[166,785,219],{"class":205},[166,787,222],{"class":172},[166,789,252],{"class":193},[166,791,227],{"class":172},[166,793,794],{"class":168,"line":257},[166,795,261],{"emptyLinePlaceholder":260},[166,797,798,800,802,804,806,808,810,812,814,816,818,820],{"class":168,"line":264},[166,799,267],{"class":180},[166,801,270],{"class":212},[166,803,187],{"class":172},[166,805,213],{"class":275},[166,807,173],{"class":172},[166,809,75],{"class":280},[166,811,283],{"class":172},[166,813,286],{"class":212},[166,815,289],{"class":172},[166,817,292],{"class":193},[166,819,289],{"class":172},[166,821,297],{"class":212},[166,823,824,826,828,830,832,834,836,838,840,842,844,846,848,850,852,855,857],{"class":168,"line":300},[166,825,267],{"class":180},[166,827,209],{"class":172},[166,829,307],{"class":212},[166,831,240],{"class":172},[166,833,317],{"class":212},[166,835,240],{"class":172},[166,837,322],{"class":212},[166,839,240],{"class":172},[166,841,327],{"class":212},[166,843,240],{"class":172},[166,845,332],{"class":212},[166,847,240],{"class":172},[166,849,337],{"class":212},[166,851,340],{"class":172},[166,853,854],{"class":172}," =",[166,856,243],{"class":275},[166,858,352],{"class":212},[166,860,861,863,865],{"class":168,"line":346},[166,862,358],{"class":172},[166,864,177],{"class":176},[166,866,199],{"class":172},[166,868,869],{"class":168,"line":355},[166,870,261],{"emptyLinePlaceholder":260},[166,872,873,875,877],{"class":168,"line":365},[166,874,173],{"class":172},[166,876,154],{"class":176},[166,878,199],{"class":172},[166,880,881,883,885,887,889,891,893,895,897,899],{"class":168,"line":370},[166,882,382],{"class":172},[166,884,292],{"class":176},[166,886,488],{"class":180},[166,888,187],{"class":172},[166,890,190],{"class":172},[166,892,292],{"class":193},[166,894,190],{"class":172},[166,896,499],{"class":180},[166,898,502],{"class":180},[166,900,505],{"class":172},[166,902,903,905,907,909,911,913,915,917],{"class":168,"line":379},[166,904,382],{"class":172},[166,906,561],{"class":176},[166,908,564],{"class":180},[166,910,187],{"class":172},[166,912,190],{"class":172},[166,914,571],{"class":193},[166,916,190],{"class":172},[166,918,199],{"class":172},[166,920,921],{"class":168,"line":424},[166,922,581],{"class":212},[166,924,925,927,929],{"class":168,"line":453},[166,926,544],{"class":172},[166,928,561],{"class":176},[166,930,199],{"class":172},[166,932,933,935,937],{"class":168,"line":458},[166,934,358],{"class":172},[166,936,154],{"class":176},[166,938,199],{"class":172},[140,940,942],{"id":941},"static-image","Static image",[47,944,945,946,948],{},"Image \u002F blob \u002F canvas sources have no autoplay concerns, so opt back into auto-detect with ",[62,947,106],{}," to scan as soon as the source is ready.",[158,950,952],{"className":160,"code":951,"language":162,"meta":156,"style":156},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue'\nimport { useBarcodeDetector } from '@orbisk\u002Fvue-use-barcode-detection'\n\nconst img = useTemplateRef\u003CHTMLImageElement>('img')\nconst { detected } = useBarcodeDetector(img, { immediate: true })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cimg ref=\"img\" src=\"\u002Fbarcode.png\" alt=\"\" \u002F>\n\u003C\u002Ftemplate>\n",[62,953,954,974,992,1010,1014,1042,1078,1086,1090,1098,1136],{"__ignoreMap":156},[166,955,956,958,960,962,964,966,968,970,972],{"class":168,"line":169},[166,957,173],{"class":172},[166,959,177],{"class":176},[166,961,181],{"class":180},[166,963,184],{"class":180},[166,965,187],{"class":172},[166,967,190],{"class":172},[166,969,194],{"class":193},[166,971,190],{"class":172},[166,973,199],{"class":172},[166,975,976,978,980,982,984,986,988,990],{"class":168,"line":202},[166,977,206],{"class":205},[166,979,209],{"class":172},[166,981,213],{"class":212},[166,983,216],{"class":172},[166,985,219],{"class":205},[166,987,222],{"class":172},[166,989,162],{"class":193},[166,991,227],{"class":172},[166,993,994,996,998,1000,1002,1004,1006,1008],{"class":168,"line":230},[166,995,206],{"class":205},[166,997,209],{"class":172},[166,999,243],{"class":212},[166,1001,216],{"class":172},[166,1003,219],{"class":205},[166,1005,222],{"class":172},[166,1007,252],{"class":193},[166,1009,227],{"class":172},[166,1011,1012],{"class":168,"line":257},[166,1013,261],{"emptyLinePlaceholder":260},[166,1015,1016,1018,1021,1023,1025,1027,1029,1031,1033,1035,1038,1040],{"class":168,"line":264},[166,1017,267],{"class":180},[166,1019,1020],{"class":212}," img ",[166,1022,187],{"class":172},[166,1024,213],{"class":275},[166,1026,173],{"class":172},[166,1028,68],{"class":280},[166,1030,283],{"class":172},[166,1032,286],{"class":212},[166,1034,289],{"class":172},[166,1036,1037],{"class":193},"img",[166,1039,289],{"class":172},[166,1041,297],{"class":212},[166,1043,1044,1046,1048,1051,1053,1055,1057,1060,1062,1064,1067,1070,1074,1076],{"class":168,"line":300},[166,1045,267],{"class":180},[166,1047,209],{"class":172},[166,1049,1050],{"class":212}," detected ",[166,1052,340],{"class":172},[166,1054,854],{"class":172},[166,1056,243],{"class":275},[166,1058,1059],{"class":212},"(img",[166,1061,240],{"class":172},[166,1063,209],{"class":172},[166,1065,1066],{"class":176}," immediate",[166,1068,1069],{"class":172},":",[166,1071,1073],{"class":1072},"sfNiH"," true",[166,1075,216],{"class":172},[166,1077,297],{"class":212},[166,1079,1080,1082,1084],{"class":168,"line":346},[166,1081,358],{"class":172},[166,1083,177],{"class":176},[166,1085,199],{"class":172},[166,1087,1088],{"class":168,"line":355},[166,1089,261],{"emptyLinePlaceholder":260},[166,1091,1092,1094,1096],{"class":168,"line":365},[166,1093,173],{"class":172},[166,1095,154],{"class":176},[166,1097,199],{"class":172},[166,1099,1100,1102,1104,1106,1108,1110,1112,1114,1117,1119,1121,1124,1126,1129,1131,1134],{"class":168,"line":370},[166,1101,382],{"class":172},[166,1103,1037],{"class":176},[166,1105,488],{"class":180},[166,1107,187],{"class":172},[166,1109,190],{"class":172},[166,1111,1037],{"class":193},[166,1113,190],{"class":172},[166,1115,1116],{"class":180}," src",[166,1118,187],{"class":172},[166,1120,190],{"class":172},[166,1122,1123],{"class":193},"\u002Fbarcode.png",[166,1125,190],{"class":172},[166,1127,1128],{"class":180}," alt",[166,1130,187],{"class":172},[166,1132,1133],{"class":172},"\"\"",[166,1135,505],{"class":172},[166,1137,1138,1140,1142],{"class":168,"line":379},[166,1139,358],{"class":172},[166,1141,154],{"class":176},[166,1143,199],{"class":172},[140,1145,1147],{"id":1146},"manual-detection-on-a-blob","Manual detection on a Blob",[158,1149,1152],{"className":1150,"code":1151,"language":194,"meta":156,"style":156},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const { detect } = useBarcodeDetector()\nconst file = await fetch('\u002Fbarcode.png').then((r) => r.blob())\nconst result = await detect(file)\n",[62,1153,1154,1172,1227],{"__ignoreMap":156},[166,1155,1156,1158,1160,1163,1165,1167,1169],{"class":168,"line":169},[166,1157,267],{"class":180},[166,1159,209],{"class":172},[166,1161,1162],{"class":212}," detect ",[166,1164,340],{"class":172},[166,1166,854],{"class":172},[166,1168,243],{"class":275},[166,1170,1171],{"class":212},"()\n",[166,1173,1174,1176,1179,1181,1184,1187,1189,1191,1193,1195,1198,1200,1203,1205,1207,1211,1213,1216,1219,1221,1224],{"class":168,"line":202},[166,1175,267],{"class":180},[166,1177,1178],{"class":212}," file ",[166,1180,187],{"class":172},[166,1182,1183],{"class":205}," await",[166,1185,1186],{"class":275}," fetch",[166,1188,286],{"class":212},[166,1190,289],{"class":172},[166,1192,1123],{"class":193},[166,1194,289],{"class":172},[166,1196,1197],{"class":212},")",[166,1199,57],{"class":172},[166,1201,1202],{"class":275},"then",[166,1204,286],{"class":212},[166,1206,286],{"class":172},[166,1208,1210],{"class":1209},"sHdIc","r",[166,1212,1197],{"class":172},[166,1214,1215],{"class":180}," =>",[166,1217,1218],{"class":212}," r",[166,1220,57],{"class":172},[166,1222,1223],{"class":275},"blob",[166,1225,1226],{"class":212},"())\n",[166,1228,1229,1231,1234,1236,1238,1241],{"class":168,"line":230},[166,1230,267],{"class":180},[166,1232,1233],{"class":212}," result ",[166,1235,187],{"class":172},[166,1237,1183],{"class":205},[166,1239,1240],{"class":275}," detect",[166,1242,1243],{"class":212},"(file)\n",[140,1245,1247],{"id":1246},"scan-once","Scan once",[47,1249,1250,1251,1254,1255,1257],{},"Stop the camera as soon as a barcode is found. Combine with ",[62,1252,1253],{},"accept"," to keep scanning until a matching barcode shows up. Call ",[62,1256,130],{}," from a user gesture to begin (and again to re-arm after a stop).",[158,1259,1261],{"className":1150,"code":1260,"language":194,"meta":156,"style":156},"\u002F\u002F Stop on any barcode\nconst { detected, start } = useBarcodeDetector(video, { once: true })\n\u002F\u002F later, from a click handler:\nawait start()\n\n\u002F\u002F Stop only on QR codes\nuseBarcodeDetector(video, {\n once: true,\n accept: (b) => b.format === 'qr_code',\n})\n\n\u002F\u002F Stop only on values starting with `XX-`\nuseBarcodeDetector(video, {\n once: true,\n accept: (b) => b.rawValue.startsWith('XX-'),\n})\n",[62,1262,1263,1269,1306,1311,1320,1324,1329,1340,1352,1389,1395,1399,1404,1414,1424,1463],{"__ignoreMap":156},[166,1264,1265],{"class":168,"line":169},[166,1266,1268],{"class":1267},"sHwdD","\u002F\u002F Stop on any barcode\n",[166,1270,1271,1273,1275,1277,1279,1282,1284,1286,1288,1291,1293,1295,1298,1300,1302,1304],{"class":168,"line":202},[166,1272,267],{"class":180},[166,1274,209],{"class":172},[166,1276,317],{"class":212},[166,1278,240],{"class":172},[166,1280,1281],{"class":212}," start ",[166,1283,340],{"class":172},[166,1285,854],{"class":172},[166,1287,243],{"class":275},[166,1289,1290],{"class":212},"(video",[166,1292,240],{"class":172},[166,1294,209],{"class":172},[166,1296,1297],{"class":176}," once",[166,1299,1069],{"class":172},[166,1301,1073],{"class":1072},[166,1303,216],{"class":172},[166,1305,297],{"class":212},[166,1307,1308],{"class":168,"line":230},[166,1309,1310],{"class":1267},"\u002F\u002F later, from a click handler:\n",[166,1312,1313,1316,1318],{"class":168,"line":257},[166,1314,1315],{"class":205},"await",[166,1317,332],{"class":275},[166,1319,1171],{"class":212},[166,1321,1322],{"class":168,"line":264},[166,1323,261],{"emptyLinePlaceholder":260},[166,1325,1326],{"class":168,"line":300},[166,1327,1328],{"class":1267},"\u002F\u002F Stop only on QR codes\n",[166,1330,1331,1333,1335,1337],{"class":168,"line":346},[166,1332,16],{"class":275},[166,1334,1290],{"class":212},[166,1336,240],{"class":172},[166,1338,1339],{"class":172}," {\n",[166,1341,1342,1345,1347,1349],{"class":168,"line":355},[166,1343,1344],{"class":176}," once",[166,1346,1069],{"class":172},[166,1348,1073],{"class":1072},[166,1350,1351],{"class":172},",\n",[166,1353,1354,1357,1359,1362,1365,1367,1369,1372,1374,1377,1380,1382,1385,1387],{"class":168,"line":365},[166,1355,1356],{"class":275}," accept",[166,1358,1069],{"class":172},[166,1360,1361],{"class":172}," (",[166,1363,1364],{"class":1209},"b",[166,1366,1197],{"class":172},[166,1368,1215],{"class":180},[166,1370,1371],{"class":212}," b",[166,1373,57],{"class":172},[166,1375,1376],{"class":212},"format ",[166,1378,1379],{"class":172},"===",[166,1381,222],{"class":172},[166,1383,1384],{"class":193},"qr_code",[166,1386,289],{"class":172},[166,1388,1351],{"class":172},[166,1390,1391,1393],{"class":168,"line":370},[166,1392,340],{"class":172},[166,1394,297],{"class":212},[166,1396,1397],{"class":168,"line":379},[166,1398,261],{"emptyLinePlaceholder":260},[166,1400,1401],{"class":168,"line":424},[166,1402,1403],{"class":1267},"\u002F\u002F Stop only on values starting with `XX-`\n",[166,1405,1406,1408,1410,1412],{"class":168,"line":453},[166,1407,16],{"class":275},[166,1409,1290],{"class":212},[166,1411,240],{"class":172},[166,1413,1339],{"class":172},[166,1415,1416,1418,1420,1422],{"class":168,"line":458},[166,1417,1344],{"class":176},[166,1419,1069],{"class":172},[166,1421,1073],{"class":1072},[166,1423,1351],{"class":172},[166,1425,1426,1428,1430,1432,1434,1436,1438,1440,1442,1445,1447,1450,1452,1454,1457,1459,1461],{"class":168,"line":480},[166,1427,1356],{"class":275},[166,1429,1069],{"class":172},[166,1431,1361],{"class":172},[166,1433,1364],{"class":1209},[166,1435,1197],{"class":172},[166,1437,1215],{"class":180},[166,1439,1371],{"class":212},[166,1441,57],{"class":172},[166,1443,1444],{"class":212},"rawValue",[166,1446,57],{"class":172},[166,1448,1449],{"class":275},"startsWith",[166,1451,286],{"class":212},[166,1453,289],{"class":172},[166,1455,1456],{"class":193},"XX-",[166,1458,289],{"class":172},[166,1460,1197],{"class":212},[166,1462,1351],{"class":172},[166,1464,1465,1467],{"class":168,"line":508},[166,1466,340],{"class":172},[166,1468,297],{"class":212},[47,1470,1471,1473,1474,1476,1477,1480,1481,1483,1484,1486],{},[62,1472,1253],{}," filters ",[62,1475,523],{}," itself — non-matching barcodes never appear there, never trigger watchers, and never trigger ",[62,1478,1479],{},"once",". ",[62,1482,523],{}," keeps the result that triggered the stop. Call ",[62,1485,130],{}," to scan again.",[140,1488,1490],{"id":1489},"reactive-options","Reactive options",[47,1492,1493,123,1496,1498],{},[62,1494,1495],{},"formats",[62,1497,1479],{}," accept a ref or a getter, so you can flip them at runtime without re-mounting the composable. Useful for \"scan only QR codes\" toggles, multi-mode scanners, etc.",[158,1500,1502],{"className":1150,"code":1501,"language":194,"meta":156,"style":156},"const onlyQr = ref(false)\n\nconst formats = computed\u003CBarcodeFormat[] | undefined>(() =>\n onlyQr.value ? ['qr_code'] : undefined,\n)\n\nuseBarcodeDetector(video, {\n formats, \u002F\u002F rebuilds the BarcodeDetector when `onlyQr` flips\n once: onlyQr, \u002F\u002F stop on first hit *only* in QR-only mode\n})\n",[62,1503,1504,1522,1526,1562,1592,1596,1600,1610,1620,1634],{"__ignoreMap":156},[166,1505,1506,1508,1511,1513,1515,1517,1520],{"class":168,"line":169},[166,1507,267],{"class":180},[166,1509,1510],{"class":212}," onlyQr ",[166,1512,187],{"class":172},[166,1514,488],{"class":275},[166,1516,286],{"class":212},[166,1518,1519],{"class":1072},"false",[166,1521,297],{"class":212},[166,1523,1524],{"class":168,"line":202},[166,1525,261],{"emptyLinePlaceholder":260},[166,1527,1528,1530,1533,1535,1538,1540,1543,1546,1549,1552,1554,1556,1559],{"class":168,"line":230},[166,1529,267],{"class":180},[166,1531,1532],{"class":212}," formats ",[166,1534,187],{"class":172},[166,1536,1537],{"class":275}," computed",[166,1539,173],{"class":172},[166,1541,1542],{"class":280},"BarcodeFormat",[166,1544,1545],{"class":212},"[] ",[166,1547,1548],{"class":172},"|",[166,1550,1551],{"class":280}," undefined",[166,1553,283],{"class":172},[166,1555,286],{"class":212},[166,1557,1558],{"class":172},"()",[166,1560,1561],{"class":180}," =>\n",[166,1563,1564,1567,1569,1572,1575,1578,1580,1582,1584,1587,1589],{"class":168,"line":257},[166,1565,1566],{"class":212}," onlyQr",[166,1568,57],{"class":172},[166,1570,1571],{"class":212},"value ",[166,1573,1574],{"class":172},"?",[166,1576,1577],{"class":212}," [",[166,1579,289],{"class":172},[166,1581,1384],{"class":193},[166,1583,289],{"class":172},[166,1585,1586],{"class":212},"] ",[166,1588,1069],{"class":172},[166,1590,1591],{"class":172}," undefined,\n",[166,1593,1594],{"class":168,"line":264},[166,1595,297],{"class":212},[166,1597,1598],{"class":168,"line":300},[166,1599,261],{"emptyLinePlaceholder":260},[166,1601,1602,1604,1606,1608],{"class":168,"line":346},[166,1603,16],{"class":275},[166,1605,1290],{"class":212},[166,1607,240],{"class":172},[166,1609,1339],{"class":172},[166,1611,1612,1615,1617],{"class":168,"line":355},[166,1613,1614],{"class":212}," formats",[166,1616,240],{"class":172},[166,1618,1619],{"class":1267}," \u002F\u002F rebuilds the BarcodeDetector when `onlyQr` flips\n",[166,1621,1622,1624,1626,1629,1631],{"class":168,"line":365},[166,1623,1344],{"class":176},[166,1625,1069],{"class":172},[166,1627,1628],{"class":212}," onlyQr",[166,1630,240],{"class":172},[166,1632,1633],{"class":1267}," \u002F\u002F stop on first hit *only* in QR-only mode\n",[166,1635,1636,1638],{"class":168,"line":370},[166,1637,340],{"class":172},[166,1639,297],{"class":212},[47,1641,1642,1644,1645,662,1648,1651],{},[62,1643,1253],{}," is intentionally not ",[62,1646,1647],{},"MaybeRefOrGetter",[62,1649,1650],{},"toValue"," can't tell a predicate from a getter. Capture refs in your closure instead:",[158,1653,1655],{"className":1150,"code":1654,"language":194,"meta":156,"style":156},"const prefix = ref('')\nuseBarcodeDetector(video, {\n accept: (b) => !prefix.value || b.rawValue.startsWith(prefix.value),\n})\n",[62,1656,1657,1675,1685,1732],{"__ignoreMap":156},[166,1658,1659,1661,1664,1666,1668,1670,1673],{"class":168,"line":169},[166,1660,267],{"class":180},[166,1662,1663],{"class":212}," prefix ",[166,1665,187],{"class":172},[166,1667,488],{"class":275},[166,1669,286],{"class":212},[166,1671,1672],{"class":172},"''",[166,1674,297],{"class":212},[166,1676,1677,1679,1681,1683],{"class":168,"line":202},[166,1678,16],{"class":275},[166,1680,1290],{"class":212},[166,1682,240],{"class":172},[166,1684,1339],{"class":172},[166,1686,1687,1689,1691,1693,1695,1697,1699,1702,1705,1707,1709,1712,1714,1716,1718,1720,1722,1725,1727,1730],{"class":168,"line":230},[166,1688,1356],{"class":275},[166,1690,1069],{"class":172},[166,1692,1361],{"class":172},[166,1694,1364],{"class":1209},[166,1696,1197],{"class":172},[166,1698,1215],{"class":180},[166,1700,1701],{"class":172}," !",[166,1703,1704],{"class":212},"prefix",[166,1706,57],{"class":172},[166,1708,1571],{"class":212},[166,1710,1711],{"class":172},"||",[166,1713,1371],{"class":212},[166,1715,57],{"class":172},[166,1717,1444],{"class":212},[166,1719,57],{"class":172},[166,1721,1449],{"class":275},[166,1723,1724],{"class":212},"(prefix",[166,1726,57],{"class":172},[166,1728,1729],{"class":212},"value)",[166,1731,1351],{"class":172},[166,1733,1734,1736],{"class":168,"line":257},[166,1735,340],{"class":172},[166,1737,297],{"class":212},[135,1739,1741],{"id":1740},"options","Options",[1743,1744,1745,1764],"table",{},[1746,1747,1748],"thead",{},[1749,1750,1751,1755,1758,1761],"tr",{},[1752,1753,1754],"th",{},"Name",[1752,1756,1757],{},"Type",[1752,1759,1760],{},"Default",[1752,1762,1763],{},"Description",[1765,1766,1767,1791,1822,1851,1875,1900],"tbody",{},[1749,1768,1769,1774,1779,1785],{},[1770,1771,1772],"td",{},[62,1773,1495],{},[1770,1775,1776],{},[62,1777,1778],{},"MaybeRefOrGetter\u003CBarcodeFormat[] | undefined>",[1770,1780,1781],{},[1782,1783,1784],"em",{},"all formats supported by browser",[1770,1786,1787,1788,1790],{},"Restrict detection to specific formats. Pass a ref or getter to switch formats at runtime — the underlying ",[62,1789,406],{}," is rebuilt on change.",[1749,1792,1793,1798,1803,1807],{},[1770,1794,1795],{},[62,1796,1797],{},"immediate",[1770,1799,1800],{},[62,1801,1802],{},"boolean",[1770,1804,1805],{},[62,1806,1519],{},[1770,1808,1809,1810,1812,1813,1815,1816,1818,1819,1821],{},"Auto-start (camera for video sources, run ",[62,1811,110],{}," on change otherwise) once the source is available. Defaults to ",[62,1814,1519],{}," because ",[62,1817,102],{}," \u002F ",[62,1820,126],{}," need a user gesture in Safari\u002FiOS.",[1749,1823,1824,1829,1834,1839],{},[1770,1825,1826],{},[62,1827,1828],{},"camera",[1770,1830,1831],{},[62,1832,1833],{},"boolean | MediaTrackConstraints",[1770,1835,1836],{},[62,1837,1838],{},"true",[1770,1840,1841,1842,1844,1845,1847,1848,1850],{},"For video sources: ",[62,1843,1838],{}," calls ",[62,1846,102],{}," with rear camera; pass constraints to override; ",[62,1849,1519],{}," skips camera setup so you can supply your own stream.",[1749,1852,1853,1857,1862,1866],{},[1770,1854,1855],{},[62,1856,1479],{},[1770,1858,1859],{},[62,1860,1861],{},"MaybeRefOrGetter\u003Cboolean>",[1770,1863,1864],{},[62,1865,1519],{},[1770,1867,1868,1869,1871,1872,1874],{},"Stop after the first accepted detection. Pair with ",[62,1870,1253],{}," to stop only on matching barcodes. Reactive: read on each detection, so flipping the ref live is honored. Call ",[62,1873,130],{}," to re-arm.",[1749,1876,1877,1881,1886,1891],{},[1770,1878,1879],{},[62,1880,1253],{},[1770,1882,1883],{},[62,1884,1885],{},"(b: DetectedBarcode) => boolean",[1770,1887,1888],{},[1782,1889,1890],{},"undefined",[1770,1892,1893,1894,1896,1897,1899],{},"Predicate gating which detections count. Non-matching barcodes are filtered out of ",[62,1895,523],{}," and don't trigger ",[62,1898,1479],{},". Plain function — closures capture reactive deps for runtime behavior.",[1749,1901,1902,1907,1912,1917],{},[1770,1903,1904],{},[62,1905,1906],{},"window",[1770,1908,1909],{},[62,1910,1911],{},"Window",[1770,1913,1914],{},[62,1915,1916],{},"defaultWindow",[1770,1918,1919,1920,1922],{},"Custom ",[62,1921,1906],{}," reference (SSR \u002F iframe).",[135,1924,1926],{"id":1925},"returns","Returns",[1743,1928,1929,1939],{},[1746,1930,1931],{},[1749,1932,1933,1935,1937],{},[1752,1934,1754],{},[1752,1936,1757],{},[1752,1938,1763],{},[1765,1940,1941,1961,1976,1993,2010,2024,2039,2054,2069],{},[1749,1942,1943,1948,1953],{},[1770,1944,1945],{},[62,1946,1947],{},"isSupported",[1770,1949,1950],{},[62,1951,1952],{},"ComputedRef\u003Cboolean>",[1770,1954,1955,1956,1958,1959,57],{},"Whether ",[62,1957,406],{}," exists on ",[62,1960,1906],{},[1749,1962,1963,1968,1973],{},[1770,1964,1965],{},[62,1966,1967],{},"supportedFormats",[1770,1969,1970],{},[62,1971,1972],{},"ShallowRef\u003CBarcodeFormat[]>",[1770,1974,1975],{},"Formats reported by the browser once the detector is created.",[1749,1977,1978,1982,1987],{},[1770,1979,1980],{},[62,1981,523],{},[1770,1983,1984],{},[62,1985,1986],{},"ShallowRef\u003CDetectedBarcode[]>",[1770,1988,1989,1990,1992],{},"Latest detection result (filtered through ",[62,1991,1253],{}," if set).",[1749,1994,1995,2000,2004],{},[1770,1996,1997],{},[62,1998,1999],{},"rejected",[1770,2001,2002],{},[62,2003,1986],{},[1770,2005,2006,2007,2009],{},"Detections the ",[62,2008,1253],{}," predicate filtered out. Always empty otherwise.",[1749,2011,2012,2016,2021],{},[1770,2013,2014],{},[62,2015,437],{},[1770,2017,2018],{},[62,2019,2020],{},"ShallowRef\u003CError | null>",[1770,2022,2023],{},"Set when permission is denied or the API is unavailable.",[1749,2025,2026,2031,2036],{},[1770,2027,2028],{},[62,2029,2030],{},"isActive",[1770,2032,2033],{},[62,2034,2035],{},"ShallowRef\u003Cboolean>",[1770,2037,2038],{},"Whether the camera + detection loop is running (video sources only).",[1749,2040,2041,2046,2051],{},[1770,2042,2043],{},[62,2044,2045],{},"detect",[1770,2047,2048],{},[62,2049,2050],{},"(source?: BarcodeImageSource | null) => Promise\u003CDetectedBarcode[]>",[1770,2052,2053],{},"Run a single detection. Falls back to the configured source ref.",[1749,2055,2056,2061,2066],{},[1770,2057,2058],{},[62,2059,2060],{},"start",[1770,2062,2063],{},[62,2064,2065],{},"() => Promise\u003Cvoid>",[1770,2067,2068],{},"Start the camera stream and detection loop. No-op for non-video sources.",[1749,2070,2071,2076,2081],{},[1770,2072,2073],{},[62,2074,2075],{},"stop",[1770,2077,2078],{},[62,2079,2080],{},"() => void",[1770,2082,2083],{},"Stop the loop and release the media stream.",[135,2085,2087],{"id":2086},"component","Component",[47,2089,2090,2092,2093,2096],{},[62,2091,714],{}," is an all-in-one wrapper around the composable. It renders a ",[62,2094,2095],{},"\u003Cvideo>"," element plus a default SVG overlay that draws polygons over detected barcodes — drop it in and you have a working scanner.",[603,2098,2099,2109,2119],{},[613,2100,2101,2102,2108],{},"The ",[648,2103,2104,2107],{},[62,2105,2106],{},"overlay"," slot"," replaces only the default overlay.",[613,2110,2101,2111,2114,2115,2118],{},[648,2112,2113],{},"default slot"," is rendered as a sibling ",[1782,2116,2117],{},"after"," the stage, with full composable state and actions exposed as slot props. Use it for results lists, error messages, controls, etc.",[613,2120,2101,2121,2126,2127,57],{},[648,2122,2123],{},[62,2124,2125],{},"headless"," prop skips the built-in stage entirely; the default slot becomes the sole rendering and must wire up its own source element via ",[62,2128,2129],{},"setSource",[140,2131,2133],{"id":2132},"drop-in-scanner","Drop-in scanner",[47,2135,2136,2137,1818,2139,2141],{},"Use the default slot to wire ",[62,2138,2060],{},[62,2140,2075],{}," to a button — autoplay is gated behind a user gesture so the component works on Safari\u002FiOS.",[158,2143,2145],{"className":160,"code":2144,"language":162,"meta":156,"style":156},"\u003Cscript setup lang=\"ts\">\nimport { UseBarcodeDetector } from '@orbisk\u002Fvue-use-barcode-detection'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CUseBarcodeDetector v-slot=\"{ start, stop, isActive, detected }\">\n \u003Cbutton @click=\"isActive ? stop() : start()\">\n {{ isActive ? 'Stop' : 'Start camera' }}\n \u003C\u002Fbutton>\n \u003Cul>\n \u003Cli v-for=\"b in detected\" :key=\"b.rawValue\">\n \u003Cstrong>{{ b.format }}\u003C\u002Fstrong> — \u003Ccode>{{ b.rawValue }}\u003C\u002Fcode>\n \u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002FUseBarcodeDetector>\n\u003C\u002Ftemplate>\n",[62,2146,2147,2167,2186,2194,2198,2206,2227,2245,2250,2258,2266,2296,2329,2338,2346,2354],{"__ignoreMap":156},[166,2148,2149,2151,2153,2155,2157,2159,2161,2163,2165],{"class":168,"line":169},[166,2150,173],{"class":172},[166,2152,177],{"class":176},[166,2154,181],{"class":180},[166,2156,184],{"class":180},[166,2158,187],{"class":172},[166,2160,190],{"class":172},[166,2162,194],{"class":193},[166,2164,190],{"class":172},[166,2166,199],{"class":172},[166,2168,2169,2171,2173,2176,2178,2180,2182,2184],{"class":168,"line":202},[166,2170,206],{"class":205},[166,2172,209],{"class":172},[166,2174,2175],{"class":212}," UseBarcodeDetector",[166,2177,216],{"class":172},[166,2179,219],{"class":205},[166,2181,222],{"class":172},[166,2183,252],{"class":193},[166,2185,227],{"class":172},[166,2187,2188,2190,2192],{"class":168,"line":230},[166,2189,358],{"class":172},[166,2191,177],{"class":176},[166,2193,199],{"class":172},[166,2195,2196],{"class":168,"line":257},[166,2197,261],{"emptyLinePlaceholder":260},[166,2199,2200,2202,2204],{"class":168,"line":264},[166,2201,173],{"class":172},[166,2203,154],{"class":176},[166,2205,199],{"class":172},[166,2207,2208,2210,2213,2216,2218,2220,2223,2225],{"class":168,"line":300},[166,2209,382],{"class":172},[166,2211,2212],{"class":176},"UseBarcodeDetector",[166,2214,2215],{"class":180}," v-slot",[166,2217,187],{"class":172},[166,2219,190],{"class":172},[166,2221,2222],{"class":193},"{ start, stop, isActive, detected }",[166,2224,190],{"class":172},[166,2226,199],{"class":172},[166,2228,2229,2231,2233,2235,2237,2239,2241,2243],{"class":168,"line":346},[166,2230,483],{"class":172},[166,2232,561],{"class":176},[166,2234,564],{"class":180},[166,2236,187],{"class":172},[166,2238,190],{"class":172},[166,2240,571],{"class":193},[166,2242,190],{"class":172},[166,2244,199],{"class":172},[166,2246,2247],{"class":168,"line":355},[166,2248,2249],{"class":212}," {{ isActive ? 'Stop' : 'Start camera' }}\n",[166,2251,2252,2254,2256],{"class":168,"line":365},[166,2253,683],{"class":172},[166,2255,561],{"class":176},[166,2257,199],{"class":172},[166,2259,2260,2262,2264],{"class":168,"line":370},[166,2261,483],{"class":172},[166,2263,603],{"class":176},[166,2265,199],{"class":172},[166,2267,2268,2270,2272,2274,2276,2278,2281,2283,2285,2287,2289,2292,2294],{"class":168,"line":379},[166,2269,645],{"class":172},[166,2271,613],{"class":176},[166,2273,616],{"class":180},[166,2275,187],{"class":172},[166,2277,190],{"class":172},[166,2279,2280],{"class":193},"b in detected",[166,2282,190],{"class":172},[166,2284,628],{"class":180},[166,2286,187],{"class":172},[166,2288,190],{"class":172},[166,2290,2291],{"class":193},"b.rawValue",[166,2293,190],{"class":172},[166,2295,199],{"class":172},[166,2297,2298,2301,2303,2305,2307,2309,2311,2313,2315,2317,2319,2321,2323,2325,2327],{"class":168,"line":424},[166,2299,2300],{"class":172}," \u003C",[166,2302,648],{"class":176},[166,2304,283],{"class":172},[166,2306,653],{"class":212},[166,2308,358],{"class":172},[166,2310,648],{"class":176},[166,2312,283],{"class":172},[166,2314,662],{"class":212},[166,2316,173],{"class":172},[166,2318,62],{"class":176},[166,2320,283],{"class":172},[166,2322,671],{"class":212},[166,2324,358],{"class":172},[166,2326,62],{"class":176},[166,2328,199],{"class":172},[166,2330,2331,2334,2336],{"class":168,"line":453},[166,2332,2333],{"class":172}," \u003C\u002F",[166,2335,613],{"class":176},[166,2337,199],{"class":172},[166,2339,2340,2342,2344],{"class":168,"line":458},[166,2341,683],{"class":172},[166,2343,603],{"class":176},[166,2345,199],{"class":172},[166,2347,2348,2350,2352],{"class":168,"line":480},[166,2349,544],{"class":172},[166,2351,2212],{"class":176},[166,2353,199],{"class":172},[166,2355,2356,2358,2360],{"class":168,"line":508},[166,2357,358],{"class":172},[166,2359,154],{"class":176},[166,2361,199],{"class":172},[140,2363,2365],{"id":2364},"custom-ui-alongside-the-scanner","Custom UI alongside the scanner",[158,2367,2369],{"className":160,"code":2368,"language":162,"meta":156,"style":156},"\u003Ctemplate>\n \u003CUseBarcodeDetector v-slot=\"{ detected, error, isSupported }\">\n \u003Cp v-if=\"!isSupported\">BarcodeDetector is not available.\u003C\u002Fp>\n \u003Cp v-else-if=\"error\">{{ error.message }}\u003C\u002Fp>\n \u003Cul>\n \u003Cli v-for=\"b in detected\" :key=\"b.rawValue\">\n \u003Cstrong>{{ b.format }}\u003C\u002Fstrong> — \u003Ccode>{{ b.rawValue }}\u003C\u002Fcode>\n \u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002FUseBarcodeDetector>\n\u003C\u002Ftemplate>\n",[62,2370,2371,2379,2398,2425,2452,2460,2488,2520,2528,2536,2544],{"__ignoreMap":156},[166,2372,2373,2375,2377],{"class":168,"line":169},[166,2374,173],{"class":172},[166,2376,154],{"class":176},[166,2378,199],{"class":172},[166,2380,2381,2383,2385,2387,2389,2391,2394,2396],{"class":168,"line":202},[166,2382,382],{"class":172},[166,2384,2212],{"class":176},[166,2386,2215],{"class":180},[166,2388,187],{"class":172},[166,2390,190],{"class":172},[166,2392,2393],{"class":193},"{ detected, error, isSupported }",[166,2395,190],{"class":172},[166,2397,199],{"class":172},[166,2399,2400,2402,2404,2406,2408,2410,2412,2414,2416,2419,2421,2423],{"class":168,"line":230},[166,2401,483],{"class":172},[166,2403,47],{"class":176},[166,2405,387],{"class":180},[166,2407,187],{"class":172},[166,2409,190],{"class":172},[166,2411,394],{"class":193},[166,2413,190],{"class":172},[166,2415,283],{"class":172},[166,2417,2418],{"class":212},"BarcodeDetector is not available.",[166,2420,358],{"class":172},[166,2422,47],{"class":176},[166,2424,199],{"class":172},[166,2426,2427,2429,2431,2434,2436,2438,2440,2442,2444,2446,2448,2450],{"class":168,"line":257},[166,2428,483],{"class":172},[166,2430,47],{"class":176},[166,2432,2433],{"class":180}," v-else-if",[166,2435,187],{"class":172},[166,2437,190],{"class":172},[166,2439,437],{"class":193},[166,2441,190],{"class":172},[166,2443,283],{"class":172},[166,2445,444],{"class":212},[166,2447,358],{"class":172},[166,2449,47],{"class":176},[166,2451,199],{"class":172},[166,2453,2454,2456,2458],{"class":168,"line":264},[166,2455,483],{"class":172},[166,2457,603],{"class":176},[166,2459,199],{"class":172},[166,2461,2462,2464,2466,2468,2470,2472,2474,2476,2478,2480,2482,2484,2486],{"class":168,"line":300},[166,2463,645],{"class":172},[166,2465,613],{"class":176},[166,2467,616],{"class":180},[166,2469,187],{"class":172},[166,2471,190],{"class":172},[166,2473,2280],{"class":193},[166,2475,190],{"class":172},[166,2477,628],{"class":180},[166,2479,187],{"class":172},[166,2481,190],{"class":172},[166,2483,2291],{"class":193},[166,2485,190],{"class":172},[166,2487,199],{"class":172},[166,2489,2490,2492,2494,2496,2498,2500,2502,2504,2506,2508,2510,2512,2514,2516,2518],{"class":168,"line":346},[166,2491,2300],{"class":172},[166,2493,648],{"class":176},[166,2495,283],{"class":172},[166,2497,653],{"class":212},[166,2499,358],{"class":172},[166,2501,648],{"class":176},[166,2503,283],{"class":172},[166,2505,662],{"class":212},[166,2507,173],{"class":172},[166,2509,62],{"class":176},[166,2511,283],{"class":172},[166,2513,671],{"class":212},[166,2515,358],{"class":172},[166,2517,62],{"class":176},[166,2519,199],{"class":172},[166,2521,2522,2524,2526],{"class":168,"line":355},[166,2523,2333],{"class":172},[166,2525,613],{"class":176},[166,2527,199],{"class":172},[166,2529,2530,2532,2534],{"class":168,"line":365},[166,2531,683],{"class":172},[166,2533,603],{"class":176},[166,2535,199],{"class":172},[166,2537,2538,2540,2542],{"class":168,"line":370},[166,2539,544],{"class":172},[166,2541,2212],{"class":176},[166,2543,199],{"class":172},[166,2545,2546,2548,2550],{"class":168,"line":379},[166,2547,358],{"class":172},[166,2549,154],{"class":176},[166,2551,199],{"class":172},[140,2553,2555],{"id":2554},"custom-overlay-only","Custom overlay only",[47,2557,2101,2558,2560,2561,2564],{},[62,2559,2106],{}," slot receives the live source element — pass it to ",[62,2562,2563],{},"\u003CBarcodeDetectorOverlay :source=\"source\">"," (or your own SVG) and the overlay tracks the visible source rect automatically.",[158,2566,2568],{"className":160,"code":2567,"language":162,"meta":156,"style":156},"\u003Ctemplate>\n \u003CUseBarcodeDetector>\n \u003Ctemplate #overlay=\"{ detected, source }\">\n \u003CBarcodeDetectorOverlay\n :detected=\"detected\"\n :source=\"source\"\n stroke=\"hotpink\"\n :stroke-width=\"6\"\n \u002F>\n \u003C\u002Ftemplate>\n \u003C\u002FUseBarcodeDetector>\n\u003C\u002Ftemplate>\n",[62,2569,2570,2578,2586,2617,2624,2638,2652,2666,2680,2685,2693,2701],{"__ignoreMap":156},[166,2571,2572,2574,2576],{"class":168,"line":169},[166,2573,173],{"class":172},[166,2575,154],{"class":176},[166,2577,199],{"class":172},[166,2579,2580,2582,2584],{"class":168,"line":202},[166,2581,382],{"class":172},[166,2583,2212],{"class":176},[166,2585,199],{"class":172},[166,2587,2588,2590,2592,2595,2597,2599,2601,2604,2606,2608,2611,2613,2615],{"class":168,"line":230},[166,2589,483],{"class":172},[166,2591,154],{"class":176},[166,2593,2594],{"class":172}," #",[166,2596,2106],{"class":180},[166,2598,187],{"class":172},[166,2600,190],{"class":172},[166,2602,2603],{"class":172},"{",[166,2605,317],{"class":212},[166,2607,240],{"class":172},[166,2609,2610],{"class":212}," source ",[166,2612,340],{"class":172},[166,2614,190],{"class":172},[166,2616,199],{"class":172},[166,2618,2619,2621],{"class":168,"line":257},[166,2620,645],{"class":172},[166,2622,2623],{"class":176},"BarcodeDetectorOverlay\n",[166,2625,2626,2629,2631,2633,2635],{"class":168,"line":264},[166,2627,2628],{"class":180}," :detected",[166,2630,187],{"class":172},[166,2632,190],{"class":172},[166,2634,523],{"class":193},[166,2636,2637],{"class":172},"\"\n",[166,2639,2640,2643,2645,2647,2650],{"class":168,"line":300},[166,2641,2642],{"class":180}," :source",[166,2644,187],{"class":172},[166,2646,190],{"class":172},[166,2648,2649],{"class":193},"source",[166,2651,2637],{"class":172},[166,2653,2654,2657,2659,2661,2664],{"class":168,"line":346},[166,2655,2656],{"class":180}," stroke",[166,2658,187],{"class":172},[166,2660,190],{"class":172},[166,2662,2663],{"class":193},"hotpink",[166,2665,2637],{"class":172},[166,2667,2668,2671,2673,2675,2678],{"class":168,"line":355},[166,2669,2670],{"class":180}," :stroke-width",[166,2672,187],{"class":172},[166,2674,190],{"class":172},[166,2676,2677],{"class":193},"6",[166,2679,2637],{"class":172},[166,2681,2682],{"class":168,"line":365},[166,2683,2684],{"class":172}," \u002F>\n",[166,2686,2687,2689,2691],{"class":168,"line":370},[166,2688,683],{"class":172},[166,2690,154],{"class":176},[166,2692,199],{"class":172},[166,2694,2695,2697,2699],{"class":168,"line":379},[166,2696,544],{"class":172},[166,2698,2212],{"class":176},[166,2700,199],{"class":172},[166,2702,2703,2705,2707],{"class":168,"line":424},[166,2704,358],{"class":172},[166,2706,154],{"class":176},[166,2708,199],{"class":172},[140,2710,2712],{"id":2711},"fully-headless","Fully headless",[47,2714,2715,2717,2718,2720,2721,2723,2724,69,2726,69,2729,2732,2733,2735,2736,2743,2744,2747,2748,2750],{},[62,2716,2125],{}," skips the built-in ",[62,2719,2095],{}," stage so the default slot does all the rendering. Bind any source ",[62,2722,64],{}," understands — ",[62,2725,2095],{},[62,2727,2728],{},"\u003Cimg>",[62,2730,2731],{},"\u003Ccanvas>"," — through ",[62,2734,2129],{},". The demo below feeds a QR generated with ",[51,2737,2740],{"href":2738,"rel":2739},"https:\u002F\u002Fvueuse.org\u002Fintegrations\u002FuseQRCode",[55],[62,2741,2742],{},"useQRCode"," (from ",[62,2745,2746],{},"@vueuse\u002Fintegrations",") into an ",[62,2749,2728],{}," and lets the wrapper drive detection — no camera required.",[148,2752,2753,2756],{},[2754,2755],"use-barcode-detector-headless-demo",{},[154,2757,2758],{"v-slot:code":156},[158,2759,2761],{"className":160,"code":2760,"language":162,"meta":156,"style":156},"\u003Cscript setup lang=\"ts\">\nimport { ref, useTemplateRef, watch } from 'vue'\nimport {\n type DetectedBarcode,\n type UseBarcodeDetectorReturn,\n} from '@orbisk\u002Fvue-use-barcode-detection'\nimport { useQRCode } from '@vueuse\u002Fintegrations\u002FuseQRCode'\n\nconst text = ref('Hello, headless!')\nconst prefix = ref('')\n\nconst accept = (b: DetectedBarcode) => !prefix.value || b.rawValue.startsWith(prefix.value)\nconst qrSrc = useQRCode(text, { width: 320, margin: 4 })\n\n\u002F\u002F The wrapper exposes the composable's return — re-run detect() when only\n\u002F\u002F the predicate changes (the \u003Cimg> ref is unchanged in that case, so the\n\u002F\u002F composable's source watcher wouldn't fire on its own).\nconst scanner = useTemplateRef\u003CUseBarcodeDetectorReturn>('scanner')\nwatch(prefix, () => void scanner.value?.detect())\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CUseBarcodeDetector\n ref=\"scanner\"\n headless\n immediate\n :accept=\"accept\"\n v-slot=\"{ setSource, source, detect, detected, rejected }\"\n >\n \u003Cinput v-model=\"text\" type=\"text\" \u002F>\n \u003Cinput v-model=\"prefix\" type=\"text\" placeholder=\"required prefix (any)\" \u002F>\n\n \u003Cdiv class=\"stage\">\n \u003Cimg :ref=\"setSource\" :src=\"qrSrc\" alt=\"QR\" @load=\"detect()\" \u002F>\n \u003CBarcodeDetectorOverlay\n :detected=\"detected\"\n :rejected=\"rejected\"\n :source=\"source\"\n :label=\"(b, accepted) => (accepted ? b.rawValue : 'invalid')\"\n \u002F>\n \u003C\u002Fdiv>\n \u003C\u002FUseBarcodeDetector>\n\u003C\u002Ftemplate>\n",[62,2762,2763,2783,2810,2816,2826,2835,2847,2867,2871,2893,2909,2913,2961,3002,3006,3011,3016,3021,3050,3082,3090,3094,3102,3109,3122,3127,3132,3145,3159,3165,3198,3239,3244,3263,3317,3324,3337,3351,3364,3379,3384,3393,3402],{"__ignoreMap":156},[166,2764,2765,2767,2769,2771,2773,2775,2777,2779,2781],{"class":168,"line":169},[166,2766,173],{"class":172},[166,2768,177],{"class":176},[166,2770,181],{"class":180},[166,2772,184],{"class":180},[166,2774,187],{"class":172},[166,2776,190],{"class":172},[166,2778,194],{"class":193},[166,2780,190],{"class":172},[166,2782,199],{"class":172},[166,2784,2785,2787,2789,2791,2793,2795,2797,2800,2802,2804,2806,2808],{"class":168,"line":202},[166,2786,206],{"class":205},[166,2788,209],{"class":172},[166,2790,488],{"class":212},[166,2792,240],{"class":172},[166,2794,213],{"class":212},[166,2796,240],{"class":172},[166,2798,2799],{"class":212}," watch",[166,2801,216],{"class":172},[166,2803,219],{"class":205},[166,2805,222],{"class":172},[166,2807,162],{"class":193},[166,2809,227],{"class":172},[166,2811,2812,2814],{"class":168,"line":230},[166,2813,206],{"class":205},[166,2815,1339],{"class":172},[166,2817,2818,2821,2824],{"class":168,"line":257},[166,2819,2820],{"class":205}," type",[166,2822,2823],{"class":212}," DetectedBarcode",[166,2825,1351],{"class":172},[166,2827,2828,2830,2833],{"class":168,"line":264},[166,2829,2820],{"class":205},[166,2831,2832],{"class":212}," UseBarcodeDetectorReturn",[166,2834,1351],{"class":172},[166,2836,2837,2839,2841,2843,2845],{"class":168,"line":300},[166,2838,340],{"class":172},[166,2840,219],{"class":205},[166,2842,222],{"class":172},[166,2844,252],{"class":193},[166,2846,227],{"class":172},[166,2848,2849,2851,2853,2856,2858,2860,2862,2865],{"class":168,"line":346},[166,2850,206],{"class":205},[166,2852,209],{"class":172},[166,2854,2855],{"class":212}," useQRCode",[166,2857,216],{"class":172},[166,2859,219],{"class":205},[166,2861,222],{"class":172},[166,2863,2864],{"class":193},"@vueuse\u002Fintegrations\u002FuseQRCode",[166,2866,227],{"class":172},[166,2868,2869],{"class":168,"line":355},[166,2870,261],{"emptyLinePlaceholder":260},[166,2872,2873,2875,2878,2880,2882,2884,2886,2889,2891],{"class":168,"line":365},[166,2874,267],{"class":180},[166,2876,2877],{"class":212}," text ",[166,2879,187],{"class":172},[166,2881,488],{"class":275},[166,2883,286],{"class":212},[166,2885,289],{"class":172},[166,2887,2888],{"class":193},"Hello, headless!",[166,2890,289],{"class":172},[166,2892,297],{"class":212},[166,2894,2895,2897,2899,2901,2903,2905,2907],{"class":168,"line":370},[166,2896,267],{"class":180},[166,2898,1663],{"class":212},[166,2900,187],{"class":172},[166,2902,488],{"class":275},[166,2904,286],{"class":212},[166,2906,1672],{"class":172},[166,2908,297],{"class":212},[166,2910,2911],{"class":168,"line":379},[166,2912,261],{"emptyLinePlaceholder":260},[166,2914,2915,2917,2920,2922,2924,2926,2928,2930,2932,2934,2936,2938,2940,2942,2944,2946,2948,2950,2952,2954,2956,2958],{"class":168,"line":424},[166,2916,267],{"class":180},[166,2918,2919],{"class":212}," accept ",[166,2921,187],{"class":172},[166,2923,1361],{"class":172},[166,2925,1364],{"class":1209},[166,2927,1069],{"class":172},[166,2929,2823],{"class":280},[166,2931,1197],{"class":172},[166,2933,1215],{"class":180},[166,2935,1701],{"class":172},[166,2937,1704],{"class":212},[166,2939,57],{"class":172},[166,2941,1571],{"class":212},[166,2943,1711],{"class":172},[166,2945,1371],{"class":212},[166,2947,57],{"class":172},[166,2949,1444],{"class":212},[166,2951,57],{"class":172},[166,2953,1449],{"class":275},[166,2955,1724],{"class":212},[166,2957,57],{"class":172},[166,2959,2960],{"class":212},"value)\n",[166,2962,2963,2965,2968,2970,2972,2975,2977,2979,2982,2984,2988,2990,2993,2995,2998,3000],{"class":168,"line":453},[166,2964,267],{"class":180},[166,2966,2967],{"class":212}," qrSrc ",[166,2969,187],{"class":172},[166,2971,2855],{"class":275},[166,2973,2974],{"class":212},"(text",[166,2976,240],{"class":172},[166,2978,209],{"class":172},[166,2980,2981],{"class":176}," width",[166,2983,1069],{"class":172},[166,2985,2987],{"class":2986},"sbssI"," 320",[166,2989,240],{"class":172},[166,2991,2992],{"class":176}," margin",[166,2994,1069],{"class":172},[166,2996,2997],{"class":2986}," 4",[166,2999,216],{"class":172},[166,3001,297],{"class":212},[166,3003,3004],{"class":168,"line":458},[166,3005,261],{"emptyLinePlaceholder":260},[166,3007,3008],{"class":168,"line":480},[166,3009,3010],{"class":1267},"\u002F\u002F The wrapper exposes the composable's return — re-run detect() when only\n",[166,3012,3013],{"class":168,"line":508},[166,3014,3015],{"class":1267},"\u002F\u002F the predicate changes (the \u003Cimg> ref is unchanged in that case, so the\n",[166,3017,3018],{"class":168,"line":541},[166,3019,3020],{"class":1267},"\u002F\u002F composable's source watcher wouldn't fire on its own).\n",[166,3022,3023,3025,3028,3030,3032,3034,3037,3039,3041,3043,3046,3048],{"class":168,"line":551},[166,3024,267],{"class":180},[166,3026,3027],{"class":212}," scanner ",[166,3029,187],{"class":172},[166,3031,213],{"class":275},[166,3033,173],{"class":172},[166,3035,3036],{"class":280},"UseBarcodeDetectorReturn",[166,3038,283],{"class":172},[166,3040,286],{"class":212},[166,3042,289],{"class":172},[166,3044,3045],{"class":193},"scanner",[166,3047,289],{"class":172},[166,3049,297],{"class":212},[166,3051,3052,3055,3057,3059,3062,3064,3067,3070,3072,3075,3078,3080],{"class":168,"line":556},[166,3053,3054],{"class":275},"watch",[166,3056,1724],{"class":212},[166,3058,240],{"class":172},[166,3060,3061],{"class":172}," ()",[166,3063,1215],{"class":180},[166,3065,3066],{"class":172}," void",[166,3068,3069],{"class":212}," scanner",[166,3071,57],{"class":172},[166,3073,3074],{"class":212},"value",[166,3076,3077],{"class":172},"?.",[166,3079,2045],{"class":275},[166,3081,1226],{"class":212},[166,3083,3084,3086,3088],{"class":168,"line":578},[166,3085,358],{"class":172},[166,3087,177],{"class":176},[166,3089,199],{"class":172},[166,3091,3092],{"class":168,"line":584},[166,3093,261],{"emptyLinePlaceholder":260},[166,3095,3096,3098,3100],{"class":168,"line":593},[166,3097,173],{"class":172},[166,3099,154],{"class":176},[166,3101,199],{"class":172},[166,3103,3104,3106],{"class":168,"line":598},[166,3105,382],{"class":172},[166,3107,3108],{"class":176},"UseBarcodeDetector\n",[166,3110,3111,3114,3116,3118,3120],{"class":168,"line":608},[166,3112,3113],{"class":180}," ref",[166,3115,187],{"class":172},[166,3117,190],{"class":172},[166,3119,3045],{"class":193},[166,3121,2637],{"class":172},[166,3123,3124],{"class":168,"line":642},[166,3125,3126],{"class":180}," headless\n",[166,3128,3129],{"class":168,"line":680},[166,3130,3131],{"class":180}," immediate\n",[166,3133,3134,3137,3139,3141,3143],{"class":168,"line":690},[166,3135,3136],{"class":180}," :accept",[166,3138,187],{"class":172},[166,3140,190],{"class":172},[166,3142,1253],{"class":193},[166,3144,2637],{"class":172},[166,3146,3147,3150,3152,3154,3157],{"class":168,"line":699},[166,3148,3149],{"class":180}," v-slot",[166,3151,187],{"class":172},[166,3153,190],{"class":172},[166,3155,3156],{"class":193},"{ setSource, source, detect, detected, rejected }",[166,3158,2637],{"class":172},[166,3160,3162],{"class":168,"line":3161},29,[166,3163,3164],{"class":172}," >\n",[166,3166,3168,3170,3173,3176,3178,3180,3183,3185,3188,3190,3192,3194,3196],{"class":168,"line":3167},30,[166,3169,483],{"class":172},[166,3171,3172],{"class":176},"input",[166,3174,3175],{"class":180}," v-model",[166,3177,187],{"class":172},[166,3179,190],{"class":172},[166,3181,3182],{"class":193},"text",[166,3184,190],{"class":172},[166,3186,3187],{"class":180}," type",[166,3189,187],{"class":172},[166,3191,190],{"class":172},[166,3193,3182],{"class":193},[166,3195,190],{"class":172},[166,3197,505],{"class":172},[166,3199,3201,3203,3205,3207,3209,3211,3213,3215,3217,3219,3221,3223,3225,3228,3230,3232,3235,3237],{"class":168,"line":3200},31,[166,3202,483],{"class":172},[166,3204,3172],{"class":176},[166,3206,3175],{"class":180},[166,3208,187],{"class":172},[166,3210,190],{"class":172},[166,3212,1704],{"class":193},[166,3214,190],{"class":172},[166,3216,3187],{"class":180},[166,3218,187],{"class":172},[166,3220,190],{"class":172},[166,3222,3182],{"class":193},[166,3224,190],{"class":172},[166,3226,3227],{"class":180}," placeholder",[166,3229,187],{"class":172},[166,3231,190],{"class":172},[166,3233,3234],{"class":193},"required prefix (any)",[166,3236,190],{"class":172},[166,3238,505],{"class":172},[166,3240,3242],{"class":168,"line":3241},32,[166,3243,261],{"emptyLinePlaceholder":260},[166,3245,3247,3249,3251,3253,3255,3257,3259,3261],{"class":168,"line":3246},33,[166,3248,483],{"class":172},[166,3250,463],{"class":176},[166,3252,466],{"class":180},[166,3254,187],{"class":172},[166,3256,190],{"class":172},[166,3258,473],{"class":193},[166,3260,190],{"class":172},[166,3262,199],{"class":172},[166,3264,3266,3268,3270,3273,3275,3277,3279,3281,3284,3286,3288,3291,3293,3295,3297,3299,3302,3304,3307,3309,3311,3313,3315],{"class":168,"line":3265},34,[166,3267,645],{"class":172},[166,3269,1037],{"class":176},[166,3271,3272],{"class":180}," :ref",[166,3274,187],{"class":172},[166,3276,190],{"class":172},[166,3278,2129],{"class":193},[166,3280,190],{"class":172},[166,3282,3283],{"class":180}," :src",[166,3285,187],{"class":172},[166,3287,190],{"class":172},[166,3289,3290],{"class":193},"qrSrc",[166,3292,190],{"class":172},[166,3294,1128],{"class":180},[166,3296,187],{"class":172},[166,3298,190],{"class":172},[166,3300,3301],{"class":193},"QR",[166,3303,190],{"class":172},[166,3305,3306],{"class":180}," @load",[166,3308,187],{"class":172},[166,3310,190],{"class":172},[166,3312,110],{"class":193},[166,3314,190],{"class":172},[166,3316,505],{"class":172},[166,3318,3320,3322],{"class":168,"line":3319},35,[166,3321,645],{"class":172},[166,3323,2623],{"class":176},[166,3325,3327,3329,3331,3333,3335],{"class":168,"line":3326},36,[166,3328,2628],{"class":180},[166,3330,187],{"class":172},[166,3332,190],{"class":172},[166,3334,523],{"class":193},[166,3336,2637],{"class":172},[166,3338,3340,3343,3345,3347,3349],{"class":168,"line":3339},37,[166,3341,3342],{"class":180}," :rejected",[166,3344,187],{"class":172},[166,3346,190],{"class":172},[166,3348,1999],{"class":193},[166,3350,2637],{"class":172},[166,3352,3354,3356,3358,3360,3362],{"class":168,"line":3353},38,[166,3355,2642],{"class":180},[166,3357,187],{"class":172},[166,3359,190],{"class":172},[166,3361,2649],{"class":193},[166,3363,2637],{"class":172},[166,3365,3367,3370,3372,3374,3377],{"class":168,"line":3366},39,[166,3368,3369],{"class":180}," :label",[166,3371,187],{"class":172},[166,3373,190],{"class":172},[166,3375,3376],{"class":193},"(b, accepted) => (accepted ? b.rawValue : 'invalid')",[166,3378,2637],{"class":172},[166,3380,3382],{"class":168,"line":3381},40,[166,3383,2684],{"class":172},[166,3385,3387,3389,3391],{"class":168,"line":3386},41,[166,3388,683],{"class":172},[166,3390,463],{"class":176},[166,3392,199],{"class":172},[166,3394,3396,3398,3400],{"class":168,"line":3395},42,[166,3397,544],{"class":172},[166,3399,2212],{"class":176},[166,3401,199],{"class":172},[166,3403,3405,3407,3409],{"class":168,"line":3404},43,[166,3406,358],{"class":172},[166,3408,154],{"class":176},[166,3410,199],{"class":172},[47,3412,3413,3414,3416,3417,1818,3419,1818,3421,3423,3424,57],{},"For a live-camera headless setup, bind a ",[62,3415,2095],{}," instead and wire ",[62,3418,2060],{},[62,3420,2075],{},[62,3422,2030],{}," from the slot to a button — the same wrapper without ",[62,3425,1797],{},[158,3427,3429],{"className":160,"code":3428,"language":162,"meta":156,"style":156},"\u003Ctemplate>\n \u003CUseBarcodeDetector headless v-slot=\"{ setSource, detected, start, stop, isActive }\">\n \u003Cvideo :ref=\"setSource\" playsinline muted autoplay \u002F>\n \u003Cbutton @click=\"isActive ? stop() : start()\">\n {{ isActive ? 'Stop' : 'Start' }}\n \u003C\u002Fbutton>\n \u003Cpre>{{ detected }}\u003C\u002Fpre>\n \u003C\u002FUseBarcodeDetector>\n\u003C\u002Ftemplate>\n",[62,3430,3431,3439,3461,3486,3504,3509,3517,3534,3542],{"__ignoreMap":156},[166,3432,3433,3435,3437],{"class":168,"line":169},[166,3434,173],{"class":172},[166,3436,154],{"class":176},[166,3438,199],{"class":172},[166,3440,3441,3443,3445,3448,3450,3452,3454,3457,3459],{"class":168,"line":202},[166,3442,382],{"class":172},[166,3444,2212],{"class":176},[166,3446,3447],{"class":180}," headless",[166,3449,2215],{"class":180},[166,3451,187],{"class":172},[166,3453,190],{"class":172},[166,3455,3456],{"class":193},"{ setSource, detected, start, stop, isActive }",[166,3458,190],{"class":172},[166,3460,199],{"class":172},[166,3462,3463,3465,3467,3469,3471,3473,3475,3477,3479,3481,3484],{"class":168,"line":230},[166,3464,483],{"class":172},[166,3466,292],{"class":176},[166,3468,3272],{"class":180},[166,3470,187],{"class":172},[166,3472,190],{"class":172},[166,3474,2129],{"class":193},[166,3476,190],{"class":172},[166,3478,499],{"class":180},[166,3480,502],{"class":180},[166,3482,3483],{"class":180}," autoplay",[166,3485,505],{"class":172},[166,3487,3488,3490,3492,3494,3496,3498,3500,3502],{"class":168,"line":257},[166,3489,483],{"class":172},[166,3491,561],{"class":176},[166,3493,564],{"class":180},[166,3495,187],{"class":172},[166,3497,190],{"class":172},[166,3499,571],{"class":193},[166,3501,190],{"class":172},[166,3503,199],{"class":172},[166,3505,3506],{"class":168,"line":264},[166,3507,3508],{"class":212}," {{ isActive ? 'Stop' : 'Start' }}\n",[166,3510,3511,3513,3515],{"class":168,"line":300},[166,3512,683],{"class":172},[166,3514,561],{"class":176},[166,3516,199],{"class":172},[166,3518,3519,3521,3523,3525,3528,3530,3532],{"class":168,"line":346},[166,3520,483],{"class":172},[166,3522,158],{"class":176},[166,3524,283],{"class":172},[166,3526,3527],{"class":212},"{{ detected }}",[166,3529,358],{"class":172},[166,3531,158],{"class":176},[166,3533,199],{"class":172},[166,3535,3536,3538,3540],{"class":168,"line":355},[166,3537,544],{"class":172},[166,3539,2212],{"class":176},[166,3541,199],{"class":172},[166,3543,3544,3546,3548],{"class":168,"line":365},[166,3545,358],{"class":172},[166,3547,154],{"class":176},[166,3549,199],{"class":172},[140,3551,3553],{"id":3552},"component-props","Component props",[1743,3555,3556,3568],{},[1746,3557,3558],{},[1749,3559,3560,3562,3564,3566],{},[1752,3561,1754],{},[1752,3563,1757],{},[1752,3565,1760],{},[1752,3567,1763],{},[1765,3569,3570,3589,3612,3635,3655,3673],{},[1749,3571,3572,3576,3581,3586],{},[1770,3573,3574],{},[62,3575,1495],{},[1770,3577,3578],{},[62,3579,3580],{},"BarcodeFormat[]",[1770,3582,3583],{},[1782,3584,3585],{},"all",[1770,3587,3588],{},"Restrict detection to specific formats.",[1749,3590,3591,3595,3599,3603],{},[1770,3592,3593],{},[62,3594,1797],{},[1770,3596,3597],{},[62,3598,1802],{},[1770,3600,3601],{},[62,3602,1519],{},[1770,3604,3605,3606,1815,3608,1818,3610,1821],{},"Auto-start the camera + detection loop once the video element is mounted. Defaults to ",[62,3607,1519],{},[62,3609,102],{},[62,3611,126],{},[1749,3613,3614,3618,3622,3626],{},[1770,3615,3616],{},[62,3617,1828],{},[1770,3619,3620],{},[62,3621,1833],{},[1770,3623,3624],{},[62,3625,1838],{},[1770,3627,3628,1844,3630,1847,3632,3634],{},[62,3629,1838],{},[62,3631,102],{},[62,3633,1519],{}," skips.",[1749,3636,3637,3641,3645,3649],{},[1770,3638,3639],{},[62,3640,1479],{},[1770,3642,3643],{},[62,3644,1802],{},[1770,3646,3647],{},[62,3648,1519],{},[1770,3650,3651,3652,3654],{},"Stop after the first accepted detection. Combine with ",[62,3653,1253],{}," to stop only on matching barcodes.",[1749,3656,3657,3661,3665,3669],{},[1770,3658,3659],{},[62,3660,1253],{},[1770,3662,3663],{},[62,3664,1885],{},[1770,3666,3667],{},[1782,3668,1890],{},[1770,3670,1893,3671,57],{},[62,3672,523],{},[1749,3674,3675,3679,3683,3687],{},[1770,3676,3677],{},[62,3678,2125],{},[1770,3680,3681],{},[62,3682,1802],{},[1770,3684,3685],{},[62,3686,1519],{},[1770,3688,3689],{},"Skip the built-in stage; the default slot is the only rendering and must bind its own video.",[140,3691,3693],{"id":3692},"default-slot-props","Default slot props",[1743,3695,3696,3705],{},[1746,3697,3698],{},[1749,3699,3700,3703],{},[1752,3701,3702],{},"Slot prop",[1752,3704,1757],{},[1765,3706,3707,3717,3727,3738,3752,3763,3773,3783,3793,3803,3814],{},[1749,3708,3709,3713],{},[1770,3710,3711],{},[62,3712,1947],{},[1770,3714,3715],{},[62,3716,1802],{},[1749,3718,3719,3723],{},[1770,3720,3721],{},[62,3722,1967],{},[1770,3724,3725],{},[62,3726,3580],{},[1749,3728,3729,3733],{},[1770,3730,3731],{},[62,3732,523],{},[1770,3734,3735],{},[62,3736,3737],{},"DetectedBarcode[]",[1749,3739,3740,3744],{},[1770,3741,3742],{},[62,3743,1999],{},[1770,3745,3746,3748,3749,3751],{},[62,3747,3737],{}," — barcodes the ",[62,3750,1253],{}," predicate filtered out",[1749,3753,3754,3758],{},[1770,3755,3756],{},[62,3757,437],{},[1770,3759,3760],{},[62,3761,3762],{},"Error | null",[1749,3764,3765,3769],{},[1770,3766,3767],{},[62,3768,2030],{},[1770,3770,3771],{},[62,3772,1802],{},[1749,3774,3775,3779],{},[1770,3776,3777],{},[62,3778,2045],{},[1770,3780,3781],{},[62,3782,2050],{},[1749,3784,3785,3789],{},[1770,3786,3787],{},[62,3788,2060],{},[1770,3790,3791],{},[62,3792,2065],{},[1749,3794,3795,3799],{},[1770,3796,3797],{},[62,3798,2075],{},[1770,3800,3801],{},[62,3802,2080],{},[1749,3804,3805,3809],{},[1770,3806,3807],{},[62,3808,2649],{},[1770,3810,3811],{},[62,3812,3813],{},"HTMLElement | null",[1749,3815,3816,3820],{},[1770,3817,3818],{},[62,3819,2129],{},[1770,3821,3822,3825,3826],{},[62,3823,3824],{},"(el: Element | null) => void"," — bind via ",[62,3827,3828],{},":ref=\"setSource\"",[140,3830,3832,3834],{"id":3831},"overlay-slot-props",[62,3833,2106],{}," slot props",[1743,3836,3837,3847],{},[1746,3838,3839],{},[1749,3840,3841,3843,3845],{},[1752,3842,3702],{},[1752,3844,1757],{},[1752,3846,1763],{},[1765,3848,3849,3863,3879],{},[1749,3850,3851,3855,3859],{},[1770,3852,3853],{},[62,3854,523],{},[1770,3856,3857],{},[62,3858,3737],{},[1770,3860,1989,3861,1992],{},[62,3862,1253],{},[1749,3864,3865,3869,3873],{},[1770,3866,3867],{},[62,3868,1999],{},[1770,3870,3871],{},[62,3872,3737],{},[1770,3874,3875,3876,3878],{},"Barcodes the ",[62,3877,1253],{}," predicate filtered out.",[1749,3880,3881,3885,3889],{},[1770,3882,3883],{},[62,3884,2649],{},[1770,3886,3887],{},[62,3888,3813],{},[1770,3890,3891,3892,3894,3895,3897],{},"The internal source element (the ",[62,3893,2095],{}," from the built-in stage). Pass to ",[62,3896,2563],{}," to keep the auto-tracked alignment.",[140,3899,3901],{"id":3900},"barcodedetectoroverlay",[62,3902,513],{},[47,3904,3905,3906,3908,3909,1818,3911,3913],{},"The default overlay is also exported as a standalone component. Drop it into a custom ",[62,3907,2106],{}," slot (or anywhere over a ",[62,3910,2095],{},[62,3912,2728],{},") when you want to keep the default look but add elements alongside it.",[148,3915,3916],{},[3917,3918],"barcode-overlay-demo",{},[47,3920,3921,3922,3924,3925,3930,3931,123,3933,3936,3937,3939,3940,3942],{},"The demo above generates a QR with ",[62,3923,2742],{}," from ",[51,3926,3928],{"href":2738,"rel":3927},[55],[62,3929,2746],{}," (you'll need to install ",[62,3932,2746],{},[62,3934,3935],{},"qrcode"," for this), runs ",[62,3938,16],{}," on the resulting ",[62,3941,2728],{},", and overlays the detected polygons. Type a required prefix to flip the polygon between accepted (green) and rejected (red) colors live.",[158,3944,3946],{"className":160,"code":3945,"language":162,"meta":156,"style":156},"\u003Cscript setup lang=\"ts\">\nimport { ref, useTemplateRef, watch } from 'vue'\nimport {\n BarcodeDetectorOverlay,\n type DetectedBarcode,\n useBarcodeDetector,\n} from '@orbisk\u002Fvue-use-barcode-detection'\nimport { useQRCode } from '@vueuse\u002Fintegrations\u002FuseQRCode'\n\nconst text = ref('Hello, scanner!')\nconst prefix = ref('')\n\nconst accept = (b: DetectedBarcode) =>\n !prefix.value || b.rawValue.startsWith(prefix.value)\n\n\u002F\u002F Fixed-size QR keeps the viewBox reactive-safe: img.naturalWidth is a\n\u002F\u002F non-reactive DOM property, so a computed reading it would never refresh\n\u002F\u002F once the image loads, leaving the SVG with a 0×0 coordinate space.\n\u002F\u002F `margin: 4` keeps the QR-spec quiet zone — Chrome's BarcodeDetector\n\u002F\u002F frequently refuses to lock on QRs with a smaller margin.\nconst qrSrc = useQRCode(text, { width: 320, margin: 4 })\n\nconst img = useTemplateRef\u003CHTMLImageElement>('img')\nconst { detect, detected, rejected } = useBarcodeDetector(img, { accept })\n\nwatch([qrSrc, prefix], () => {\n if (img.value?.complete) void detect()\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cinput v-model=\"text\" \u002F>\n \u003Cinput v-model=\"prefix\" placeholder=\"required prefix\" \u002F>\n \u003Cdiv class=\"stage\">\n \u003C!-- No `crossorigin` — data: URLs are same-origin; setting it can taint\n the canvas BarcodeDetector reads from. -->\n \u003Cimg ref=\"img\" :src=\"qrSrc\" @load=\"detect\" \u002F>\n \u003CBarcodeDetectorOverlay\n :detected=\"detected\"\n :rejected=\"rejected\"\n :source=\"img\"\n :label=\"(b, accepted) => (accepted ? b.rawValue : 'invalid')\"\n \u002F>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[62,3947,3948,3968,3994,4000,4007,4015,4021,4033,4051,4055,4076,4092,4096,4116,4145,4149,4154,4159,4164,4169,4174,4208,4212,4238,4273,4277,4297,4325,4331,4339,4343,4351,4369,4398,4416,4421,4426,4464,4470,4483,4496,4509,4522,4527,4536],{"__ignoreMap":156},[166,3949,3950,3952,3954,3956,3958,3960,3962,3964,3966],{"class":168,"line":169},[166,3951,173],{"class":172},[166,3953,177],{"class":176},[166,3955,181],{"class":180},[166,3957,184],{"class":180},[166,3959,187],{"class":172},[166,3961,190],{"class":172},[166,3963,194],{"class":193},[166,3965,190],{"class":172},[166,3967,199],{"class":172},[166,3969,3970,3972,3974,3976,3978,3980,3982,3984,3986,3988,3990,3992],{"class":168,"line":202},[166,3971,206],{"class":205},[166,3973,209],{"class":172},[166,3975,488],{"class":212},[166,3977,240],{"class":172},[166,3979,213],{"class":212},[166,3981,240],{"class":172},[166,3983,2799],{"class":212},[166,3985,216],{"class":172},[166,3987,219],{"class":205},[166,3989,222],{"class":172},[166,3991,162],{"class":193},[166,3993,227],{"class":172},[166,3995,3996,3998],{"class":168,"line":230},[166,3997,206],{"class":205},[166,3999,1339],{"class":172},[166,4001,4002,4005],{"class":168,"line":257},[166,4003,4004],{"class":212}," BarcodeDetectorOverlay",[166,4006,1351],{"class":172},[166,4008,4009,4011,4013],{"class":168,"line":264},[166,4010,2820],{"class":205},[166,4012,2823],{"class":212},[166,4014,1351],{"class":172},[166,4016,4017,4019],{"class":168,"line":300},[166,4018,349],{"class":212},[166,4020,1351],{"class":172},[166,4022,4023,4025,4027,4029,4031],{"class":168,"line":346},[166,4024,340],{"class":172},[166,4026,219],{"class":205},[166,4028,222],{"class":172},[166,4030,252],{"class":193},[166,4032,227],{"class":172},[166,4034,4035,4037,4039,4041,4043,4045,4047,4049],{"class":168,"line":355},[166,4036,206],{"class":205},[166,4038,209],{"class":172},[166,4040,2855],{"class":212},[166,4042,216],{"class":172},[166,4044,219],{"class":205},[166,4046,222],{"class":172},[166,4048,2864],{"class":193},[166,4050,227],{"class":172},[166,4052,4053],{"class":168,"line":365},[166,4054,261],{"emptyLinePlaceholder":260},[166,4056,4057,4059,4061,4063,4065,4067,4069,4072,4074],{"class":168,"line":370},[166,4058,267],{"class":180},[166,4060,2877],{"class":212},[166,4062,187],{"class":172},[166,4064,488],{"class":275},[166,4066,286],{"class":212},[166,4068,289],{"class":172},[166,4070,4071],{"class":193},"Hello, scanner!",[166,4073,289],{"class":172},[166,4075,297],{"class":212},[166,4077,4078,4080,4082,4084,4086,4088,4090],{"class":168,"line":379},[166,4079,267],{"class":180},[166,4081,1663],{"class":212},[166,4083,187],{"class":172},[166,4085,488],{"class":275},[166,4087,286],{"class":212},[166,4089,1672],{"class":172},[166,4091,297],{"class":212},[166,4093,4094],{"class":168,"line":424},[166,4095,261],{"emptyLinePlaceholder":260},[166,4097,4098,4100,4102,4104,4106,4108,4110,4112,4114],{"class":168,"line":453},[166,4099,267],{"class":180},[166,4101,2919],{"class":212},[166,4103,187],{"class":172},[166,4105,1361],{"class":172},[166,4107,1364],{"class":1209},[166,4109,1069],{"class":172},[166,4111,2823],{"class":280},[166,4113,1197],{"class":172},[166,4115,1561],{"class":180},[166,4117,4118,4121,4123,4125,4127,4129,4131,4133,4135,4137,4139,4141,4143],{"class":168,"line":458},[166,4119,4120],{"class":172}," !",[166,4122,1704],{"class":212},[166,4124,57],{"class":172},[166,4126,1571],{"class":212},[166,4128,1711],{"class":172},[166,4130,1371],{"class":212},[166,4132,57],{"class":172},[166,4134,1444],{"class":212},[166,4136,57],{"class":172},[166,4138,1449],{"class":275},[166,4140,1724],{"class":212},[166,4142,57],{"class":172},[166,4144,2960],{"class":212},[166,4146,4147],{"class":168,"line":480},[166,4148,261],{"emptyLinePlaceholder":260},[166,4150,4151],{"class":168,"line":508},[166,4152,4153],{"class":1267},"\u002F\u002F Fixed-size QR keeps the viewBox reactive-safe: img.naturalWidth is a\n",[166,4155,4156],{"class":168,"line":541},[166,4157,4158],{"class":1267},"\u002F\u002F non-reactive DOM property, so a computed reading it would never refresh\n",[166,4160,4161],{"class":168,"line":551},[166,4162,4163],{"class":1267},"\u002F\u002F once the image loads, leaving the SVG with a 0×0 coordinate space.\n",[166,4165,4166],{"class":168,"line":556},[166,4167,4168],{"class":1267},"\u002F\u002F `margin: 4` keeps the QR-spec quiet zone — Chrome's BarcodeDetector\n",[166,4170,4171],{"class":168,"line":578},[166,4172,4173],{"class":1267},"\u002F\u002F frequently refuses to lock on QRs with a smaller margin.\n",[166,4175,4176,4178,4180,4182,4184,4186,4188,4190,4192,4194,4196,4198,4200,4202,4204,4206],{"class":168,"line":584},[166,4177,267],{"class":180},[166,4179,2967],{"class":212},[166,4181,187],{"class":172},[166,4183,2855],{"class":275},[166,4185,2974],{"class":212},[166,4187,240],{"class":172},[166,4189,209],{"class":172},[166,4191,2981],{"class":176},[166,4193,1069],{"class":172},[166,4195,2987],{"class":2986},[166,4197,240],{"class":172},[166,4199,2992],{"class":176},[166,4201,1069],{"class":172},[166,4203,2997],{"class":2986},[166,4205,216],{"class":172},[166,4207,297],{"class":212},[166,4209,4210],{"class":168,"line":593},[166,4211,261],{"emptyLinePlaceholder":260},[166,4213,4214,4216,4218,4220,4222,4224,4226,4228,4230,4232,4234,4236],{"class":168,"line":598},[166,4215,267],{"class":180},[166,4217,1020],{"class":212},[166,4219,187],{"class":172},[166,4221,213],{"class":275},[166,4223,173],{"class":172},[166,4225,68],{"class":280},[166,4227,283],{"class":172},[166,4229,286],{"class":212},[166,4231,289],{"class":172},[166,4233,1037],{"class":193},[166,4235,289],{"class":172},[166,4237,297],{"class":212},[166,4239,4240,4242,4244,4246,4248,4250,4252,4255,4257,4259,4261,4263,4265,4267,4269,4271],{"class":168,"line":608},[166,4241,267],{"class":180},[166,4243,209],{"class":172},[166,4245,1240],{"class":212},[166,4247,240],{"class":172},[166,4249,317],{"class":212},[166,4251,240],{"class":172},[166,4253,4254],{"class":212}," rejected ",[166,4256,340],{"class":172},[166,4258,854],{"class":172},[166,4260,243],{"class":275},[166,4262,1059],{"class":212},[166,4264,240],{"class":172},[166,4266,209],{"class":172},[166,4268,2919],{"class":212},[166,4270,340],{"class":172},[166,4272,297],{"class":212},[166,4274,4275],{"class":168,"line":642},[166,4276,261],{"emptyLinePlaceholder":260},[166,4278,4279,4281,4284,4286,4289,4291,4293,4295],{"class":168,"line":680},[166,4280,3054],{"class":275},[166,4282,4283],{"class":212},"([qrSrc",[166,4285,240],{"class":172},[166,4287,4288],{"class":212}," prefix]",[166,4290,240],{"class":172},[166,4292,3061],{"class":172},[166,4294,1215],{"class":180},[166,4296,1339],{"class":172},[166,4298,4299,4302,4304,4306,4308,4310,4312,4315,4318,4321,4323],{"class":168,"line":690},[166,4300,4301],{"class":205}," if",[166,4303,1361],{"class":176},[166,4305,1037],{"class":212},[166,4307,57],{"class":172},[166,4309,3074],{"class":212},[166,4311,3077],{"class":172},[166,4313,4314],{"class":212},"complete",[166,4316,4317],{"class":176},") ",[166,4319,4320],{"class":172},"void",[166,4322,1240],{"class":275},[166,4324,1171],{"class":176},[166,4326,4327,4329],{"class":168,"line":699},[166,4328,340],{"class":172},[166,4330,297],{"class":212},[166,4332,4333,4335,4337],{"class":168,"line":3161},[166,4334,358],{"class":172},[166,4336,177],{"class":176},[166,4338,199],{"class":172},[166,4340,4341],{"class":168,"line":3167},[166,4342,261],{"emptyLinePlaceholder":260},[166,4344,4345,4347,4349],{"class":168,"line":3200},[166,4346,173],{"class":172},[166,4348,154],{"class":176},[166,4350,199],{"class":172},[166,4352,4353,4355,4357,4359,4361,4363,4365,4367],{"class":168,"line":3241},[166,4354,382],{"class":172},[166,4356,3172],{"class":176},[166,4358,3175],{"class":180},[166,4360,187],{"class":172},[166,4362,190],{"class":172},[166,4364,3182],{"class":193},[166,4366,190],{"class":172},[166,4368,505],{"class":172},[166,4370,4371,4373,4375,4377,4379,4381,4383,4385,4387,4389,4391,4394,4396],{"class":168,"line":3246},[166,4372,382],{"class":172},[166,4374,3172],{"class":176},[166,4376,3175],{"class":180},[166,4378,187],{"class":172},[166,4380,190],{"class":172},[166,4382,1704],{"class":193},[166,4384,190],{"class":172},[166,4386,3227],{"class":180},[166,4388,187],{"class":172},[166,4390,190],{"class":172},[166,4392,4393],{"class":193},"required prefix",[166,4395,190],{"class":172},[166,4397,505],{"class":172},[166,4399,4400,4402,4404,4406,4408,4410,4412,4414],{"class":168,"line":3265},[166,4401,382],{"class":172},[166,4403,463],{"class":176},[166,4405,466],{"class":180},[166,4407,187],{"class":172},[166,4409,190],{"class":172},[166,4411,473],{"class":193},[166,4413,190],{"class":172},[166,4415,199],{"class":172},[166,4417,4418],{"class":168,"line":3319},[166,4419,4420],{"class":1267}," \u003C!-- No `crossorigin` — data: URLs are same-origin; setting it can taint\n",[166,4422,4423],{"class":168,"line":3326},[166,4424,4425],{"class":1267}," the canvas BarcodeDetector reads from. -->\n",[166,4427,4428,4430,4432,4434,4436,4438,4440,4442,4444,4446,4448,4450,4452,4454,4456,4458,4460,4462],{"class":168,"line":3339},[166,4429,483],{"class":172},[166,4431,1037],{"class":176},[166,4433,488],{"class":180},[166,4435,187],{"class":172},[166,4437,190],{"class":172},[166,4439,1037],{"class":193},[166,4441,190],{"class":172},[166,4443,3283],{"class":180},[166,4445,187],{"class":172},[166,4447,190],{"class":172},[166,4449,3290],{"class":193},[166,4451,190],{"class":172},[166,4453,3306],{"class":180},[166,4455,187],{"class":172},[166,4457,190],{"class":172},[166,4459,2045],{"class":193},[166,4461,190],{"class":172},[166,4463,505],{"class":172},[166,4465,4466,4468],{"class":168,"line":3353},[166,4467,483],{"class":172},[166,4469,2623],{"class":176},[166,4471,4472,4475,4477,4479,4481],{"class":168,"line":3366},[166,4473,4474],{"class":180}," :detected",[166,4476,187],{"class":172},[166,4478,190],{"class":172},[166,4480,523],{"class":193},[166,4482,2637],{"class":172},[166,4484,4485,4488,4490,4492,4494],{"class":168,"line":3381},[166,4486,4487],{"class":180}," :rejected",[166,4489,187],{"class":172},[166,4491,190],{"class":172},[166,4493,1999],{"class":193},[166,4495,2637],{"class":172},[166,4497,4498,4501,4503,4505,4507],{"class":168,"line":3386},[166,4499,4500],{"class":180}," :source",[166,4502,187],{"class":172},[166,4504,190],{"class":172},[166,4506,1037],{"class":193},[166,4508,2637],{"class":172},[166,4510,4511,4514,4516,4518,4520],{"class":168,"line":3395},[166,4512,4513],{"class":180}," :label",[166,4515,187],{"class":172},[166,4517,190],{"class":172},[166,4519,3376],{"class":193},[166,4521,2637],{"class":172},[166,4523,4524],{"class":168,"line":3404},[166,4525,4526],{"class":172}," \u002F>\n",[166,4528,4530,4532,4534],{"class":168,"line":4529},44,[166,4531,544],{"class":172},[166,4533,463],{"class":176},[166,4535,199],{"class":172},[166,4537,4539,4541,4543],{"class":168,"line":4538},45,[166,4540,358],{"class":172},[166,4542,154],{"class":176},[166,4544,199],{"class":172},[158,4546,4548],{"className":160,"code":4547,"language":162,"meta":156,"style":156},"\u003Cscript setup lang=\"ts\">\nimport { BarcodeDetectorOverlay, UseBarcodeDetector } from '@orbisk\u002Fvue-use-barcode-detection'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CUseBarcodeDetector>\n \u003Ctemplate #overlay=\"{ detected, source }\">\n \u003CBarcodeDetectorOverlay :detected=\"detected\" :source=\"source\" stroke=\"hotpink\" \u002F>\n \u003Cspan class=\"badge\">{{ detected.length }} found\u003C\u002Fspan>\n \u003C\u002Ftemplate>\n \u003C\u002FUseBarcodeDetector>\n\u003C\u002Ftemplate>\n",[62,4549,4550,4570,4592,4600,4604,4612,4620,4648,4687,4715,4723,4731],{"__ignoreMap":156},[166,4551,4552,4554,4556,4558,4560,4562,4564,4566,4568],{"class":168,"line":169},[166,4553,173],{"class":172},[166,4555,177],{"class":176},[166,4557,181],{"class":180},[166,4559,184],{"class":180},[166,4561,187],{"class":172},[166,4563,190],{"class":172},[166,4565,194],{"class":193},[166,4567,190],{"class":172},[166,4569,199],{"class":172},[166,4571,4572,4574,4576,4578,4580,4582,4584,4586,4588,4590],{"class":168,"line":202},[166,4573,206],{"class":205},[166,4575,209],{"class":172},[166,4577,237],{"class":212},[166,4579,240],{"class":172},[166,4581,2175],{"class":212},[166,4583,216],{"class":172},[166,4585,219],{"class":205},[166,4587,222],{"class":172},[166,4589,252],{"class":193},[166,4591,227],{"class":172},[166,4593,4594,4596,4598],{"class":168,"line":230},[166,4595,358],{"class":172},[166,4597,177],{"class":176},[166,4599,199],{"class":172},[166,4601,4602],{"class":168,"line":257},[166,4603,261],{"emptyLinePlaceholder":260},[166,4605,4606,4608,4610],{"class":168,"line":264},[166,4607,173],{"class":172},[166,4609,154],{"class":176},[166,4611,199],{"class":172},[166,4613,4614,4616,4618],{"class":168,"line":300},[166,4615,382],{"class":172},[166,4617,2212],{"class":176},[166,4619,199],{"class":172},[166,4621,4622,4624,4626,4628,4630,4632,4634,4636,4638,4640,4642,4644,4646],{"class":168,"line":346},[166,4623,483],{"class":172},[166,4625,154],{"class":176},[166,4627,2594],{"class":172},[166,4629,2106],{"class":180},[166,4631,187],{"class":172},[166,4633,190],{"class":172},[166,4635,2603],{"class":172},[166,4637,317],{"class":212},[166,4639,240],{"class":172},[166,4641,2610],{"class":212},[166,4643,340],{"class":172},[166,4645,190],{"class":172},[166,4647,199],{"class":172},[166,4649,4650,4652,4654,4656,4658,4660,4662,4664,4666,4668,4670,4672,4674,4677,4679,4681,4683,4685],{"class":168,"line":355},[166,4651,645],{"class":172},[166,4653,513],{"class":176},[166,4655,516],{"class":180},[166,4657,187],{"class":172},[166,4659,190],{"class":172},[166,4661,523],{"class":193},[166,4663,190],{"class":172},[166,4665,528],{"class":180},[166,4667,187],{"class":172},[166,4669,190],{"class":172},[166,4671,2649],{"class":193},[166,4673,190],{"class":172},[166,4675,4676],{"class":180}," stroke",[166,4678,187],{"class":172},[166,4680,190],{"class":172},[166,4682,2663],{"class":193},[166,4684,190],{"class":172},[166,4686,505],{"class":172},[166,4688,4689,4691,4693,4695,4697,4699,4702,4704,4706,4709,4711,4713],{"class":168,"line":365},[166,4690,645],{"class":172},[166,4692,166],{"class":176},[166,4694,466],{"class":180},[166,4696,187],{"class":172},[166,4698,190],{"class":172},[166,4700,4701],{"class":193},"badge",[166,4703,190],{"class":172},[166,4705,283],{"class":172},[166,4707,4708],{"class":212},"{{ detected.length }} found",[166,4710,358],{"class":172},[166,4712,166],{"class":176},[166,4714,199],{"class":172},[166,4716,4717,4719,4721],{"class":168,"line":370},[166,4718,683],{"class":172},[166,4720,154],{"class":176},[166,4722,199],{"class":172},[166,4724,4725,4727,4729],{"class":168,"line":379},[166,4726,544],{"class":172},[166,4728,2212],{"class":176},[166,4730,199],{"class":172},[166,4732,4733,4735,4737],{"class":168,"line":424},[166,4734,358],{"class":172},[166,4736,154],{"class":176},[166,4738,199],{"class":172},[1743,4740,4741,4754],{},[1746,4742,4743],{},[1749,4744,4745,4748,4750,4752],{},[1752,4746,4747],{},"Prop",[1752,4749,1757],{},[1752,4751,1760],{},[1752,4753,1763],{},[1765,4755,4756,4774,4792,4823,4849,4868,4887,4906,4925,4949,4972,4991],{},[1749,4757,4758,4762,4766,4771],{},[1770,4759,4760],{},[62,4761,523],{},[1770,4763,4764],{},[62,4765,3737],{},[1770,4767,4768],{},[1782,4769,4770],{},"required",[1770,4772,4773],{},"Accepted barcodes — drawn with the primary fill\u002Fstroke.",[1749,4775,4776,4780,4784,4789],{},[1770,4777,4778],{},[62,4779,1999],{},[1770,4781,4782],{},[62,4783,3737],{},[1770,4785,4786],{},[62,4787,4788],{},"[]",[1770,4790,4791],{},"Rejected barcodes — drawn with the secondary fill\u002Fstroke.",[1749,4793,4794,4798,4802,4807],{},[1770,4795,4796],{},[62,4797,2649],{},[1770,4799,4800],{},[62,4801,3813],{},[1770,4803,4804],{},[62,4805,4806],{},"null",[1770,4808,2101,4809,1818,4811,1818,4813,4815,4816,727,4819,4822],{},[62,4810,2095],{},[62,4812,2728],{},[62,4814,2731],{}," the overlay is drawn over. The overlay tracks its visible rect (mirroring ",[62,4817,4818],{},"object-fit",[62,4820,4821],{},"object-position",") and aligns the SVG to it.",[1749,4824,4825,4830,4835,4840],{},[1770,4826,4827],{},[62,4828,4829],{},"viewBox",[1770,4831,4832],{},[62,4833,4834],{},"string",[1770,4836,4837],{},[1782,4838,4839],{},"auto",[1770,4841,4842,4843,4845,4846,4848],{},"SVG ",[62,4844,4829],{},". Auto-derived from ",[62,4847,2649],{},"'s intrinsic size; pass to override (e.g. for off-screen detection sources).",[1749,4850,4851,4856,4860,4865],{},[1770,4852,4853],{},[62,4854,4855],{},"fill",[1770,4857,4858],{},[62,4859,4834],{},[1770,4861,4862],{},[62,4863,4864],{},"'rgba(0, 200, 120, 0.15)'",[1770,4866,4867],{},"Fill for accepted polygons.",[1749,4869,4870,4875,4879,4884],{},[1770,4871,4872],{},[62,4873,4874],{},"stroke",[1770,4876,4877],{},[62,4878,4834],{},[1770,4880,4881],{},[62,4882,4883],{},"'rgb(0, 200, 120)'",[1770,4885,4886],{},"Stroke for accepted polygons.",[1749,4888,4889,4894,4898,4903],{},[1770,4890,4891],{},[62,4892,4893],{},"rejectedFill",[1770,4895,4896],{},[62,4897,4834],{},[1770,4899,4900],{},[62,4901,4902],{},"'rgba(220, 60, 60, 0.12)'",[1770,4904,4905],{},"Fill for rejected polygons.",[1749,4907,4908,4913,4917,4922],{},[1770,4909,4910],{},[62,4911,4912],{},"rejectedStroke",[1770,4914,4915],{},[62,4916,4834],{},[1770,4918,4919],{},[62,4920,4921],{},"'rgb(220, 60, 60)'",[1770,4923,4924],{},"Stroke for rejected polygons.",[1749,4926,4927,4932,4937,4942],{},[1770,4928,4929],{},[62,4930,4931],{},"strokeWidth",[1770,4933,4934],{},[62,4935,4936],{},"number",[1770,4938,4939],{},[62,4940,4941],{},"4",[1770,4943,4944,4945,4948],{},"Stroke width (in viewBox units, but rendered with ",[62,4946,4947],{},"non-scaling-stroke",").",[1749,4950,4951,4956,4961,4965],{},[1770,4952,4953],{},[62,4954,4955],{},"label",[1770,4957,4958],{},[62,4959,4960],{},"(b, accepted) => string | null | undefined",[1770,4962,4963],{},[1782,4964,1890],{},[1770,4966,4967,4968,4971],{},"Render a label inside each polygon. Receives the barcode and whether it was accepted; return falsy to skip that detection's label. Long strings are auto-truncated with ",[62,4969,4970],{},"…"," to fit the polygon width; very narrow polygons get no label.",[1749,4973,4974,4979,4983,4988],{},[1770,4975,4976],{},[62,4977,4978],{},"labelColor",[1770,4980,4981],{},[62,4982,4834],{},[1770,4984,4985],{},[62,4986,4987],{},"'#fff'",[1770,4989,4990],{},"Label text fill color.",[1749,4992,4993,4998,5002,5007],{},[1770,4994,4995],{},[62,4996,4997],{},"labelFontSize",[1770,4999,5000],{},[62,5001,4936],{},[1770,5003,5004],{},[62,5005,5006],{},"24",[1770,5008,5009],{},"Label font size in viewBox units. The polygon stroke is reused as the text outline so labels stay legible on busy backgrounds. Lower this if your barcodes are small relative to the source — auto-truncate is keyed off this size.",[5011,5012,5014],"h4",{"id":5013},"highlight-accepted-vs-rejected-barcodes","Highlight accepted vs. rejected barcodes",[47,5016,5017,5018,5020,5021,5024,5025,5028,5029,5031,5032,5034],{},"Combine the ",[62,5019,1253],{}," predicate with the dual-color overlay to give users instant feedback on ",[1782,5022,5023],{},"why"," a scan was ignored — e.g. \"yes I see this code, but it's not a QR code so I'm waiting for one.\" ",[62,5026,5027],{},"\u003CUseBarcodeDetector>"," wires this up automatically: the default overlay receives both ",[62,5030,523],{}," (accepted) and ",[62,5033,1999],{}," lists, and renders them in green \u002F red respectively.",[158,5036,5038],{"className":160,"code":5037,"language":162,"meta":156,"style":156},"\u003Cscript setup lang=\"ts\">\nimport type { DetectedBarcode } from '@orbisk\u002Fvue-use-barcode-detection'\nimport { UseBarcodeDetector } from '@orbisk\u002Fvue-use-barcode-detection'\n\n\u002F\u002F Only QR codes count — everything else gets the rejected styling.\nconst onlyQr = (b: DetectedBarcode) => b.format === 'qr_code'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CUseBarcodeDetector\n once\n :accept=\"onlyQr\"\n v-slot=\"{ detected, rejected, isActive, start, stop }\"\n >\n \u003Cbutton @click=\"isActive ? stop() : start()\">\n {{ isActive ? 'Stop' : 'Start camera' }}\n \u003C\u002Fbutton>\n \u003Cp v-if=\"rejected.length && !detected.length\">\n Found {{ rejected.length }} barcode(s), but none are QR codes — keep moving the camera.\n \u003C\u002Fp>\n \u003Cul>\n \u003Cli v-for=\"b in detected\" :key=\"b.rawValue\">\n \u003Cstrong>{{ b.format }}\u003C\u002Fstrong> — \u003Ccode>{{ b.rawValue }}\u003C\u002Fcode>\n \u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002FUseBarcodeDetector>\n\u003C\u002Ftemplate>\n",[62,5039,5040,5060,5080,5098,5102,5107,5141,5149,5153,5161,5167,5172,5185,5198,5202,5220,5224,5232,5251,5256,5264,5272,5300,5332,5340,5348,5356],{"__ignoreMap":156},[166,5041,5042,5044,5046,5048,5050,5052,5054,5056,5058],{"class":168,"line":169},[166,5043,173],{"class":172},[166,5045,177],{"class":176},[166,5047,181],{"class":180},[166,5049,184],{"class":180},[166,5051,187],{"class":172},[166,5053,190],{"class":172},[166,5055,194],{"class":193},[166,5057,190],{"class":172},[166,5059,199],{"class":172},[166,5061,5062,5064,5066,5068,5070,5072,5074,5076,5078],{"class":168,"line":202},[166,5063,206],{"class":205},[166,5065,3187],{"class":205},[166,5067,209],{"class":172},[166,5069,2823],{"class":212},[166,5071,216],{"class":172},[166,5073,219],{"class":205},[166,5075,222],{"class":172},[166,5077,252],{"class":193},[166,5079,227],{"class":172},[166,5081,5082,5084,5086,5088,5090,5092,5094,5096],{"class":168,"line":230},[166,5083,206],{"class":205},[166,5085,209],{"class":172},[166,5087,2175],{"class":212},[166,5089,216],{"class":172},[166,5091,219],{"class":205},[166,5093,222],{"class":172},[166,5095,252],{"class":193},[166,5097,227],{"class":172},[166,5099,5100],{"class":168,"line":257},[166,5101,261],{"emptyLinePlaceholder":260},[166,5103,5104],{"class":168,"line":264},[166,5105,5106],{"class":1267},"\u002F\u002F Only QR codes count — everything else gets the rejected styling.\n",[166,5108,5109,5111,5113,5115,5117,5119,5121,5123,5125,5127,5129,5131,5133,5135,5137,5139],{"class":168,"line":300},[166,5110,267],{"class":180},[166,5112,1510],{"class":212},[166,5114,187],{"class":172},[166,5116,1361],{"class":172},[166,5118,1364],{"class":1209},[166,5120,1069],{"class":172},[166,5122,2823],{"class":280},[166,5124,1197],{"class":172},[166,5126,1215],{"class":180},[166,5128,1371],{"class":212},[166,5130,57],{"class":172},[166,5132,1376],{"class":212},[166,5134,1379],{"class":172},[166,5136,222],{"class":172},[166,5138,1384],{"class":193},[166,5140,227],{"class":172},[166,5142,5143,5145,5147],{"class":168,"line":346},[166,5144,358],{"class":172},[166,5146,177],{"class":176},[166,5148,199],{"class":172},[166,5150,5151],{"class":168,"line":355},[166,5152,261],{"emptyLinePlaceholder":260},[166,5154,5155,5157,5159],{"class":168,"line":365},[166,5156,173],{"class":172},[166,5158,154],{"class":176},[166,5160,199],{"class":172},[166,5162,5163,5165],{"class":168,"line":370},[166,5164,382],{"class":172},[166,5166,3108],{"class":176},[166,5168,5169],{"class":168,"line":379},[166,5170,5171],{"class":180}," once\n",[166,5173,5174,5176,5178,5180,5183],{"class":168,"line":424},[166,5175,3136],{"class":180},[166,5177,187],{"class":172},[166,5179,190],{"class":172},[166,5181,5182],{"class":193},"onlyQr",[166,5184,2637],{"class":172},[166,5186,5187,5189,5191,5193,5196],{"class":168,"line":453},[166,5188,3149],{"class":180},[166,5190,187],{"class":172},[166,5192,190],{"class":172},[166,5194,5195],{"class":193},"{ detected, rejected, isActive, start, stop }",[166,5197,2637],{"class":172},[166,5199,5200],{"class":168,"line":458},[166,5201,3164],{"class":172},[166,5203,5204,5206,5208,5210,5212,5214,5216,5218],{"class":168,"line":480},[166,5205,483],{"class":172},[166,5207,561],{"class":176},[166,5209,564],{"class":180},[166,5211,187],{"class":172},[166,5213,190],{"class":172},[166,5215,571],{"class":193},[166,5217,190],{"class":172},[166,5219,199],{"class":172},[166,5221,5222],{"class":168,"line":508},[166,5223,2249],{"class":212},[166,5225,5226,5228,5230],{"class":168,"line":541},[166,5227,683],{"class":172},[166,5229,561],{"class":176},[166,5231,199],{"class":172},[166,5233,5234,5236,5238,5240,5242,5244,5247,5249],{"class":168,"line":551},[166,5235,483],{"class":172},[166,5237,47],{"class":176},[166,5239,387],{"class":180},[166,5241,187],{"class":172},[166,5243,190],{"class":172},[166,5245,5246],{"class":193},"rejected.length && !detected.length",[166,5248,190],{"class":172},[166,5250,199],{"class":172},[166,5252,5253],{"class":168,"line":556},[166,5254,5255],{"class":212}," Found {{ rejected.length }} barcode(s), but none are QR codes — keep moving the camera.\n",[166,5257,5258,5260,5262],{"class":168,"line":578},[166,5259,683],{"class":172},[166,5261,47],{"class":176},[166,5263,199],{"class":172},[166,5265,5266,5268,5270],{"class":168,"line":584},[166,5267,483],{"class":172},[166,5269,603],{"class":176},[166,5271,199],{"class":172},[166,5273,5274,5276,5278,5280,5282,5284,5286,5288,5290,5292,5294,5296,5298],{"class":168,"line":593},[166,5275,645],{"class":172},[166,5277,613],{"class":176},[166,5279,616],{"class":180},[166,5281,187],{"class":172},[166,5283,190],{"class":172},[166,5285,2280],{"class":193},[166,5287,190],{"class":172},[166,5289,628],{"class":180},[166,5291,187],{"class":172},[166,5293,190],{"class":172},[166,5295,2291],{"class":193},[166,5297,190],{"class":172},[166,5299,199],{"class":172},[166,5301,5302,5304,5306,5308,5310,5312,5314,5316,5318,5320,5322,5324,5326,5328,5330],{"class":168,"line":598},[166,5303,2300],{"class":172},[166,5305,648],{"class":176},[166,5307,283],{"class":172},[166,5309,653],{"class":212},[166,5311,358],{"class":172},[166,5313,648],{"class":176},[166,5315,283],{"class":172},[166,5317,662],{"class":212},[166,5319,173],{"class":172},[166,5321,62],{"class":176},[166,5323,283],{"class":172},[166,5325,671],{"class":212},[166,5327,358],{"class":172},[166,5329,62],{"class":176},[166,5331,199],{"class":172},[166,5333,5334,5336,5338],{"class":168,"line":608},[166,5335,2333],{"class":172},[166,5337,613],{"class":176},[166,5339,199],{"class":172},[166,5341,5342,5344,5346],{"class":168,"line":642},[166,5343,683],{"class":172},[166,5345,603],{"class":176},[166,5347,199],{"class":172},[166,5349,5350,5352,5354],{"class":168,"line":680},[166,5351,544],{"class":172},[166,5353,2212],{"class":176},[166,5355,199],{"class":172},[166,5357,5358,5360,5362],{"class":168,"line":690},[166,5359,358],{"class":172},[166,5361,154],{"class":176},[166,5363,199],{"class":172},[47,5365,5366,5367,5369,5370,5373],{},"If you're using the composable directly, pull ",[62,5368,1999],{}," from the return and pass it to ",[62,5371,5372],{},"\u003CBarcodeDetectorOverlay>"," yourself:",[158,5375,5377],{"className":160,"code":5376,"language":162,"meta":156,"style":156},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue'\nimport {\n BarcodeDetectorOverlay,\n type DetectedBarcode,\n useBarcodeDetector,\n} from '@orbisk\u002Fvue-use-barcode-detection'\n\nconst video = useTemplateRef\u003CHTMLVideoElement>('video')\nconst { detected, rejected, start, isActive } = useBarcodeDetector(video, {\n accept: (b: DetectedBarcode) => b.format === 'qr_code',\n once: true,\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cdiv class=\"stage\">\n \u003Cvideo ref=\"video\" playsinline muted \u002F>\n \u003CBarcodeDetectorOverlay :detected=\"detected\" :rejected=\"rejected\" :source=\"video\" \u002F>\n \u003C\u002Fdiv>\n \u003Cbutton v-if=\"!isActive\" @click=\"start\">Start camera\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[62,5378,5379,5399,5417,5423,5429,5437,5443,5455,5459,5485,5519,5553,5563,5569,5577,5581,5589,5607,5629,5668,5676,5714],{"__ignoreMap":156},[166,5380,5381,5383,5385,5387,5389,5391,5393,5395,5397],{"class":168,"line":169},[166,5382,173],{"class":172},[166,5384,177],{"class":176},[166,5386,181],{"class":180},[166,5388,184],{"class":180},[166,5390,187],{"class":172},[166,5392,190],{"class":172},[166,5394,194],{"class":193},[166,5396,190],{"class":172},[166,5398,199],{"class":172},[166,5400,5401,5403,5405,5407,5409,5411,5413,5415],{"class":168,"line":202},[166,5402,206],{"class":205},[166,5404,209],{"class":172},[166,5406,213],{"class":212},[166,5408,216],{"class":172},[166,5410,219],{"class":205},[166,5412,222],{"class":172},[166,5414,162],{"class":193},[166,5416,227],{"class":172},[166,5418,5419,5421],{"class":168,"line":230},[166,5420,206],{"class":205},[166,5422,1339],{"class":172},[166,5424,5425,5427],{"class":168,"line":257},[166,5426,4004],{"class":212},[166,5428,1351],{"class":172},[166,5430,5431,5433,5435],{"class":168,"line":264},[166,5432,2820],{"class":205},[166,5434,2823],{"class":212},[166,5436,1351],{"class":172},[166,5438,5439,5441],{"class":168,"line":300},[166,5440,349],{"class":212},[166,5442,1351],{"class":172},[166,5444,5445,5447,5449,5451,5453],{"class":168,"line":346},[166,5446,340],{"class":172},[166,5448,219],{"class":205},[166,5450,222],{"class":172},[166,5452,252],{"class":193},[166,5454,227],{"class":172},[166,5456,5457],{"class":168,"line":355},[166,5458,261],{"emptyLinePlaceholder":260},[166,5460,5461,5463,5465,5467,5469,5471,5473,5475,5477,5479,5481,5483],{"class":168,"line":365},[166,5462,267],{"class":180},[166,5464,270],{"class":212},[166,5466,187],{"class":172},[166,5468,213],{"class":275},[166,5470,173],{"class":172},[166,5472,75],{"class":280},[166,5474,283],{"class":172},[166,5476,286],{"class":212},[166,5478,289],{"class":172},[166,5480,292],{"class":193},[166,5482,289],{"class":172},[166,5484,297],{"class":212},[166,5486,5487,5489,5491,5493,5495,5498,5500,5502,5504,5507,5509,5511,5513,5515,5517],{"class":168,"line":370},[166,5488,267],{"class":180},[166,5490,209],{"class":172},[166,5492,317],{"class":212},[166,5494,240],{"class":172},[166,5496,5497],{"class":212}," rejected",[166,5499,240],{"class":172},[166,5501,332],{"class":212},[166,5503,240],{"class":172},[166,5505,5506],{"class":212}," isActive ",[166,5508,340],{"class":172},[166,5510,854],{"class":172},[166,5512,243],{"class":275},[166,5514,1290],{"class":212},[166,5516,240],{"class":172},[166,5518,1339],{"class":172},[166,5520,5521,5523,5525,5527,5529,5531,5533,5535,5537,5539,5541,5543,5545,5547,5549,5551],{"class":168,"line":379},[166,5522,1356],{"class":275},[166,5524,1069],{"class":172},[166,5526,1361],{"class":172},[166,5528,1364],{"class":1209},[166,5530,1069],{"class":172},[166,5532,2823],{"class":280},[166,5534,1197],{"class":172},[166,5536,1215],{"class":180},[166,5538,1371],{"class":212},[166,5540,57],{"class":172},[166,5542,1376],{"class":212},[166,5544,1379],{"class":172},[166,5546,222],{"class":172},[166,5548,1384],{"class":193},[166,5550,289],{"class":172},[166,5552,1351],{"class":172},[166,5554,5555,5557,5559,5561],{"class":168,"line":424},[166,5556,1344],{"class":176},[166,5558,1069],{"class":172},[166,5560,1073],{"class":1072},[166,5562,1351],{"class":172},[166,5564,5565,5567],{"class":168,"line":453},[166,5566,340],{"class":172},[166,5568,297],{"class":212},[166,5570,5571,5573,5575],{"class":168,"line":458},[166,5572,358],{"class":172},[166,5574,177],{"class":176},[166,5576,199],{"class":172},[166,5578,5579],{"class":168,"line":480},[166,5580,261],{"emptyLinePlaceholder":260},[166,5582,5583,5585,5587],{"class":168,"line":508},[166,5584,173],{"class":172},[166,5586,154],{"class":176},[166,5588,199],{"class":172},[166,5590,5591,5593,5595,5597,5599,5601,5603,5605],{"class":168,"line":541},[166,5592,382],{"class":172},[166,5594,463],{"class":176},[166,5596,466],{"class":180},[166,5598,187],{"class":172},[166,5600,190],{"class":172},[166,5602,473],{"class":193},[166,5604,190],{"class":172},[166,5606,199],{"class":172},[166,5608,5609,5611,5613,5615,5617,5619,5621,5623,5625,5627],{"class":168,"line":551},[166,5610,483],{"class":172},[166,5612,292],{"class":176},[166,5614,488],{"class":180},[166,5616,187],{"class":172},[166,5618,190],{"class":172},[166,5620,292],{"class":193},[166,5622,190],{"class":172},[166,5624,499],{"class":180},[166,5626,502],{"class":180},[166,5628,505],{"class":172},[166,5630,5631,5633,5635,5637,5639,5641,5643,5645,5648,5650,5652,5654,5656,5658,5660,5662,5664,5666],{"class":168,"line":556},[166,5632,483],{"class":172},[166,5634,513],{"class":176},[166,5636,516],{"class":180},[166,5638,187],{"class":172},[166,5640,190],{"class":172},[166,5642,523],{"class":193},[166,5644,190],{"class":172},[166,5646,5647],{"class":180}," :rejected",[166,5649,187],{"class":172},[166,5651,190],{"class":172},[166,5653,1999],{"class":193},[166,5655,190],{"class":172},[166,5657,528],{"class":180},[166,5659,187],{"class":172},[166,5661,190],{"class":172},[166,5663,292],{"class":193},[166,5665,190],{"class":172},[166,5667,505],{"class":172},[166,5669,5670,5672,5674],{"class":168,"line":578},[166,5671,544],{"class":172},[166,5673,463],{"class":176},[166,5675,199],{"class":172},[166,5677,5678,5680,5682,5684,5686,5688,5691,5693,5695,5697,5699,5701,5703,5705,5708,5710,5712],{"class":168,"line":584},[166,5679,382],{"class":172},[166,5681,561],{"class":176},[166,5683,387],{"class":180},[166,5685,187],{"class":172},[166,5687,190],{"class":172},[166,5689,5690],{"class":193},"!isActive",[166,5692,190],{"class":172},[166,5694,564],{"class":180},[166,5696,187],{"class":172},[166,5698,190],{"class":172},[166,5700,2060],{"class":193},[166,5702,190],{"class":172},[166,5704,283],{"class":172},[166,5706,5707],{"class":212},"Start camera",[166,5709,358],{"class":172},[166,5711,561],{"class":176},[166,5713,199],{"class":172},[166,5715,5716,5718,5720],{"class":168,"line":593},[166,5717,358],{"class":172},[166,5719,154],{"class":176},[166,5721,199],{"class":172},[47,5723,5724,5725,1818,5727,1818,5729,1818,5731,5733],{},"Want different colors? Pass ",[62,5726,4855],{},[62,5728,4874],{},[62,5730,4893],{},[62,5732,4912],{}," directly:",[158,5735,5737],{"className":160,"code":5736,"language":162,"meta":156,"style":156},"\u003CBarcodeDetectorOverlay\n :detected=\"detected\"\n :rejected=\"rejected\"\n :source=\"video\"\n stroke=\"lime\"\n rejected-stroke=\"orange\"\n rejected-fill=\"rgba(255, 165, 0, 0.1)\"\n\u002F>\n",[62,5738,5739,5745,5760,5774,5788,5802,5816,5830],{"__ignoreMap":156},[166,5740,5741,5743],{"class":168,"line":169},[166,5742,173],{"class":172},[166,5744,2623],{"class":176},[166,5746,5747,5750,5752,5754,5756,5758],{"class":168,"line":202},[166,5748,5749],{"class":172}," :",[166,5751,523],{"class":180},[166,5753,187],{"class":172},[166,5755,190],{"class":172},[166,5757,523],{"class":212},[166,5759,2637],{"class":172},[166,5761,5762,5764,5766,5768,5770,5772],{"class":168,"line":230},[166,5763,5749],{"class":172},[166,5765,1999],{"class":180},[166,5767,187],{"class":172},[166,5769,190],{"class":172},[166,5771,1999],{"class":212},[166,5773,2637],{"class":172},[166,5775,5776,5778,5780,5782,5784,5786],{"class":168,"line":257},[166,5777,5749],{"class":172},[166,5779,2649],{"class":180},[166,5781,187],{"class":172},[166,5783,190],{"class":172},[166,5785,292],{"class":212},[166,5787,2637],{"class":172},[166,5789,5790,5793,5795,5797,5800],{"class":168,"line":264},[166,5791,5792],{"class":180}," stroke",[166,5794,187],{"class":172},[166,5796,190],{"class":172},[166,5798,5799],{"class":193},"lime",[166,5801,2637],{"class":172},[166,5803,5804,5807,5809,5811,5814],{"class":168,"line":300},[166,5805,5806],{"class":180}," rejected-stroke",[166,5808,187],{"class":172},[166,5810,190],{"class":172},[166,5812,5813],{"class":193},"orange",[166,5815,2637],{"class":172},[166,5817,5818,5821,5823,5825,5828],{"class":168,"line":346},[166,5819,5820],{"class":180}," rejected-fill",[166,5822,187],{"class":172},[166,5824,190],{"class":172},[166,5826,5827],{"class":193},"rgba(255, 165, 0, 0.1)",[166,5829,2637],{"class":172},[166,5831,5832],{"class":168,"line":355},[166,5833,5834],{"class":212},"\u002F>\n",[140,5836,5838],{"id":5837},"ssr-hydration","SSR \u002F hydration",[47,5840,5841,5842,69,5844,5847,5848,5851,5852,5854],{},"Both the composable and the component are SSR-safe — they don't touch ",[62,5843,1906],{},[62,5845,5846],{},"navigator",", or any browser-only API during setup. All side effects (creating the detector, requesting the camera, starting the RAF loop) are deferred to ",[62,5849,5850],{},"onMounted",", so server-side rendering produces only the static ",[62,5853,2095],{}," element with no overlay.",[47,5856,5857,5858,5860,5861,5864,5865,5867,5868,5871,5872,5875],{},"To prevent hydration mismatches in slot-rendered UI, the ",[62,5859,1947],{}," slot prop is gated on ",[62,5862,5863],{},"useMounted",": it stays ",[62,5866,1519],{}," during SSR ",[1782,5869,5870],{},"and"," during the client's first render, then flips to its real value once the component mounts. This means a template like ",[62,5873,5874],{},"\u003Cp v-if=\"!isSupported\">unsupported\u003C\u002Fp>"," won't trigger a hydration warning.",[47,5877,5878,5879,1069],{},"If you want to skip server rendering entirely (e.g. in Nuxt), wrap the component in ",[62,5880,5881],{},"\u003CClientOnly>",[158,5883,5885],{"className":160,"code":5884,"language":162,"meta":156,"style":156},"\u003Ctemplate>\n \u003CClientOnly>\n \u003CUseBarcodeDetector \u002F>\n \u003C\u002FClientOnly>\n\u003C\u002Ftemplate>\n",[62,5886,5887,5895,5904,5912,5920],{"__ignoreMap":156},[166,5888,5889,5891,5893],{"class":168,"line":169},[166,5890,173],{"class":172},[166,5892,154],{"class":176},[166,5894,199],{"class":172},[166,5896,5897,5899,5902],{"class":168,"line":202},[166,5898,382],{"class":172},[166,5900,5901],{"class":176},"ClientOnly",[166,5903,199],{"class":172},[166,5905,5906,5908,5910],{"class":168,"line":230},[166,5907,483],{"class":172},[166,5909,2212],{"class":176},[166,5911,505],{"class":172},[166,5913,5914,5916,5918],{"class":168,"line":257},[166,5915,544],{"class":172},[166,5917,5901],{"class":176},[166,5919,199],{"class":172},[166,5921,5922,5924,5926],{"class":168,"line":264},[166,5923,358],{"class":172},[166,5925,154],{"class":176},[166,5927,199],{"class":172},[140,5929,5931],{"id":5930},"exposed-instance","Exposed instance",[47,5933,5934,5935,5937,5938,69,5940,5943],{},"The component exposes the entire return of ",[62,5936,16],{}," on its instance — so you can grab a template ref and call ",[62,5939,130],{},[62,5941,5942],{},"stop()",", etc. from outside.",[158,5945,5947],{"className":160,"code":5946,"language":162,"meta":156,"style":156},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue'\nimport { UseBarcodeDetector } from '@orbisk\u002Fvue-use-barcode-detection'\n\nconst scanner = useTemplateRef\u003CInstanceType\u003Ctypeof UseBarcodeDetector>>('scanner')\n\nfunction rescan() {\n scanner.value?.stop()\n scanner.value?.start()\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CUseBarcodeDetector ref=\"scanner\" \u002F>\n \u003Cbutton @click=\"rescan\">Restart\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[62,5948,5949,5969,5987,6005,6009,6042,6046,6058,6073,6087,6092,6100,6104,6112,6130,6158],{"__ignoreMap":156},[166,5950,5951,5953,5955,5957,5959,5961,5963,5965,5967],{"class":168,"line":169},[166,5952,173],{"class":172},[166,5954,177],{"class":176},[166,5956,181],{"class":180},[166,5958,184],{"class":180},[166,5960,187],{"class":172},[166,5962,190],{"class":172},[166,5964,194],{"class":193},[166,5966,190],{"class":172},[166,5968,199],{"class":172},[166,5970,5971,5973,5975,5977,5979,5981,5983,5985],{"class":168,"line":202},[166,5972,206],{"class":205},[166,5974,209],{"class":172},[166,5976,213],{"class":212},[166,5978,216],{"class":172},[166,5980,219],{"class":205},[166,5982,222],{"class":172},[166,5984,162],{"class":193},[166,5986,227],{"class":172},[166,5988,5989,5991,5993,5995,5997,5999,6001,6003],{"class":168,"line":230},[166,5990,206],{"class":205},[166,5992,209],{"class":172},[166,5994,2175],{"class":212},[166,5996,216],{"class":172},[166,5998,219],{"class":205},[166,6000,222],{"class":172},[166,6002,252],{"class":193},[166,6004,227],{"class":172},[166,6006,6007],{"class":168,"line":257},[166,6008,261],{"emptyLinePlaceholder":260},[166,6010,6011,6013,6015,6017,6019,6021,6024,6027,6029,6032,6034,6036,6038,6040],{"class":168,"line":264},[166,6012,267],{"class":180},[166,6014,3027],{"class":212},[166,6016,187],{"class":172},[166,6018,213],{"class":275},[166,6020,173],{"class":172},[166,6022,6023],{"class":280},"InstanceType",[166,6025,6026],{"class":172},"\u003Ctypeof",[166,6028,2175],{"class":212},[166,6030,6031],{"class":172},">>",[166,6033,286],{"class":212},[166,6035,289],{"class":172},[166,6037,3045],{"class":193},[166,6039,289],{"class":172},[166,6041,297],{"class":212},[166,6043,6044],{"class":168,"line":300},[166,6045,261],{"emptyLinePlaceholder":260},[166,6047,6048,6051,6054,6056],{"class":168,"line":346},[166,6049,6050],{"class":180},"function",[166,6052,6053],{"class":275}," rescan",[166,6055,1558],{"class":172},[166,6057,1339],{"class":172},[166,6059,6060,6063,6065,6067,6069,6071],{"class":168,"line":355},[166,6061,6062],{"class":212}," scanner",[166,6064,57],{"class":172},[166,6066,3074],{"class":212},[166,6068,3077],{"class":172},[166,6070,2075],{"class":275},[166,6072,1171],{"class":176},[166,6074,6075,6077,6079,6081,6083,6085],{"class":168,"line":365},[166,6076,6062],{"class":212},[166,6078,57],{"class":172},[166,6080,3074],{"class":212},[166,6082,3077],{"class":172},[166,6084,2060],{"class":275},[166,6086,1171],{"class":176},[166,6088,6089],{"class":168,"line":370},[166,6090,6091],{"class":172},"}\n",[166,6093,6094,6096,6098],{"class":168,"line":379},[166,6095,358],{"class":172},[166,6097,177],{"class":176},[166,6099,199],{"class":172},[166,6101,6102],{"class":168,"line":424},[166,6103,261],{"emptyLinePlaceholder":260},[166,6105,6106,6108,6110],{"class":168,"line":453},[166,6107,173],{"class":172},[166,6109,154],{"class":176},[166,6111,199],{"class":172},[166,6113,6114,6116,6118,6120,6122,6124,6126,6128],{"class":168,"line":458},[166,6115,382],{"class":172},[166,6117,2212],{"class":176},[166,6119,488],{"class":180},[166,6121,187],{"class":172},[166,6123,190],{"class":172},[166,6125,3045],{"class":193},[166,6127,190],{"class":172},[166,6129,505],{"class":172},[166,6131,6132,6134,6136,6138,6140,6142,6145,6147,6149,6152,6154,6156],{"class":168,"line":480},[166,6133,382],{"class":172},[166,6135,561],{"class":176},[166,6137,564],{"class":180},[166,6139,187],{"class":172},[166,6141,190],{"class":172},[166,6143,6144],{"class":193},"rescan",[166,6146,190],{"class":172},[166,6148,283],{"class":172},[166,6150,6151],{"class":212},"Restart",[166,6153,358],{"class":172},[166,6155,561],{"class":176},[166,6157,199],{"class":172},[166,6159,6160,6162,6164],{"class":168,"line":508},[166,6161,358],{"class":172},[166,6163,154],{"class":176},[166,6165,199],{"class":172},[6167,6168,6169],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":156,"searchDepth":202,"depth":202,"links":6171},[6172,6180,6181,6182],{"id":137,"depth":202,"text":138,"children":6173},[6174,6175,6176,6177,6178,6179],{"id":142,"depth":230,"text":143},{"id":718,"depth":230,"text":719},{"id":941,"depth":230,"text":942},{"id":1146,"depth":230,"text":1147},{"id":1246,"depth":230,"text":1247},{"id":1489,"depth":230,"text":1490},{"id":1740,"depth":202,"text":1741},{"id":1925,"depth":202,"text":1926},{"id":2086,"depth":202,"text":2087,"children":6183},[6184,6185,6186,6187,6188,6189,6190,6192,6193,6194],{"id":2132,"depth":230,"text":2133},{"id":2364,"depth":230,"text":2365},{"id":2554,"depth":230,"text":2555},{"id":2711,"depth":230,"text":2712},{"id":3552,"depth":230,"text":3553},{"id":3692,"depth":230,"text":3693},{"id":3831,"depth":230,"text":6191},"overlay slot props",{"id":3900,"depth":230,"text":513},{"id":5837,"depth":230,"text":5838},{"id":5930,"depth":230,"text":5931},"Reactive wrapper around the Barcode Detection API.","md",null,{},{"title":16,"description":6195},"Z-kH_3_RKMvSAZWylzzRLRItFFt6xH4K4G15yDN7kjA",[6202,6204],{"title":5,"path":6,"stem":7,"description":6203,"icon":8,"children":-1},"Install the package and wire up your first scanner in Vue or Nuxt.",{"title":26,"path":22,"stem":23,"description":6205,"icon":27,"children":-1},"Auto-imports for the composable, scanner component, and overlay.",1778249705076]