mikael-lovqvists-claude-agent/phone-barcode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Camera selector, focus controls, and decode improvements

Browse Source 
- Camera picker with auto-selection of main back camera (index 0)
- Manual/auto focus toggle button with focus distance slider
- Dual binarizer (Hybrid + GlobalHistogram) for blur tolerance
- Only vibrate on new unique scan result
- Band canvas to restrict decoding to aim line region
- Camera select overlaid in viewfinder corner

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mikael-lovqvists-claude-agent
2026-03-21 23:53:20 +00:00
parent 730cbf5b1b
commit 2fbe6f4334
2 changed files with 48 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
index.html
View File

@@ -55,6 +55,20 @@
height: 100%;
}
#camera-select {
position: absolute;
bottom: 8px;
right: 8px;
max-width: 60%;
padding: 4px 6px;
background: rgba(0,0,0,0.6);
color: #dce4ef;
border: 1px solid #1e2a38;
border-radius: 6px;
font-family: inherit;
font-size: 11px;
}
#debug {
position: absolute;
top: 6px;
@@ -117,6 +131,24 @@
font-size: 13px;
}
#focus-auto-btn {
padding: 8px 14px;
border-radius: 6px;
border: 1px solid #1e2a38;
background: #181e28;
color: var(--dim);
font-family: inherit;
font-size: 13px;
cursor: pointer;
white-space: nowrap;
}
#focus-auto-btn.active {
background: #0d1f15;
border-color: var(--accent);
color: var(--accent);
}
#focus-slider {
flex: 1;
accent-color: var(--accent);
@@ -147,19 +179,16 @@
<video id="video" autoplay playsinline muted></video>
<canvas id="overlay"></canvas>
<div id="debug"></div>
<select id="camera-select" style="display:none;"></select>
</div>
<div id="bottom-panel">
<div id="cam-info" style="width:100%;font-size:11px;color:#5a6475;word-break:break-all;"></div>
<div id="result">Point camera at a barcode</div>
<div id="focus-row">
<label style="display:flex;align-items:center;gap:4px;cursor:pointer;">
<input id="focus-auto" type="checkbox" checked>
Auto
</label>
<button id="focus-auto-btn">Auto</button>
<input id="focus-slider" type="range" min="0" max="1.62" step="0.01" value="0.3" disabled>
<span id="focus-val">0.30m</span>
</div>
<select id="camera-select" style="display:none; width:100%; padding:8px; background:#181e28; color:#dce4ef; border:1px solid #1e2a38; border-radius:8px; font-family:inherit;"></select>
<button id="start-btn">Start Camera</button>
</div>
</div>