fix-camera-apps-script-barcode-scanner/scanner.html at master · rameezscripts/fix-camera-apps-script-barcode-scanner · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Barcode Scanner</title>
  <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Segoe UI', sans-serif; background: #0f172a; color: white;
      min-height: 100vh; padding: 20px;
      display: flex; flex-direction: column; align-items: center;
    }
    h1 { font-size: 22px; margin-bottom: 10px; }
    #reader {
      width: 100%; max-width: 500px; margin: 15px 0;
      border-radius: 12px; overflow: hidden;
    }
    .result-box {
      background: #1e293b; border: 2px solid #22d3ee; border-radius: 12px;
      padding: 15px 20px; margin: 10px 0;
      width: 100%; max-width: 500px; text-align: center;
    }
    .result-box .barcode {
      font-size: 24px; color: #22d3ee; font-weight: bold; margin: 8px 0;
    }
    .status { font-size: 14px; margin: 5px 0; }
    .status.success { color: #4ade80; }
    .status.error { color: #f87171; }
    .status.sending { color: #fbbf24; }
    .history { width: 100%; max-width: 500px; margin-top: 20px; }
    .history h3 { margin-bottom: 10px; color: #94a3b8; }
    .history-item {
      background: #1e293b; padding: 10px 15px; border-radius: 8px;
      margin: 5px 0; display: flex;
      justify-content: space-between; font-size: 14px;
    }
  </style>
</head>
<body>

  <h1>Scan Barcode</h1>
  <p style="color:#94a3b8; font-size:13px; margin-bottom:10px">
    Camera se barcode/QR scan karein — data Sheet me jayega
  </p>

  <div id="reader"></div>

  <div class="result-box" id="resultBox" style="display:none">
    <div style="font-size:13px; color:#94a3b8">Last Scanned:</div>
    <div class="barcode" id="barcodeValue">--</div>
    <div class="status" id="statusText"></div>
  </div>

  <div class="history" id="historySection" style="display:none">
    <h3>Scan History (this session)</h3>
    <div id="historyList"></div>
  </div>

  <script>
    // IMPORTANT: Apps Script Web App URL yahan paste karo
    const APPS_SCRIPT_URL = 'YOUR_APPS_SCRIPT_WEB_APP_URL_HERE';

    const scanHistory = [];
    let lastScan = '';
    let lastScanTime = 0;

    // beep on scan
    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    function beep() {
      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();
      osc.connect(gain);
      gain.connect(audioCtx.destination);
      osc.frequency.value = 1200;
      gain.gain.value = 0.3;
      osc.start();
      osc.stop(audioCtx.currentTime + 0.15);
    }

    // send barcode to Apps Script
    async function sendToSheet(barcode) {
      const el = document.getElementById('statusText');
      el.className = 'status sending';
      el.textContent = 'Sending to Google Sheet...';

      try {
        await fetch(APPS_SCRIPT_URL, {
          method: 'POST',
          mode: 'no-cors',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ barcode })
        });
        // no-cors = opaque response, assume success
        el.className = 'status success';
        el.textContent = 'Sent to Google Sheet!';
      } catch (err) {
        el.className = 'status error';
        el.textContent = 'Error: ' + err.message;
      }
    }

    // on successful scan
    function onScanSuccess(decoded) {
      const now = Date.now();
      // 3s debounce for same barcode
      if (decoded === lastScan && now - lastScanTime < 3000) return;
      lastScan = decoded;
      lastScanTime = now;

      beep();

      document.getElementById('resultBox').style.display = 'block';
      document.getElementById('barcodeValue').textContent = decoded;

      scanHistory.unshift({
        barcode: decoded,
        time: new Date().toLocaleTimeString()
      });
      updateHistory();
      sendToSheet(decoded);
    }

    function updateHistory() {
      document.getElementById('historySection').style.display = 'block';
      document.getElementById('historyList').innerHTML =
        scanHistory.slice(0, 20).map(i =>
          `<div class="history-item">
            <span>${i.barcode}</span>
            <span style="color:#64748b">${i.time}</span>
          </div>`
        ).join('');
    }

    // start camera scanner
    const scanner = new Html5Qrcode('reader');
    scanner.start(
      { facingMode: 'environment' },
      { fps: 10, qrbox: { width: 300, height: 150 }, aspectRatio: 1.5 },
      onScanSuccess
    ).catch(err => {
      document.getElementById('resultBox').style.display = 'block';
      document.getElementById('barcodeValue').textContent = 'Camera Error';
      document.getElementById('statusText').textContent = err;
      document.getElementById('statusText').className = 'status error';
    });
  </script>
</body>
</html>