求助：如何创建兼容移动端浏览器的网页版QR Code阅读器？Instascan移动端失效

Hey there, sorry to hear Instascan isn't playing nice on mobile—let's fix that. Instascan relies on older WebRTC implementations that have fallen out of sync with modern mobile browser standards, which is why you're seeing compatibility issues. Here's a reliable, mobile-first approach using modern web APIs and a lightweight, well-maintained QR decoding library:

Instead of relying on Instascan, we'll use the native MediaDevices.getUserMedia() API (for camera access) paired with jsQR—a pure JavaScript QR decoder that works seamlessly across mobile browsers. This combo is actively maintained and far more compatible with current mobile environments.

First, add the jsQR library to your project (you can use a CDN for quick setup):

<script src="https://unpkg.com/jsqr@1.4.0/dist/jsQR.min.js"></script>

Next, set up your HTML with a video element (for camera feed) and a results container:

<video id="qr-video" width="100%" height="auto" autoplay playsinline></video>
<div id="qr-result" style="margin-top: 1rem; padding: 0.5rem; border: 1px solid #eee;"></div>
<button id="start-scan" style="padding: 0.5rem 1rem; cursor: pointer;">Start Scanning</button>

Now the core JavaScript logic—this handles camera access, video streaming, and QR decoding:

const video = document.getElementById('qr-video');
const resultDiv = document.getElementById('qr-result');
const startBtn = document.getElementById('start-scan');

let activeStream;

// Handle scan start button click
startBtn.addEventListener('click', async () => {
  try {
    // Request rear camera access (default for mobile QR scanning)
    activeStream = await navigator.mediaDevices.getUserMedia({
      video: { facingMode: 'environment' }
    });
    video.srcObject = activeStream;
    
    // Start the continuous scan loop
    requestAnimationFrame(scanForQR);
    resultDiv.textContent = "Scanning for QR codes...";
  } catch (error) {
    resultDiv.textContent = `Camera access failed: ${error.message}`;
    console.error("Camera error:", error);
  }
});

// Continuous scan loop
function scanForQR() {
  if (video.readyState === video.HAVE_ENOUGH_DATA) {
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const ctx = canvas.getContext('2d');
    
    // Draw current video frame to canvas
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    
    // Decode QR code from image data
    const qrCode = jsQR(imageData.data, imageData.width, imageData.height);
    
    if (qrCode) {
      resultDiv.textContent = `Scanned: ${qrCode.data}`;
      // Optional: Stop scanning after successful read
      // activeStream.getTracks().forEach(track => track.stop());
      // return;
    }
  }
  // Repeat scan on next frame
  requestAnimationFrame(scanForQR);
}

// Clean up camera stream when page is closed
window.addEventListener('beforeunload', () => {
  if (activeStream) {
    activeStream.getTracks().forEach(track => track.stop());
  }
});

• HTTPS Requirement: All modern mobile browsers require camera access over HTTPS (localhost is exempt for development). Ensure your production site uses HTTPS to avoid permission blocks.
• playsinline Attribute: This prevents iOS from forcing the video into fullscreen mode, which would break the scanning workflow.
• Error Handling: Always account for cases where users deny camera permission or their device doesn't support camera access—don't leave users with a broken interface.
• Performance Tweaks: For older mobile devices, you can throttle the scan loop (e.g., run every 2-3 frames instead of every frame) to save battery and improve responsiveness.

This approach works reliably on:

• Chrome for Android
• Safari on iOS 11+
• Firefox for Android
• Edge for Android

If you run into edge-case issues, check the MediaDevices API compatibility status and jsQR's community issues—both are actively maintained and have solutions for most common problems.

Hope this gets your QR reader working flawlessly on mobile! Let me know if you hit any specific snags.

内容的提问来源于stack exchange，提问作者Reniel Mallari