emscripten_request_fullscreen_strategy() fails where EM_ASM(Module.requestFullscreen(1, 1)) succeeds, fullscreen request deferred from glfwSetKeyCallback

[satoshinm]

Attempting to add a keyboard shortcut to toggle between fullscreen/fullwindow (HTML5 Full Screen and emscripten's "soft fullscreen"), mostly working example here (it should show a solid gray page covering the entire window, press F11 to toggle to fullscreen and back to fullwindow):

• https://satoshinm.github.io/emglfwbugs/test_fullscreen_fullwindow_toggle/test_fullscreen_fullwindow_toggle.html
• Source: https://github.com/satoshinm/emglfwbugs/blob/3657a7f505b5d6da9740a0588d6e94b84a27bebf/test_fullscreen_fullwindow_toggle/test_fullscreen_fullwindow_toggle.c

However, in the glfwSetKeyCallback() callback function, the only successful method I've found to enter fullscreen is:

EM_ASM(Module.requestFullscreen(1, 1));

This matches what the "Fullscreen" button does in the default shell.html, if both checkboxes are checked:

  <span><input type="checkbox" id="resize">Resize canvas</span>
  <span><input type="checkbox" id="pointerLock" checked>Lock/hide mouse pointer &nbsp;&nbsp;&nbsp;</span>
  <span><input type="button" value="Fullscreen" onclick="Module.requestFullscreen(document.getElementById('pointerLock').checked, 
                                                                            document.getElementById('resize').checked)">

---

But if I change this EM_ASM(Module.requestFullscreen(1, 1)); call to emscripten_request_fullscreen_strategy(), fullscreen is no longer entered. Relevant snippet of code:

