NotAllowedError: Permission denied

[naams886]

Describe the bug
A NotAllowedError: Permission denied is triggered when calling Html5QrcodeScanner.render(). This occurs even when the browser-level camera permissions are set to "Allow." The issue appears specific to the Google Apps Script Web App environment where the code is executed within a cross-origin iframe.

To Reproduce
Steps to reproduce the behavior:

1. Deploy the provided script as a Google Apps Script Web App (executed as "Me" with "Anyone within Organization" access).
2. Open the Web App URL in Chrome.
3. Click on the "Request Camera Permissions" button.
4. Observe the red error bar showing NotAllowedError: Permission denied appears in the red UI bar immediately.

Expected behavior
The camera should initialize and show the video feed for scan the QR code.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome / Edge
• Version: Chrome (Version 145.0.7632.160) / Edge (Version 145.0.3800.97)

Smartphone (please complete the following information):

• Device: OPPO, SAMSUNG TAB
• OS: Android 16
• Browser: Chrome
• Version: 145

Additional context

• Library version: Using the latest version from unpkg
• Attempted Fixes: Switching to the non-workspace URL (omitting /a/domain/) and using Incognito mode did not resolve the issue.

[cpfmaint-source]

Barcode Scanner in Google Apps Script — The Complete Solution

Problem: Live camera barcode scanning doesn't work in Google Apps Script web apps.
Root Cause: GAS serves all HTML inside a sandboxed iframe that blocks getUserMedia() (camera access).
Solution: Open the scanner in a new window using document.write() — bypasses the iframe entirely.

---

Why Nothing Else Works

The GAS iframe sandbox

Google Apps Script renders your web app HTML inside an iframe on *.googleusercontent.com. This iframe has a sandbox attribute that does not include allow="camera". This means:

• navigator.mediaDevices.getUserMedia() — blocked (Permission denied)
• Html5Qrcode.start() (live camera mode) — blocked (uses getUserMedia internally)
• Html5QrcodeScanner widget camera mode — blocked (same reason)
• BarcodeDetector API with live video — blocked (needs getUserMedia for video stream)

What partially works (but isn't live scanning)

• Html5Qrcode.scanFile(file) — works because it decodes a static image, no camera needed
• <input type="file" accept="image/*" capture="environment"> — opens the phone camera to take a photo, then you decode the photo
• These require the user to take a photo, wait, and hope the barcode is detected from the still image. Unreliable.

What doesn't help

• setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) — controls whether other sites can iframe your app, does NOT change the sandbox on Google's own iframe
• setSandboxMode() — deprecated, GAS always uses IFRAME mode now
• Opening ?page=scanner in a new tab — GAS still wraps the served HTML in its iframe, so camera is still blocked
• Any library (QuaggaJS, ZXing, html5-qrcode) — they all need getUserMedia which is blocked by the iframe

---

The Solution: window.open() + document.write()

The trick is to not serve the scanner page through GAS at all. Instead:

1. Build the scanner HTML as a JavaScript string
2. Open a blank window with window.open('', '_blank')
3. Write the HTML directly with win.document.write(html)
4. This creates a top-level page — no iframe, no sandbox, full camera access
5. When a barcode is scanned, send the result back via window.opener.postMessage()

The parent GAS app listens for the message and receives the barcode value.

---

Complete Implementation

Prerequisites

Add the html5-qrcode library to your GAS HTML file:

<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>

Step 1: The Scanner Opener (in your GAS app JavaScript)

This code runs inside your GAS web app. When the user clicks "Scan Barcode", it opens a new window with the scanner.

// ==========================================
// BARCODE SCANNER — bypasses GAS iframe sandbox
// ==========================================

var _barcodeTargetId = null;

// Listen for results from the scanner window
window.addEventListener('message', function(e) {
  if (e.data && e.data.type === 'barcode-scanned' && e.data.value) {
    // Fill the target input field with the scanned value
    var input = document.getElementById(_barcodeTargetId);
    if (input && input.tagName === 'INPUT') {
      input.value = e.data.value;
      input.dispatchEvent(new Event('input', { bubbles: true }));
    }

    // Do whatever you need with the barcode value
    console.log('Scanned barcode:', e.data.value);

    // Example: send to server
    // google.script.run.processBarcode(e.data.value);
  }
});

