Teachable Machine如何设置调用后置摄像头替代前置摄像头

问题根因 #

tmImage.Webcam 初始化时如果不传入自定义摄像头配置，浏览器会默认拉起枚举列表里的第一个摄像头，移动端设备一般前置摄像头排在枚举首位，且原有代码里flip: true是给前置摄像头做镜像适配的参数，用在后置上还会导致画面反转。

具体修改步骤 #

• 将镜像翻转参数flip从true改为false，适配后置摄像头的正常画面方向
• 调用webcam.setup()时传入媒体流约束，指定优先调用后置（环境）摄像头
• 增加低版本设备兼容逻辑，后置调用失败时自动回退到可用摄像头，避免页面崩溃

修改后核心代码 #

// 模型存放路径
const URL = "./my_model/";

let model, webcam, labelContainer, maxPredictions;

// 加载模型并初始化摄像头
async function init() {
    const modelURL = URL + "model.json";
    const metadataURL = URL + "metadata.json";

    // 加载模型和元数据
    model = await tmImage.load(modelURL, metadataURL);
    maxPredictions = model.getTotalClasses();
    
    const size = 350;
    // 后置摄像头无需镜像翻转，设为false
    const flip = false;
    webcam = new tmImage.Webcam(size, size, flip);
    // 传入配置强制拉起后置摄像头，加容错兼容老设备
    try {
        await webcam.setup({
            facingMode: "environment"
        });
    } catch (err) {
        console.warn("后置摄像头调用失败，回退至默认摄像头", err);
        await webcam.setup();
    }
    await webcam.play();
    window.requestAnimationFrame(loop);

    // 挂载元素到DOM
    document.getElementById("webcam-container").appendChild(webcam.canvas);
    labelContainer = document.getElementById("label-container");
    for (let i = 0; i < maxPredictions; i++) {
        labelContainer.appendChild(document.createElement("div"));
    }
}

async function loop() {
    webcam.update();
    await predict();
    window.requestAnimationFrame(loop);
}

注意事项 #

• 摄像头权限仅在HTTPS环境或本地localhost调试时生效，HTTP环境下浏览器会直接拦截摄像头调用请求
• 部分定制安卓系统可能弹出摄像头选择菜单，手动选择后置即可，iOS Safari会直接拉起后置摄像头
• 如果需要增加前后置切换功能，可将facingMode设为可变变量，切换时销毁当前webcam实例重新初始化传对应参数即可

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