Flutter中navigator.mediaDevices的deviceId失效，无法切换摄像头

1. 正确枚举并区分摄像头设备 #

• 从enumerateDevices返回的列表中筛选视频输入设备（kind == "videoinput"），排除音频及其他类型设备
• 遍历筛选后的摄像头设备，通过label字段区分前置/后置：Android设备上，后置摄像头的label通常包含"back"或"后置"，前置则包含"front"或"前置"
• 注意：未获取摄像头权限时，label可能为空，因此必须先确保权限已授权

示例代码：

Future<List<MediaDeviceInfo>> _getCameraDevices(dynamic navigator) async {
  List<MediaDeviceInfo> allDevices = await navigator.mediaDevices.enumerateDevices();
  // 筛选仅视频输入设备
  return allDevices.where((device) => device.kind == "videoinput").toList();
}

2. 确保摄像头权限已获取 #

调用getUserMedia前，必须确认已获取CAMERA权限，可使用permission_handler库处理权限申请：

import 'package:permission_handler/permission_handler.dart';

Future<bool> _checkCameraPermission() async {
  PermissionStatus status = await Permission.camera.request();
  return status.isGranted;
}

3. 修正摄像头流获取与切换逻辑 #

• 避免硬编码deviceId，使用枚举得到的真实设备ID
• 切换摄像头时，先停止当前MediaStream，再用新设备ID重新获取流

示例代码：

MediaStream? _currentStream;

Future<void> _switchCamera(dynamic navigator, String targetCameraId) async {
  // 停止当前流
  if (_currentStream != null) {
    _currentStream!.getTracks().forEach((track) => track.stop());
  }

  // 检查权限
  bool hasPermission = await _checkCameraPermission();
  if (!hasPermission) {
    throw Exception("摄像头权限未授权");
  }

  // 获取新视频流
  _currentStream = await navigator.mediaDevices.getUserMedia({
    "video": {
      "deviceId": targetCameraId,
      "width": {"ideal": 1280},
      "height": {"ideal": 720}
    },
    "audio": false
  });

  // 更新UI显示新流（根据自己的逻辑实现）
  // ...
}

4. 备选方案：用facingMode快速指定摄像头 #

若无需精确指定设备ID，可直接通过facingMode参数指定前置/后置：

• "user"：前置摄像头
• "environment"：后置摄像头

示例代码：

Future<MediaStream> _getBackCameraStream(dynamic navigator) async {
  bool hasPermission = await _checkCameraPermission();
  if (!hasPermission) {
    throw Exception("摄像头权限未授权");
  }

  return navigator.mediaDevices.getUserMedia({
    "video": {"facingMode": "environment"},
    "audio": false
  });
}

常见问题排查 #

• 确认deviceId与枚举得到的设备ID完全一致（注意大小写、字符串格式）
• 部分Android设备上，deviceId会在应用重启后变化，因此每次启动都需重新枚举设备
• 若使用flutter_webrtc库，确保使用库提供的navigator对象，而非WebView的navigator

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