function openBarcodeScanner(targetInputId) {
  _barcodeTargetId = targetInputId;

  // Build the scanner page HTML as a string
  var scannerHTML = buildScannerHTML();

  // Open a blank window and write the HTML directly
  // This page is NOT in an iframe — full camera access!
  var win = window.open('', '_blank');
  if (win) {
    win.document.write(scannerHTML);
    win.document.close();
  } else {
    // Popup was blocked by browser
    alert('Please allow popups for this site to use the barcode scanner.');
  }
}

Step 2: The Scanner HTML Builder

This builds a complete standalone HTML page as a string. The page includes:

• The html5-qrcode library (loaded from CDN)
• The Html5QrcodeScanner widget (handles its own UI, camera selection, permissions)
• postMessage to send scanned value back to the parent GAS app
• Forced back camera via videoConstraints: { facingMode: "environment" }

function buildScannerHTML() {
  return '<!DOCTYPE html><html><head>' +
    '<meta charset="utf-8">' +
    '<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">' +
    '<title>Barcode Scanner</title>' +
    '<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"><\/script>' +
    '<style>' +
      // Dark themed scanner UI
      '*{box-sizing:border-box;margin:0;padding:0}' +
      'body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#111827;color:#fff;min-height:100vh}' +
      '.hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#1f2937;border-bottom:1px solid #374151}' +
      '.hdr h1{font-size:16px;font-weight:700}' +
      '.cbtn{background:#ef4444;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer}' +
      '#qr-reader video{width:100%!important}' +
      '#res{padding:16px;text-align:center;font-size:18px;font-weight:700;color:#34d399;display:none}' +
      // Style the html5-qrcode widget buttons
      '#qr-reader__dashboard button{background:#3b82f6!important;color:#fff!important;border:none!important;border-radius:8px!important;padding:10px 20px!important;font-size:14px!important;cursor:pointer!important}' +
      'select{background:#374151!important;color:#fff!important;border:1px solid #4b5563!important;border-radius:6px!important;padding:8px!important}' +
      '#qr-reader__status_span{color:#9ca3af!important}' +
      '#qr-reader img[alt="Info icon"]{display:none!important}' +
      'a{color:#60a5fa!important}' +
    '</style></head><body>' +
    '<div class="hdr"><h1>Scan Barcode</h1><button class="cbtn" onclick="done()">Done</button></div>' +
    '<div id="qr-reader"></div>' +
    '<div id="res"></div>' +
    '<script>' +
      'var val="";' +
      'var sc=new Html5QrcodeScanner("qr-reader",{' +
        'fps:15,' +                                    // Scan 15 frames per second
        'qrbox:{width:280,height:120},' +              // Scanning box size
        'rememberLastUsedCamera:true,' +               // Remember camera choice
        'videoConstraints:{facingMode:"environment"},' + // BACK CAMERA
        'supportedScanTypes:[' +
          'Html5QrcodeScanType.SCAN_TYPE_CAMERA,' +    // Live camera scan
          'Html5QrcodeScanType.SCAN_TYPE_FILE' +       // File upload fallback
        '],' +
        'formatsToSupport:[' +                         // Barcode formats
          'Html5QrcodeSupportedFormats.CODE_128,' +
          'Html5QrcodeSupportedFormats.CODE_39,' +
          'Html5QrcodeSupportedFormats.EAN_13,' +
          'Html5QrcodeSupportedFormats.EAN_8,' +
          'Html5QrcodeSupportedFormats.UPC_A,' +
          'Html5QrcodeSupportedFormats.UPC_E,' +
          'Html5QrcodeSupportedFormats.CODE_93,' +
          'Html5QrcodeSupportedFormats.ITF,' +
          'Html5QrcodeSupportedFormats.QR_CODE' +
        ']' +
      '},false);' +

      // Render the scanner widget
      'sc.render(function(d){' +
        'val=d;' +
        'document.getElementById("res").style.display="block";' +
        'document.getElementById("res").textContent="Scanned: "+d;' +
        // Send result back to parent GAS app
        'try{if(window.opener)window.opener.postMessage({type:"barcode-scanned",value:d},"*");}catch(e){}' +
        'setTimeout(function(){done()},1200);' +  // Auto-close after 1.2 seconds
      '},function(){});' +  // onFailure: keep scanning (ignore failures)

      'function done(){' +
        'try{sc.clear();}catch(e){}' +
        'if(val&&window.opener)try{window.opener.postMessage({type:"barcode-scanned",value:val},"*");}catch(e){}' +
        'window.close();' +
      '}' +
    '<\/script></body></html>';
}

