webcam.js移动端无法切换后置摄像头：求解决建议与替代方案

Hey there! Let's work through getting your mobile app to use the rear camera instead of just the front one with your webcam.js setup. Here are a couple of practical solutions:

1. Update Your Webcam Component Configuration #

The core issue is probably that the webcam component defaults to the front-facing ("user") camera. You can explicitly force it to use the rear ("environment") camera by adding a constraints parameter to your component tag:

<webcam 
  channel="channel" 
  on-streaming="onSuccess()" 
  on-error="onError(err)" 
  on-stream="onStream(stream)"
  [constraints]="{ video: { facingMode: 'environment' } }"
></webcam>

The facingMode: 'environment' directive tells the browser to prioritize the rear camera. If this doesn’t work immediately, double-check that your version of the Angular webcam component supports custom media constraints—some older builds might not expose this option directly.

2. Switch to Native MediaDevices API (More Flexible) #

If the webcam.js component feels too restrictive, using the native browser MediaDevices.getUserMedia() API gives you full control over camera selection. Here’s how to adapt your Angular code:

HTML #

<video id="cameraVideo" autoplay playsinline></video>
<button ng-click="makeSnapshot()">Take Snapshot</button>

The playsinline attribute is critical for iOS devices—it stops the video from automatically jumping to fullscreen mode.

Controller Code #

$scope.initCamera = function() {
  // Request rear camera access with ideal resolution
  navigator.mediaDevices.getUserMedia({
    video: { 
      facingMode: { ideal: 'environment' }, // Prioritize rear camera
      width: { ideal: 1280 },
      height: { ideal: 720 }
    }
  })
  .then(stream => {
    const videoElement = document.getElementById('cameraVideo');
    videoElement.srcObject = stream;
    $scope.cameraStream = stream; // Save stream for snapshot use
  })
  .catch(err => {
    console.error('Camera access failed:', err);
    $scope.onError(err);
  });
};

// Capture snapshot function
$scope.makeSnapshot = function() {
  const videoElement = document.getElementById('cameraVideo');
  const canvas = document.createElement('canvas');
  
  // Match canvas size to the video's native resolution
  canvas.width = videoElement.videoWidth;
  canvas.height = videoElement.videoHeight;
  
  // Draw the current video frame to the canvas
  const ctx = canvas.getContext('2d');
  ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
  
  // Get the snapshot as base64 data (adjust format to 'image/jpeg' if needed)
  const snapshotData = canvas.toDataURL('image/png');
  
  // Handle the snapshot (display it, upload to server, etc.)
  console.log('Captured snapshot:', snapshotData);
};

// Initialize camera when the controller loads
$scope.initCamera();

Key Tips #

• HTTPS Requirement: Modern browsers require camera access to be over HTTPS (localhost is exempt for development). Ensure your production site uses HTTPS to avoid permission errors.
• Fallback for Older Devices: Using facingMode: { ideal: 'environment' } instead of exact ensures that if the rear camera isn’t available, the browser will gracefully fall back to the front-facing one.

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