WPF桌面应用中CefSharp调用navigator.mediaDevices失败问题排查

问题场景 #

使用WPF、.NET 7.0及CefSharp.Wpf 117.2.40开发桌面应用，渲染带有相机功能的本地HTML文件时，navigator.mediaDevices返回undefined，但该HTML在Chrome中可正常调用相机，已尝试多个权限设置仍未解决。

排查与解决方案 #

1. 修正本地文件源的安全设置 #

本地HTML使用file://协议加载，你当前仅将http://localhost加入不安全源白名单，需补充file://：

// 修改原有的不安全源设置，同时包含file://和localhost
settings.CefCommandLineArgs.Add("--unsafely-treat-insecure-origin-as-secure", "file://,http://localhost");

注意：该参数值不需要额外引号，多个源用逗号分隔。

2. 实现自定义权限处理器 #

CEF不会自动弹出权限请求UI，需通过RequestHandler手动授权媒体访问权限：

public class CustomRequestHandler : RequestHandler
{
    protected override bool OnPermissionRequest(IWebBrowser chromiumWebBrowser, IBrowser browser, IFrame frame, string requestingOrigin, IPermissionRequest permissions)
    {
        // 允许视频捕获权限
        if (permissions.Contains(PermissionTypes.VideoCapture))
        {
            permissions.Accept();
            return true;
        }
        return base.OnPermissionRequest(chromiumWebBrowser, browser, frame, requestingOrigin, permissions);
    }
}

// 在初始化ChromiumWebBrowser时绑定该Handler
var browser = new ChromiumWebBrowser("你的本地HTML路径");
browser.RequestHandler = new CustomRequestHandler();

3. 优化命令行参数 #

清理无效或格式错误的参数，确保媒体流相关参数正确：

var settings = new CefSettings()
{
    CachePath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "CefSharp\\Cache")
};

// 启用媒体流（无需指定值）
settings.CefCommandLineArgs.Add("--enable-media-stream");
// 信任不安全源
settings.CefCommandLineArgs.Add("--unsafely-treat-insecure-origin-as-secure", "file://,http://localhost");
// 自动授权媒体权限UI（无需手动确认）
settings.CefCommandLineArgs.Add("--use-fake-ui-for-media-stream");
// 启用屏幕捕获（如果需要）
settings.CefCommandLineArgs.Add("--enable-usermedia-screen-capturing");

if (!Cef.IsInitialized)
{
    Cef.Initialize(settings, performDependencyCheck: true, browserProcessHandler: null);
}

4. 验证HTML代码的兼容性 #

在HTML中增加navigator.mediaDevices的存在性检查，避免直接调用报错：

<script>
    const barcodeCameraBtn = document.getElementById("barcodeCameraBtn");
    const barcodeCamera = document.getElementById("barcodeCamera");

    barcodeCameraBtn.onclick = function () {
        try {
            console.log("navigator", navigator);
            
            // 先检查mediaDevices是否存在
            if (!navigator.mediaDevices) {
                console.error("mediaDevices is not supported");
                return;
            }

            navigator.mediaDevices
                .getUserMedia({ video: true })
                .then(function (stream) {
                    barcodeCamera.srcObject = stream;
                })
                .catch(function (error) {
                    console.error("Error accessing camera:", error);
                });
        } catch (error) {
            console.error("Error accessing camera:", error);
        }
    };
</script>

额外检查项 #

• 确保应用以管理员权限运行，避免相机访问被系统权限限制；
• 检查本地防火墙或杀毒软件是否阻止了CefSharp进程访问相机；
• 确认CefSharp的所有依赖文件（如libcef.dll、CefSharp.dll等）已正确复制到输出目录。

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