寻求支持相机对焦功能的ReactJS移动端网页条码扫描器

Hey there! I feel your pain—hunting for the right ReactJS barcode scanner that actually handles camera focus properly can be a huge hassle, especially when mobile web is your target. Let’s break down some actionable solutions to get your scanning working reliably with focus control:

1. Build a Custom Implementation with MediaDevices + ZXing Library #

The most flexible approach is to roll your own solution using the browser’s native MediaDevices API (which lets you control camera settings) paired with the robust @zxing/library for barcode decoding. This way you have full control over focus configuration.

Here’s a quick example to get you started:

import React, { useRef, useEffect, useState } from 'react';
import { BrowserMultiFormatReader } from '@zxing/library';

const BarcodeScanner = () => {
  const videoRef = useRef(null);
  const [scannedResult, setScannedResult] = useState('');
  const codeReader = new BrowserMultiFormatReader();

  useEffect(() => {
    const startScanner = async () => {
      try {
        // Request camera access with focus control
        const stream = await navigator.mediaDevices.getUserMedia({
          video: {
            facingMode: 'environment', // Use rear camera
            focusMode: 'continuous', // Enable continuous autofocus
            // Optional: Add other constraints like resolution
            width: { ideal: 1280 },
            height: { ideal: 720 }
          }
        });

        if (videoRef.current) {
          videoRef.current.srcObject = stream;
          
          // Verify and set focus mode if supported
          const videoTrack = stream.getVideoTracks()[0];
          const capabilities = videoTrack.getCapabilities();
          if (capabilities.focusMode?.includes('continuous')) {
            await videoTrack.applyConstraints({
              advanced: [{ focusMode: 'continuous' }]
            });
          }
        }

        // Start barcode scanning
        codeReader.decodeFromVideoElement(videoRef.current, (result, err) => {
          if (result) {
            setScannedResult(result.text);
            // Optional: Stop scanning after first result
            // codeReader.reset();
          }
        });
      } catch (err) {
        console.error('Camera access error:', err);
      }
    };

    startScanner();

    // Cleanup on unmount
    return () => {
      codeReader.reset();
      videoRef.current?.srcObject?.getTracks().forEach(track => track.stop());
    };
  }, []);

  return (
    <div>
      <video ref={videoRef} autoPlay playsInline style={{ width: '100%' }} />
      {scannedResult && <p>Scanned: {scannedResult}</p>}
    </div>
  );
};

export default BarcodeScanner;

Key points here:

• We explicitly request focusMode: 'continuous' in the media constraints to enable auto-focus.
• We check the camera’s capabilities first to ensure focus control is supported (some older devices might not have this).
• The @zxing/library handles the heavy lifting of barcode decoding across formats.

2. Patch the react-webcam-barcode-scanner Library #

If you prefer sticking with the library you found, you can extend it to add focus control. Since it’s built on top of react-webcam and @zxing/library, you can access the underlying video element and adjust camera settings manually.

Here’s how you might modify it:

import React, { useRef, useEffect } from 'react';
import BarcodeScannerComponent from 'react-webcam-barcode-scanner';

const FocusedBarcodeScanner = () => {
  const webcamRef = useRef(null);

  useEffect(() => {
    const setCameraFocus = async () => {
      if (webcamRef.current?.webcam) {
        const videoElement = webcamRef.current.webcam.video;
        const stream = videoElement.srcObject;
        if (stream) {
          const videoTrack = stream.getVideoTracks()[0];
          const capabilities = videoTrack.getCapabilities();
          if (capabilities.focusMode?.includes('continuous')) {
            await videoTrack.applyConstraints({
              advanced: [{ focusMode: 'continuous' }]
            });
          }
        }
      }
    };

    // Wait for the webcam to initialize
    const timer = setTimeout(setCameraFocus, 1000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <BarcodeScannerComponent
      ref={webcamRef}
      width={1280}
      height={720}
      facingMode="environment"
      onUpdate={(err, result) => {
        if (result) {
          console.log('Scanned:', result.text);
        }
      }}
    />
  );
};

export default FocusedBarcodeScanner;

This approach grabs the underlying video element from the library’s ref, then applies the focus constraint directly to the camera track. The timeout ensures we wait for the webcam to finish initializing before adjusting settings.

3. Try the Official ZXing React Binding #

Another solid option is @zxing/react-js, the official React wrapper for the ZXing library. It’s designed to be flexible and gives you direct access to camera controls, including focus.

You can install it with:

npm install @zxing/react-js @zxing/library

Then implement it with focus control similarly to the custom example above—you’ll have access to the video stream and can apply focus constraints just like we did earlier.

Important Notes for Mobile Web #

• Make sure your website uses HTTPS: Browsers restrict camera access to secure contexts (localhost is exempt for development).
• Test on actual mobile devices: Camera capabilities can vary between devices, so always verify focus works on your target hardware.

内容的提问来源于stack exchange，提问作者Ruben Brits