Enable fullScreen WebGl

[it_ra]

Hi all!

When working with WebGL build I’m trying to enable full screen mode.
When working with the standard template no problem.
I put in the GUI button and by pressing it launched different versions of the scripts.

Screen.fullScreen = !Screen.fullScreen;

Screen.SetResolution(Display.main.systemWidth, Display.main.systemHeight, true, 30);

3. A call to an external script, didn’t work

Application.ExternalEval("SetFullscreen(1)");

Everything works and switches to full screen mode correctly. The problem is that it requires not 1 but 2 clicks of the mouse. The first button, the second click in any area of the browser, then starts a full screen mode.

Tell me, is there the possibility to switch to fullscreen mode of the game, with 1 click on the button standard template.

Thank you!

[Marco-Trivellato]

@it_ra

The problem is that it requires not 1 but 2 clicks of the mouse. The first button, the second click in any area of the browser, then starts a full screen mode.

I don’t think there is a way around it, unless you switch to Fullscreen by default, then the user will only have to click once

[alexsuvorov]

Screen.fullScreen = !Screen.fullScreen[quote=“it_ra, post:1, topic: 645964, username:it_ra”]
Hi all!

When working with WebGL build I’m trying to enable full screen mode.
When working with the standard template no problem.
I put in the GUI button and by pressing it launched different versions of the scripts.

Screen.fullScreen = !Screen.fullScreen;

Screen.SetResolution(Display.main.systemWidth, Display.main.systemHeight, true, 30);

3. A call to an external script, didn’t work

Application.ExternalEval("SetFullscreen(1)");

Everything works and switches to full screen mode correctly. The problem is that it requires not 1 but 2 clicks of the mouse. The first button, the second click in any area of the browser, then starts a full screen mode.

Tell me, is there the possibility to switch to fullscreen mode of the game, with 1 click on the button standard template.

Thank you!
[/quote]
Hello it_ra.

Switching to fullscreen in a browser requires special privileges and can only be performed from an event handler initiated by the user. The problem is that Unity UI events go through an intermediate input queue, and are processed some time after their corresponding JavaScript handlers exit.

Still there is a workaround for this. You should just use onPointerDown event instead of onClick.
Create a UI Button, add a Event - Event Trigger component for this button, add Pointer Down event to the Event Trigger component, assign your function (with Screen.fullScreen = !Screen.fullScreen) to the Pointer Down event. Now it should work with a single click.

How this trick works:
As soon as the user pushes the UI button down, an onclick JavaScript event is registered for the whole page, so when user releases the mouse button somewhere over the page, a pure JavaScript onclick event handler is executed, where it is now possible to execute a privileged operation.