Step 3: The HTML Button

In your GAS HTML template:

<label>Barcode</label>
<div style="display:flex; gap:8px;">
  <input type="text" id="myBarcodeInput" placeholder="Scan or enter barcode">
  <button type="button" onclick="openBarcodeScanner('myBarcodeInput')">
    Scan
  </button>
</div>

Step 4: Server-Side Processing (Code.gs)

function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .setTitle('My App')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1.0');
}

// Process the scanned barcode
function processBarcode(barcode) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('Inventory');
  // ... do something with the barcode value
  return { success: true, barcode: barcode };
}

---

How the Back Camera Works

The key is the videoConstraints option passed to Html5QrcodeScanner:

videoConstraints: { facingMode: "environment" }

Value	Camera
"environment"	Back camera (rear-facing) — use this for scanning
"user"	Front camera (selfie)

The Html5QrcodeScanner widget also shows a camera dropdown if the device has multiple cameras, so users can switch if needed.

---

Why This Works

Normal GAS flow (BROKEN):
  Browser → Google's page → iframe (sandbox) → Your HTML → getUserMedia() ❌ BLOCKED

Our solution (WORKS):
  Browser → Your HTML via window.open() → getUserMedia() ✅ ALLOWED
  Scanner window → postMessage() → GAS iframe receives barcode value

The scanner page created by document.write() runs as a top-level document. It is:

• Not inside any iframe
• Not subject to iframe sandbox restrictions
• A secure context (inherits HTTPS from the opener)
• Able to request camera permissions normally

---

Supported Barcode Formats

The solution supports all major barcode formats via html5-qrcode:

Format	Type	Common Use
CODE_128	1D	General purpose, shipping
CODE_39	1D	Automotive, military, inventory
EAN_13	1D	International retail products
EAN_8	1D	Small retail products
UPC_A	1D	US/Canada retail products
UPC_E	1D	Compressed UPC for small items
CODE_93	1D	Postal, electronic components
ITF	1D	Packaging, shipping cartons
QR_CODE	2D	URLs, text, any data

Add or remove formats in the formatsToSupport array. Fewer formats = faster scanning.

---

Complete Minimal Example

A single-file GAS project that demonstrates the solution:

Code.gs:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .setTitle('Barcode Scanner Demo')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1.0');
}

function processForm(formData) {
  Logger.log('Barcode: ' + formData.barcode);
  // Save to spreadsheet, etc.
}

