JavaScript相机切换异常：facingMode未随变量更新问题求助

嘿，我来帮你分析下这个问题——你忽略了JavaScript中表达式的计算时机！

问题根源 #

你看，你的constraints变量是在代码一开始就定义的，当时front的初始值是false，所以facingMode会被直接计算为"environment"并固定下来。之后你点击按钮切换front的值，但constraints里的facingMode并不会自动重新计算，因为那个三元表达式只在初始化constraints的时候执行了一次，后续front变化不会触发它更新。

你可以自己测试下：点击按钮后打印front会看到它在true/false间切换，但constraints.video.facingMode始终是初始化时的结果。

解决方法 #

要实现相机切换，你需要在每次点击按钮时，重新更新约束条件并重新请求媒体流，同时要停止之前的相机轨道避免资源占用。这里给你两种可行的修改方案：

方案一：每次点击重新构建约束对象

var front = false;
// 记得替换成你页面里的视频元素ID
const videoEl = document.getElementById('your-video-element');

document.getElementById('cameraToggle').onclick = async function() {
  front = !front;
  
  // 每次点击都根据当前front值重新生成约束
  const newConstraints = { 
    video: { 
      facingMode: front ? "user" : "environment"
    }
  };
  
  // 停止当前的媒体轨道，否则无法切换相机
  if (videoEl.srcObject) {
    videoEl.srcObject.getTracks().forEach(track => track.stop());
  }
  
  // 请求新的媒体流并绑定到视频元素
  try {
    const stream = await navigator.mediaDevices.getUserMedia(newConstraints);
    videoEl.srcObject = stream;
  } catch (err) {
    console.error('相机切换失败:', err);
  }
};

// 初始化加载默认相机
(async function initCamera() {
  const initConstraints = { 
    video: { 
      facingMode: front ? "user" : "environment"
    }
  };
  try {
    const stream = await navigator.mediaDevices.getUserMedia(initConstraints);
    videoEl.srcObject = stream;
  } catch (err) {
    console.error('相机初始化失败:', err);
  }
})();

方案二：直接更新已有约束对象的属性

var front = false;
const videoEl = document.getElementById('your-video-element');
// 初始化约束
var constraints = { 
  video: { 
    facingMode: front ? "user" : "environment"
  }
};

document.getElementById('cameraToggle').onclick = async function() {
  front = !front;
  
  // 直接更新约束里的facingMode值
  constraints.video.facingMode = front ? "user" : "environment";
  
  // 停止当前轨道
  if (videoEl.srcObject) {
    videoEl.srcObject.getTracks().forEach(track => track.stop());
  }
  
  // 重新请求媒体流
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    videoEl.srcObject = stream;
  } catch (err) {
    console.error('相机切换失败:', err);
  }
};

// 初始化相机
(async function initCamera() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    videoEl.srcObject = stream;
  } catch (err) {
    console.error('相机初始化失败:', err);
  }
})();

核心思路就是：每次切换时，不仅要改变front的值，还要更新约束条件，并且重新调用getUserMedia来获取新的相机流，同时停止旧的流释放资源。

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