Materialize CSS与html5-qrcode库冲突问题（Google Apps Script开发）

核心问题分析 #

Materialize CSS的JavaScript会自动对页面中所有<select>元素进行样式初始化和行为改造，这会覆盖html5-qrcode库生成的相机选择下拉菜单的原生功能，导致相机切换失效、facingMode设置不生效。以下是具体解决方法：

方法1：自定义相机选择控件，完全掌控逻辑 #

绕过html5-qrcode自带的相机选择下拉，自己实现兼容Materialize的控件，同时通过库的API手动控制相机切换：

1. HTML部分（添加自定义下拉）

<!-- 使用Materialize的input-field结构，browser-default类避免强制样式覆盖 -->
<div class="input-field col s12">
  <select id="custom-camera-select" class="browser-default">
    <option value="" disabled selected>选择相机</option>
  </select>
</div>

<!-- 扫码容器 -->
<div id="qr-reader" style="width: 100%;"></div>

2. JavaScript部分（绑定相机逻辑）

document.addEventListener('DOMContentLoaded', function() {
  // 初始化Materialize其他控件（排除自定义相机选择）
  M.FormSelect.init(document.querySelectorAll('select:not(#custom-camera-select)'));

  const html5QrCode = new Html5Qrcode('qr-reader');
  const cameraSelect = document.getElementById('custom-camera-select');

  // 获取可用相机列表并填充下拉
  Html5Qrcode.getCameras().then(cameras => {
    if (cameras.length === 0) {
      alert('未检测到可用相机');
      return;
    }

    // 遍历相机列表，添加选项（优先标注后置/前置）
    cameras.forEach(camera => {
      const option = document.createElement('option');
      option.value = camera.id;
      option.textContent = camera.label || (camera.facingMode === 'environment' ? '后置相机' : '前置相机');
      cameraSelect.appendChild(option);
    });

    // 默认启动后置相机
    const defaultCamera = cameras.find(cam => cam.facingMode === 'environment') || cameras[0];
    if (defaultCamera) {
      cameraSelect.value = defaultCamera.id;
      startScanning(defaultCamera.id);
    }

    // 监听下拉切换事件
    cameraSelect.addEventListener('change', function() {
      const selectedCameraId = this.value;
      if (selectedCameraId) {
        // 先停止当前扫码，再启动新相机
        html5QrCode.stop().then(() => {
          startScanning(selectedCameraId);
        }).catch(err => console.error('停止扫码失败:', err));
      }
    });
  }).catch(err => console.error('获取相机列表失败:', err));

  // 封装扫码启动函数
  function startScanning(cameraId) {
    html5QrCode.start(
      cameraId,
      {
        fps: 15, // 扫码帧率
        qrbox: { width: 280, height: 280 }, // 扫码框大小
        aspectRatio: 1.0 // 保持扫码区域正方形
      },
      (decodedText) => {
        // 扫码成功后的逻辑：同步到Google Sheet等
        console.log('扫码结果:', decodedText);
        // 这里添加你的Google Sheet同步代码
      },
      (errorMessage) => {
        // 忽略日常扫码错误，仅在控制台输出
        // console.log('扫码错误:', errorMessage);
      }
    ).catch(err => console.error('启动扫码失败:', err));
  }
});

方法2：阻止Materialize修改html5-qrcode的原生下拉 #

如果想保留html5-qrcode自带的相机选择控件，只需阻止Materialize对其进行初始化：

1. 修改Materialize初始化代码

document.addEventListener('DOMContentLoaded', function() {
  // 初始化所有select，但排除html5-qrcode生成的下拉
  const selects = document.querySelectorAll('select:not(.html5-qrcode-select-camera)');
  M.FormSelect.init(selects);
});

2. 强制后置相机启动（修复facingMode无效问题）
   确保调用start方法时，facingMode参数格式正确：

html5QrCode.start(
  { facingMode: 'environment' }, // 必须传入对象格式，而非直接字符串
  { fps: 10, qrbox: 250 },
  (decodedText) => { /* 处理结果 */ },
  (errorMessage) => {}
).catch(err => console.error(err));

方法3：恢复原生下拉样式 #

如果Materialize已经修改了下拉样式，可通过CSS强制恢复：

/* 针对html5-qrcode的相机选择下拉，恢复原生样式 */
.html5-qrcode-select-camera {
  display: block !important;
  opacity: 1 !important;
  position: static !important;
  height: auto !important;
}

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