Search code examples
javascriptc#wpfchromiumcefsharp

Pointer Lock issue in CefSharp (WPF)

I have recently started working on a WPF browser application using the CefSharp framework and have hit a bit of an issue with the Pointer Lock API.

When trying to lock the pointer I am receiving the following error within the Visual Studio console.

Uncaught (in promise) WrongDocumentError: The root document of this element is not valid for pointer lock.

However, I have come across some further information on Bitbucket for the CefSharp framework stating that Pointer Lock hasn't been implemented yet this was back in 2020 and I am beginning to wonder if my Javascript implementation is wrong or if the Pointer Lock API still isn't supported yet.

I understand that most browsers support this functionality and that most browsers are running on the Chromium framework and that CefSharp is a port of that minus the UI and other bits and pieces.

Is there any way to implement this into my own project source code or even compile CefSharp from the source with the Pointer Lock functionality or would I need to use another framework that currently supports this?

Javascript

const canvas = document.getElementById("my-canvas");

canvas.onclick = () => {
    canvas.requestPointerLock();
};
Solution

  • CefSharp is just one of many Chromium Embedded Framework (CEF) wrappers. Still waiting on upstream support for pointer locking to be added in CEF. Supported has to be added in CEF first before it can be added to CefSharp.

    There is an open PR https://bitbucket.org/chromiumembedded/cef/pull-requests/338 though it's been inactive for a long time.