In case of switching fullscreen mode, you don’t need to implement any JavaScript handlers yourself, because those are already included by Emscripten. However, if you need to perform some other privileged operation on button click (i.e. open a popup, open a file opening dialog etc.), you may just add a corresponding JavaScript plugin, which will perform the onclick handling (see the window.open example here https://forum.unity3d.com/threads/popup-blocker-and-pointerdown-pointerclick.383233/#post-2491032)

[it_ra]

@alexsuvorov

Still there is a workaround for this. You should just use onPointerDown event instead of onClick.
Create a UI Button, add a Event - Event Trigger component for this button, add Pointer Down event to the Event Trigger component, assign your function (with Screen.fullScreen = !Screen.fullScreen) to the Pointer Down event. Now it should work with a single click.

Hello alexsuvorov.

Thank you so much.
After replacing the event the mouse down it worked perfectly

[Kristof_Newfort]

For those who are wondering how you can make this work in the newer Unity’s (starting from 2017 I think), this is how you get the fullscreen WebGL working on Android for Chrome and Firefox (iOS does not support fullscreen like it does on Android):

JSLib

var LibraryPageTool = {
    GoFullscreen: function()
    {
        var viewFullScreen = document.getElementById('#canvas');

        var ActivateFullscreen = function()
        {
            if (viewFullScreen.requestFullscreen) /* API spec */
            {  
                viewFullScreen.requestFullscreen();
            }
            else if (viewFullScreen.mozRequestFullScreen) /* Firefox */
            {
                viewFullScreen.mozRequestFullScreen();
            }
            else if (viewFullScreen.webkitRequestFullscreen) /* Chrome, Safari and Opera */
            {  
                viewFullScreen.webkitRequestFullscreen();
            }
            else if (viewFullScreen.msRequestFullscreen) /* IE/Edge */
            {  
                viewFullScreen.msRequestFullscreen();
            }

            viewFullScreen.removeEventListener('touchend', ActivateFullscreen);
        }

        viewFullScreen.addEventListener('touchend', ActivateFullscreen, false);
    }
};
mergeInto(LibraryManager.library, LibraryPageTool);

CSharp

using UnityEngine;
#if UNITY_WEBGL && !UNITY_EDITOR
using System.Runtime.InteropServices;
#endif

public class PageTool : MonoBehaviour
{
#if UNITY_WEBGL && !UNITY_EDITOR
    [DllImport("__Internal")]
    private static extern void GoFullscreen();

    public static void ActivateFullscreen()
    {
        GoFullscreen();
    }
#else
    public static void ActivateFullscreen()
    {}
#endif
}

As you can see ‘canvas’ has changed to ‘#canvas’ in the newer WebGL builds.
Also, just replace the ‘touchend’ with ‘click’ or ‘mouseup’ if you want this to work on desktop browsers.

I hope this can help someone.

[yusefkerr]

Thanks, where should this code go? Is it enough to put it in a c# script attached to the main camera?

[leon-do]

this might be useful.

GitHub - leon-do/unity-webgl-fullscreen-dark-template

Feedback (or a pr) will be useful!

[Marks4]

@alexsuvorov

Still there is a workaround for this. You should just use onPointerDown event instead of onClick.
Create a UI Button, add a Event - Event Trigger component for this button, add Pointer Down event to the Event Trigger component, assign your function (with Screen.fullScreen = !Screen.fullScreen) to the Pointer Down event. Now it should work with a single click.

This does not work consistently on version 2020.1 beta anymore. Sometimes it works, but sometimes I get the message

Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.

[Good_Punk]

@Marks4

@alexsuvorov

This does not work consistently on version 2020.1 beta anymore. Sometimes it works, but sometimes I get the message

I can confirm this. OnMousDown and Input.GetMouseButtonDown(0) still seem to work but you have to implement the check if that’s above your ui element manually it seems.

[Marks4]

Just use my free asset: https://assetstore.unity.com/packages/tools/camera/fullscreenwebgl-180047

[dradb]

@Marks4

Just use my free asset: https://assetstore.unity.com/packages/tools/camera/fullscreenwebgl-180047

Thank you.
I’ve tried so many things and this works great … in 2019.4

[kiksunitydev]

@leon-do

this might be useful.
https://github.com/leon-do/unity-webgl-fullscreen-dark-template

Feedback (or a pr) will be useful!

GET /
GET /TemplateData/style.css
GET /TemplateData/UnityProgress.js
GET /%UNITY_WEBGL_LOADER_URL%
ERROR: GET /%UNITY_WEBGL_LOADER_URL% URIError: URI malformed
GET /%UNITY_WEBGL_LOADER_URL%
ERROR: GET /%UNITY_WEBGL_LOADER_URL% URIError: URI malformed

I am getting this error
Unity version is 2021.1.6f1

Build link - https://drive.google.com/file/d/1wOld77KwtlE9tNM_aEPR_w_ynwfDgB5g/view?usp=sharing
Could you please check and get back

[jukka_j]

It looks like that template was developed for Unity 2019.x syntax and earlier (unity-webgl-fullscreen-dark-template/FullDarkThemeTemplate/index.html at 8eb259e9c533844d2ceac086204665c7b6832cf9 · leon-do/unity-webgl-fullscreen-dark-template · GitHub).

Unity 2020.1 introduced a new template syntax. That template will need to be updated to that format. Maybe the developer is able to help with that. A good way is to use the default or minimal template from Unity 2020.1 as a basis.

[kiksunitydev]

@jukka_j

It looks like that template was developed for Unity 2019.x syntax and earlier (https://github.com/leon-do/unity-webgl-fullscreen-dark-template/blob/8eb259e9c533844d2ceac086204665c7b6832cf9/FullDarkThemeTemplate/index.html#L12).

Unity 2020.1 introduced a new template syntax. That template will need to be updated to that format. Maybe the developer is able to help with that. A good way is to use the default or minimal template from Unity 2020.1 as a basis.

Thanks! doing that and having canvas size as inner width and height of web page

[BenrajSD]

One more thing, is any settings specifically to be made for build working in Safari - for both Mac OS and iOS, having issue. With all other browsers in mobile (Android/iOS) and desktop for Mac and Windows are working.

Build itself not get loaded.

your browser does not support graphics api webgl 2.0 which is required for this content

[jukka_j]

@BenrajSD

One more thing, is any settings specifically to be made for build working in Safari - for both Mac OS and iOS, having issue. With all other browsers in mobile (Android/iOS) and desktop for Mac and Windows are working.

Build itself not get loaded.

your browser does not support graphics api webgl 2.0 which is required for this content

This is a known issue with Apple. They have decided not to adopt WebGL 2 API in Safari browser. Even though the API is counting towards being 5 years old, they have decided to not provide the functionality. Unfortunately there is nothing we can do, we have pleaded them to add support for it for several years. There is a tech preview version of WebGL 2 available in Safari, but we do not know if/when it will ship. Maybe they think that it would compete with Apple’s App Store too much if they enabled WebGL 2 in Safari.

[rajeshkalavakunta]

By default, will get a full screen without a footer in WebGL build.

→ Open the index.html file to edit

→ Copy the following code inside the body

 <body>
   <div class="webgl-content" style="display: table; width: 100%; height: 100%;">
     <div id="unityContainer"></div>
   </div>
   <script>
   var mywidth = innerWidth;
   var myheight = innerHeight;
       document.getElementById("unityContainer").style.width = mywidth + "px";
       document.getElementById("unityContainer").style.height = myheight + "px";
   </script>
  </body>

[dradb]

@Marks4

Just use my free asset: https://assetstore.unity.com/packages/tools/camera/fullscreenwebgl-180047

It does not seem to work Mark.
I tested your demo with Firefox, Chrome, Edge, Unity 2019.4.33.

[Marks4]

@dradb Are you using a pointerdown event?

[dradb]

@Marks4

@dradb Are you using a pointerdown event?

Thank you for your prompt reply.
I’m just using the demo scene “fullscreenwebGL” that you supply. It has a “pointerdown” on the “Enter” button.
It detects full screen (or not fs) correctly and displays the appropriate button but the buttons don’t work.