如何通过quagga.js获取活跃流/视频轨道及相机流，实现变焦与手电筒功能？

Hey there! Let's tackle your Quagga.js issues and those two camera stream questions step by step.

Fixing Quagga.js getActiveTrack() Not Working #

It’s super common for Quagga’s built-in getActiveTrack() method to fail in newer browsers or certain setup scenarios—often because the library’s internal stream tracking doesn’t keep up with browser API changes. Instead of relying on that method, you can directly grab the stream from the video element Quagga creates, then control torch and zoom via the native MediaStream API.

Here’s a reliable implementation:

Quagga.init({
  inputStream: {
    name: "Live",
    type: "LiveStream",
    target: document.querySelector('#barcode-scanner-container'), // Your video container
    constraints: {
      width: 640,
      height: 480,
      facingMode: "environment" // Use rear camera (adjust if needed)
    }
  },
  decoder: {
    readers: ["code_128_reader", "ean_reader"] // Add your required barcode types
  }
}, function(err) {
  if (err) {
    console.error("Quagga init failed:", err);
    return;
  }

  // Grab the underlying video element from Quagga's DOM structure
  const videoElement = Quagga.canvas.domNode.parentNode.querySelector('video');
  
  if (videoElement && videoElement.srcObject instanceof MediaStream) {
    const stream = videoElement.srcObject;
    const videoTrack = stream.getVideoTracks()[0];

    // Activate Torch (if supported by the device)
    if (videoTrack.getCapabilities().torch) {
      videoTrack.applyConstraints({
        advanced: [{ torch: true }]
      }).catch(err => console.error("Failed to enable torch:", err));
    }

    // Set Zoom (adjust the value as needed; max depends on device)
    if (videoTrack.getCapabilities().zoom) {
      videoTrack.applyConstraints({
        advanced: [{ zoom: 2.0 }] // 2x zoom
      }).catch(err => console.error("Failed to set zoom:", err));
    }
  }

  Quagga.start();
});

Why this works: #

Quagga binds the camera stream to a hidden (or visible) video element under its canvas. By accessing that element directly, you bypass Quagga’s potentially broken stream-tracking methods and use the native browser API directly—this is more stable long-term.

Your Two Additional Questions #

a. How to get an active camera stream without a prior reference? #

Browsers don’t expose a global list of active media streams, but you can hunt for them by checking all video elements on the page. Any video playing a camera stream will have its srcObject set to a MediaStream instance:

function findActiveCameraStreams() {
  const activeStreams = [];
  document.querySelectorAll('video').forEach(video => {
    if (video.srcObject instanceof MediaStream) {
      const stream = video.srcObject;
      // Check if the stream has active video tracks
      const hasLiveVideo = stream.getVideoTracks().some(track => track.readyState === 'live');
      if (hasLiveVideo) {
        activeStreams.push(stream);
      }
    }
  });
  return activeStreams;
}

// Usage
const activeCameraStreams = findActiveCameraStreams();
if (activeCameraStreams.length > 0) {
  // Do something with the first active stream
  const stream = activeCameraStreams[0];
}

Note: This only works for streams bound to video elements—if a stream exists but isn’t attached to any element, there’s no way to retrieve it without a prior reference.

b. Can I get the stream from a playing video element? #

Absolutely! If the video is powered by a camera/screen share stream (not a static video file), you can grab the stream directly via video.srcObject:

const playingVideo = document.querySelector('#my-playing-video');
if (playingVideo.srcObject instanceof MediaStream) {
  const stream = playingVideo.srcObject;
  // Access tracks, adjust constraints, or stop the stream
  const videoTracks = stream.getVideoTracks();
}

Important: If the video is loaded from a URL (like .mp4), srcObject will be null—this method only works for media streams from cameras, microphones, or screen capture.

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