void on_key(GLFWwindow *window, int key, int scancode, int action, int mods) {
    if (action && GLFW_PRESS && key == GLFW_KEY_F11) {
        printf("glfwSetKeyCallback: F11 pressed\n");
        // F11 toggles between fullscreen and fullwindow ("soft fullscreen") mode. The app starts
        // in fullwindow, a solid gray page. When fullscreen is entered with F11, the entire
        // screen should be solid gray. Returning to fullwindow with F11 should also show the same.

        EmscriptenFullscreenChangeEvent fsce;
        EMSCRIPTEN_RESULT ret = emscripten_get_fullscreen_status(&fsce);

        if (!fsce.isFullscreen) {
            emscripten_exit_soft_fullscreen();

            // Enter fullscreen
            /* this returns 1=EMSCRIPTEN_RESULT_DEFERRED if EM_TRUE is given to defer
             * or -2=EMSCRIPTEN_RESULT_FAILED_NOT_DEFERRED if EM_FALSE
             * but the EM_ASM() JS works immediately?
             */
            EmscriptenFullscreenStrategy strategy = {
                .scaleMode = EMSCRIPTEN_FULLSCREEN_SCALE_STRETCH,
                .canvasResolutionScaleMode = EMSCRIPTEN_FULLSCREEN_CANVAS_SCALE_STDDEF,
                .filteringMode = EMSCRIPTEN_FULLSCREEN_FILTERING_DEFAULT,
                .canvasResizedCallback = on_canvassize_changed,
                .canvasResizedCallbackUserData = NULL
            };
            EMSCRIPTEN_RESULT ret = emscripten_request_fullscreen_strategy(NULL, EM_TRUE, &strategy);
            printf("emscripten_request_fullscreen_strategy = %d\n", ret);
            //EM_ASM(Module.requestFullscreen(1, 1));

Why would emscripten_request_fullscreen_strategy() fail or require deferral here, even though it is called in a key callback handler (user action), and EM_ASM(Module.requestFullscreen(1, 1)); succeeds (suggesting the failure is probably not due to browser security restrictions)?

---

Note: using EM_ASM(Module.requestFullscreen(1, 1)); over emscripten_request_fullscreen_strategy() is a decent workaround, but it doesn't have all of the same functionality, particularly setting .canvasResizedCallback (which is the only way I could find to set this through emscripten, partial replacement is EM_ASM() to window.addEventHandler('resize'), but there is a lot of useful other logic _strategy() provides.)

[satoshinm]

The bug seems to be somewhere related to canPerformEventHandlerRequests().

If I add this into my key callback handler, emscripten_request_fullscreen_strategy() succeeds:

            EM_ASM(JSEvents.inEventHandler = true);
            EM_ASM(JSEvents.currentEventHandler = {allowsDeferredCalls:true});

• Is inEventHandler/currentEventHandler not being set correctly with glfw key callbacks?

• Or could/should request_fullscreen with deferUntilInEventHandler=EM_FALSE always try without checking canPerformRequests, instead of failing preemptively? Something like changing this in library_html5.js:

    // Queue this function call if we're not currently in an event handler and the user saw it appropriate to do so.
    if (!canPerformRequests) {
      if (strategy.deferUntilInEventHandler) {
        JSEvents.deferCall(JSEvents.requestFullscreen, 1 /* priority over pointer lock */, [target, strategy]);
        return {{{ cDefine('EMSCRIPTEN_RESULT_DEFERRED') }}};
      } else {
        return {{{ cDefine('EMSCRIPTEN_RESULT_FAILED_NOT_DEFERRED') }}};
      }

into this (untested code):

    if (!canPerformRequests) {
      if (strategy.deferUntilInEventHandler) {
        JSEvents.deferCall(JSEvents.requestFullscreen, 1 /* priority over pointer lock */, [target, strategy]);
        return {{{ cDefine('EMSCRIPTEN_RESULT_DEFERRED') }}};
      } else {
        //return {{{ cDefine('EMSCRIPTEN_RESULT_FAILED_NOT_DEFERRED') }}};
        // fall through and try it anyways
      }

[satoshinm]

Looking into this more, I think falling through if !canPerformRequests would be an incorrect fix, since it may cause an exception violating the API contract at http://kripken.github.io/emscripten-site/docs/api_reference/html5.h.html#registration-functions "None of the functions fail or abort by throwing a JavaScript or C++ exception." The proper fix may be to find where inEventHandler is incorrectly cleared.

[satoshinm]

Seems that registerOrRemoveEventHandler in library_html5.js is the only place where inEventHandler is incremented/decremented.

However, events are also registered in library_glfw.c, using window.addEventListener.

It is valid (from a browser standpoint) to request fullscreen in a keydown event handler (that is, from glfwSetKeyCallback), but emscripten currently only allows from events listened to in library_html5.js...

What's the best way to fix this, should all event registration in emscripten's libraries go through JSEvents.registerOrRemoveEventHandler (vs window.addEventListener) to properly track inEventHandler?

[juj]

The root issue here is that the two APIs, GLFW and HTML5 events, are incompatible in this manner, i.e. GLFW independently registers to listen to input events distinct from the HTML5 events API.

Most of the library APIs are disjoint in this manner, (GLUT, X11, EGL, HTML5, GLFW, SDL), and there's been advantage to this approach in that it keeps the code size and call flow lean, and most people only use one of them to set up, and then the others are automatically dead code eliminated away.

The approach you currently do with EM_ASMing HTML5 events API to tell it that it's inside a JS event function by setting .inEventHandler and .currentEventHandler sounds like a moderately good compatibility solution at this point, as long as you remember to EM_ASM() before exiting the GLFW handler to clear those fields.

I'm not quite sure how to cleanly fix at the moment, since making all of these APIs dependant on HTML5 events API would feel a bit uneasy. (See #2999 and #3298 which add pressure here)

Does GLFW have a "enter fullscreen" function call? If so, that could be used instead of the HTML5 API?

[satoshinm]

Yes glfw does have functions to enter/exit fullscreen, although they are not currently implemented in emscripten. Adding support for glfwSetWindowMonitor() in emscripten may be a good way to solve this layering issue.

For reference, emscripten vs glfw code, I use something like this:

#ifdef __EMSCRIPTEN__
int is_fullscreen() {
    EmscriptenFullscreenChangeEvent fsce;
    emscripten_get_fullscreen_status(&fsce);
    return fsce.isFullscreen;
}

void fullscreen_exit() {    emscripten_exit_fullscreen();    maximize_canvas(); }

void fullscreen_enter() {
    emscripten_exit_soft_fullscreen();

    // Workaround https://github.com/kripken/emscripten/issues/5124#issuecomment-292849872
    EM_ASM(JSEvents.inEventHandler = true);
    EM_ASM(JSEvents.currentEventHandler = {allowsDeferredCalls:true});

    EmscriptenFullscreenStrategy strategy = {
        .scaleMode = EMSCRIPTEN_FULLSCREEN_SCALE_STRETCH,
        .canvasResolutionScaleMode = EMSCRIPTEN_FULLSCREEN_CANVAS_SCALE_STDDEF,
        .filteringMode = EMSCRIPTEN_FULLSCREEN_FILTERING_DEFAULT,
        .canvasResizedCallback = on_canvassize_changed,
        .canvasResizedCallbackUserData = NULL
    };
    emscripten_request_fullscreen_strategy(NULL, EM_FALSE, &strategy);
}

#else // !__EMSCRIPTEN__
int is_fullscreen() {
    return !!glfwGetWindowMonitor(g->window);
}

void fullscreen_exit() {
    glfwSetWindowMonitor(g->window, NULL, g->window_xpos, g->window_ypos, g->window_width, g->window_height, GLFW_DONT_CARE);
}

void fullscreen_enter() {
    glfwGetWindowPos(g->window, &g->window_xpos, &g->window_ypos);
    glfwGetWindowSize(g->window, &g->window_width, &g->window_height);
    glfwSetWindowMonitor(g->window, g->fullscreen_monitor, 0, 0, g->fullscreen_width, g->fullscreen_height, GLFW_DONT_CARE);
}

#endif

glfwSetWindowMonitor() takes a GLFWmonitor *, if NULL then enters windowed mode with given dimensions and position, otherwise enters fullscreen on the given monitor. It may sufficient to implement setting the monitor from glfwGetPrimaryMonitor() as entering HTML5 fullscreen. And glfwGetWindowMonitor() as returning a GLFWmonitor if in fullscreen (I see there's already some support for monitors in library_glfw, maybe it could be fleshed out to simulate a "monitor" as fullscreen).

[stale]

This issue has been automatically marked as stale because there has been no activity in the past 2 years. It will be closed automatically if no further activity occurs in the next 7 days. Feel free to re-open at any time if this issue is still relevant.