Accessing navigator.mediaDevices in CefSharp in Desktop WPF App

Question

I have desktop app developed using WPF, .Net 7.0,CefSharp.Wpf version="117.2.40". I would like to render html(local file) which has option to start the camera.

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

    ////===> CAMERA <===
    barcodeCameraBtn.onclick = function () {
        try {
            console.error("navigator", navigator);
            console.error("mediaDevices", navigator.mediaDevices);

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

If I open the html file directly in Chrome browser, it works fine and opens the Camera. But it failed in CefSharp. I am getting navigator.mediaDevices as undefined.

I have tried all possible options to set permission

var settings = new CefSettings()
        {
            //By default CefSharp will use an in-memory cache, you need to specify a Cache Folder to persist data
            CachePath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "CefSharp\\Cache")
        };

        //Example of setting a command line argument
        //Enables WebRTC
        // - CEF Doesn't currently support permissions on a per browser basis see https://bitbucket.org/chromiumembedded/cef/issues/2582/allow-run-time-handling-of-media-access
        // - CEF Doesn't currently support displaying a UI for media access permissions
        //
        //NOTE: WebRTC Device Id's aren't persisted as they are in Chrome see https://bitbucket.org/chromiumembedded/cef/issues/2064/persist-webrtc-deviceids-across-restart
        settings.CefCommandLineArgs.Add("--enable-media-stream", "1");
        settings.CefCommandLineArgs.Add("--unsafely-treat-insecure-origin-as-secure='http://localhost'");
        settings.CefCommandLineArgs["autoplay-policy"] = "no-user-gesture-required";
        //https://peter.sh/experiments/chromium-command-line-switches/#use-fake-ui-for-media-stream
        settings.CefCommandLineArgs.Add("use-fake-ui-for-media-stream");
        //For screen sharing add (see https://bitbucket.org/chromiumembedded/cef/issues/2582/allow-run-time-handling-of-media-access#comment-58677180)
        settings.CefCommandLineArgs.Add("enable-usermedia-screen-capturing");
        settings.CefCommandLineArgs.Add("disable-gpu"); // Disable GPU acceleration
        settings.CefCommandLineArgs.Add("disable-gpu-vsync"); //Disable GPU vsync


        //Example of checking if a call to Cef.Initialize has already been made, we require this for
        //our .Net 5.0 Single File Publish example, you don't typically need to perform this check
        //if you call Cef.Initialze within your WPF App constructor.
        if (!Cef.IsInitialized)
        {
            //Perform dependency check to make sure all relevant resources are in our output directory.
            Cef.Initialize(settings, performDependencyCheck: true, browserProcessHandler: null);
        }

None of options worked for me.

Anyone experience the similar issue? Can someone review this and let me know what could be wrong with this.