移动端默认调用后置摄像头失败：facingMode:'environment'不生效

用户代码如下：

var decoder = $("canvas").WebCodeCamJQuery(arg).data().plugin_WebCodeCamJQuery;
decoder.buildSelectMenu("select");
navigator.mediaDevices.enumerateDevices()
        .then(function (devices) {
            var videoDevices = devices.filter(function (device) {
                return device.kind === 'videoinput';
            });
            var constraints = {
                video: {
                    deviceId: videoDevices[0].deviceId, 
                    facingMode: 'environment' 
                }
            };
            decoder.init(constraints);
            decoder.play();
            $('select').on('change', function () {
                decoder.stop().play();
            });
        })
        .catch(function (err) {
            console.error('Tidak dapat mengakses kamera:', err);
        });

问题原因 #

1. deviceId与facingMode优先级冲突：你同时指定了deviceId: videoDevices[0].deviceId和facingMode: 'environment'，但浏览器处理媒体约束时，deviceId的优先级更高。videoDevices[0]通常是前置摄像头，所以即使设置了environment，浏览器依然会优先使用你指定的前置设备，导致后置摄像头无法默认启用。

2. 插件约束处理逻辑限制：WebCodeCamJQuery插件的init方法可能对传入的constraints有特殊处理，比如忽略facingMode参数，或者需要将其放在特定配置层级中，而非直接嵌套在video对象下。

3. 安全上下文限制：移动端浏览器要求媒体设备访问必须在HTTPS环境下进行，若页面使用HTTP协议，可能导致facingMode等高级约束不生效。

解决方案 #

1. 移除deviceId指定：若无需强制选择特定设备，直接删除deviceId配置，仅保留facingMode，让浏览器自动匹配后置摄像头：

var constraints = {
    video: {
        facingMode: 'environment' 
    }
};

2. 筛选后置摄像头的deviceId：若需保留设备选择菜单，先从设备列表中筛选出后置摄像头的deviceId，再传入constraints：

var videoDevices = devices.filter(function (device) {
    return device.kind === 'videoinput' && (device.label.includes('back') || device.label.includes('后置'));
});
var constraints = {
    video: {
        deviceId: videoDevices.length > 0 ? videoDevices[0].deviceId : undefined,
        facingMode: 'environment' 
    }
};

3. 检查插件专属配置：查看WebCodeCamJQuery文档，确认是否有专门的配置项（比如初始化插件的arg参数中）用于指定默认摄像头方向，部分插件会提供独立参数而非依赖原生MediaStreamConstraints。

4. 切换到HTTPS环境：确保页面在HTTPS协议下运行，避免浏览器因安全限制禁用媒体设备的高级约束。

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