index.html:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 20px; max-width: 500px; margin: 0 auto; }
    input { padding: 10px; font-size: 16px; width: 100%; margin: 8px 0; border: 1px solid #ccc; border-radius: 6px; }
    button { padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; border-radius: 6px; }
    .scan-btn { background: #3b82f6; color: #fff; }
    .submit-btn { background: #10b981; color: #fff; width: 100%; margin-top: 12px; }
    .row { display: flex; gap: 8px; align-items: end; }
  </style>
</head>
<body>
  <h2>Barcode Scanner Demo</h2>

  <form id="myForm" onsubmit="event.preventDefault(); handleSubmit(this);">
    <label><strong>Item Name</strong></label>
    <input type="text" name="itemName" placeholder="Enter item name">

    <label><strong>Barcode</strong></label>
    <div class="row">
      <input type="text" id="barcodeInput" name="barcode"
             placeholder="Scan or type barcode"
             onkeydown="if(event.key==='Enter') event.preventDefault();"
             style="flex:1;">
      <button type="button" class="scan-btn" onclick="openBarcodeScanner('barcodeInput')">
        Scan
      </button>
    </div>

    <button type="submit" class="submit-btn">Save</button>
  </form>

  <div id="result" style="margin-top:20px; color:green; font-weight:bold;"></div>

  <script>
    // ==========================================
    // BARCODE SCANNER — GAS iframe bypass
    // ==========================================

    var _barcodeTargetId = null;

    window.addEventListener('message', function(e) {
      if (e.data && e.data.type === 'barcode-scanned' && e.data.value && _barcodeTargetId) {
        var input = document.getElementById(_barcodeTargetId);
        if (input) {
          input.value = e.data.value;
        }
      }
    });

    function openBarcodeScanner(targetInputId) {
      _barcodeTargetId = targetInputId;

      var html = '<!DOCTYPE html><html><head>' +
        '<meta charset="utf-8">' +
        '<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">' +
        '<title>Scan Barcode</title>' +
        '<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"><\/script>' +
        '<style>' +
          '*{box-sizing:border-box;margin:0;padding:0}' +
          'body{font-family:sans-serif;background:#111;color:#fff;min-height:100vh}' +
          '.top{display:flex;justify-content:space-between;padding:12px 16px;background:#222}' +
          '.top h1{font-size:16px}' +
          '.done{background:#e33;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer}' +
          '#res{padding:16px;text-align:center;font-size:18px;font-weight:700;color:#34d399;display:none}' +
          '#qr-reader video{width:100%!important}' +
          '#qr-reader__dashboard button{background:#3b82f6!important;color:#fff!important;border:none!important;border-radius:8px!important;padding:10px 20px!important;cursor:pointer!important}' +
          'select{background:#333!important;color:#fff!important;border:1px solid #555!important;border-radius:6px!important;padding:8px!important}' +
        '</style></head><body>' +
        '<div class="top"><h1>Scan Barcode</h1><button class="done" onclick="finish()">Done</button></div>' +
        '<div id="qr-reader"></div><div id="res"></div>' +
        '<script>' +
          'var val="";' +
          'var s=new Html5QrcodeScanner("qr-reader",{' +
            'fps:15,' +
            'qrbox:{width:280,height:120},' +
            'rememberLastUsedCamera:true,' +
            'videoConstraints:{facingMode:"environment"},' +
            'supportedScanTypes:[Html5QrcodeScanType.SCAN_TYPE_CAMERA,Html5QrcodeScanType.SCAN_TYPE_FILE],' +
            'formatsToSupport:[' +
              'Html5QrcodeSupportedFormats.CODE_128,' +
              'Html5QrcodeSupportedFormats.CODE_39,' +
              'Html5QrcodeSupportedFormats.EAN_13,' +
              'Html5QrcodeSupportedFormats.EAN_8,' +
              'Html5QrcodeSupportedFormats.UPC_A,' +
              'Html5QrcodeSupportedFormats.UPC_E,' +
              'Html5QrcodeSupportedFormats.QR_CODE' +
            ']' +
          '},false);' +
          's.render(function(d){' +
            'val=d;' +
            'document.getElementById("res").style.display="block";' +
            'document.getElementById("res").textContent="Scanned: "+d;' +
            'try{window.opener.postMessage({type:"barcode-scanned",value:d},"*");}catch(e){}' +
            'setTimeout(function(){finish()},1200);' +
          '},function(){});' +
          'function finish(){' +
            'try{s.clear();}catch(e){}' +
            'if(val&&window.opener)try{window.opener.postMessage({type:"barcode-scanned",value:val},"*");}catch(e){}' +
            'window.close();' +
          '}' +
        '<\/script></body></html>';

      var win = window.open('', '_blank');
      if (win) {
        win.document.write(html);
        win.document.close();
      } else {
        alert('Please allow popups to use the barcode scanner.');
      }
    }

    // ==========================================
    // FORM SUBMIT
    // ==========================================

    function handleSubmit(form) {
      var data = {
        itemName: form.itemName.value,
        barcode: form.barcode.value
      };
      google.script.run
        .withSuccessHandler(function() {
          document.getElementById('result').textContent = 'Saved! Barcode: ' + data.barcode;
          form.reset();
        })
        .processForm(data);
    }
  </script>
</body>
</html>

---

Troubleshooting

Issue	Cause	Fix
"Camera access denied"	GAS iframe blocking getUserMedia	Use the window.open + document.write approach above
Scanner opens but shows front camera	Default facing mode	Add videoConstraints: {facingMode: "environment"}
Popup blocked	Browser popup blocker	User must allow popups for the GAS domain
Barcode not detected	Poor lighting, too far, unsupported format	Move closer, improve lighting, check formatsToSupport includes your barcode type
Html5QrcodeScanner is not defined	Library not loaded	Ensure the CDN script tag is in your HTML <head>
Scanner works on desktop but not mobile	Mobile browser restrictions	Ensure site is served over HTTPS (GAS always is) and user grants camera permission

---

Credits

• html5-qrcode by mebjas — the scanning library
• The window.open() + document.write() iframe bypass technique

---

This solution was developed for MaintenanceHub, a maintenance and inventory tracking app built on Google Apps Script. The same technique works for any GAS web app that needs camera access.