JavaScript调用后置摄像头出现黑屏问题求助

核心问题分析 #

当前代码存在多套流管理逻辑冲突：初始化用startVideo创建的流未存入全局currentStream，切换摄像头时无法停止初始流，导致后置摄像头资源被占用，无法正常启动；同时约束条件不够严格，可能导致浏览器模糊匹配摄像头设备。

具体修复方案 #

1. 统一流管理逻辑，删除冗余初始化函数

删除camera.js中的startVideo函数，初始化时直接调用openCamera，确保所有流操作都通过currentStream维护。

修改Razor页面的OnInitializedAsync方法：

protected override async Task OnInitializedAsync()
{
    try
    {
        await OpenCamera("user"); // 直接用openCamera初始化前置摄像头
        isVideoStarted = true;
    }
    catch (Exception ex)
    {
        Snackbar.Add("Camera access is denied. Please allow access to the camera.", Severity.Error);
    }
}

2. 完善openCamera函数，确保资源释放与严格设备匹配

修改camera.js中的openCamera函数，添加流清空逻辑，使用exact约束强制匹配指定摄像头：

async function openCamera(facingMode) {
    if (currentStream) {
        currentStream.getTracks().forEach(track => track.stop());
        currentStream = null;
    }

    // 清空视频元素旧流
    const videoElement = document.getElementById('videoFeed');
    if (videoElement) {
        videoElement.srcObject = null;
    }

    try {
        const constraints = {
            video: {
                facingMode: { exact: facingMode }, // 强制匹配指定朝向的摄像头
                width: { ideal: 600 },
                height: { ideal: 300 }
            }
        };
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        currentStream = stream;
        videoElement.srcObject = stream;
        
        // 视频加载完成后自动播放
        videoElement.onloadedmetadata = () => {
            videoElement.play().catch(err => console.error('Playback error:', err));
        };
        console.log(`Camera activated: ${facingMode}`);
    } catch (err) {
        console.error('Camera access failed: ', err);
    }
}

3. 同步stopVideo与全局流状态

修改camera.js中的stopVideo函数，确保停止流后同步更新currentStream：

function stopVideo(src) {
    let video = document.getElementById(src);
    if (video) {
        if ('srcObject' in video && video.srcObject) {
            let tracks = video.srcObject.getTracks();
            tracks.forEach(track => track.stop());
            video.srcObject = null;
            currentStream = null; // 同步全局流状态
        } else {
            video.src = '';
        }
    } else {
        console.error(`Video element ${src} not found`);
    }
}

4. 移除未定义的checkCameraPermission函数

原代码中checkCameraPermission函数未实现，直接删除相关逻辑，依赖getUserMedia的异常处理判断权限即可。

调试建议 #

• 打开浏览器开发者工具Media面板（Chrome：DevTools > More Tools > Media），查看摄像头流的实时状态，确认后置摄像头是否被正确识别。
• 执行navigator.mediaDevices.enumerateDevices()打印设备列表，检查后置摄像头的facingMode是否为environment。
• 测试时关闭其他占用摄像头的应用，避免资源冲突。

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