Enable fullScreen WebGl

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.

1.

Code (CSharp):

1. Screen.fullScreen = !Screen.fullScreen;

2.

Code (CSharp):

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

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

Code (CSharp):

1. 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!

 

Hello alexsuvorov.

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

 

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

Code (JavaScript):

1. var LibraryPageTool = {
2.     GoFullscreen: function()
3.     {
4.         var viewFullScreen = document.getElementById('#canvas');
5.  
6.         var ActivateFullscreen = function()
7.         {
8.             if (viewFullScreen.requestFullscreen) /* API spec */
9.             {  
10.                 viewFullScreen.requestFullscreen();
11.             }
12.             else if (viewFullScreen.mozRequestFullScreen) /* Firefox */
13.             {
14.                 viewFullScreen.mozRequestFullScreen();
15.             }
16.             else if (viewFullScreen.webkitRequestFullscreen) /* Chrome, Safari and Opera */
17.             {  
18.                 viewFullScreen.webkitRequestFullscreen();
19.             }
20.             else if (viewFullScreen.msRequestFullscreen) /* IE/Edge */
21.             {  
22.                 viewFullScreen.msRequestFullscreen();
23.             }
24.  
25.             viewFullScreen.removeEventListener('touchend', ActivateFullscreen);
26.         }
27.  
28.         viewFullScreen.addEventListener('touchend', ActivateFullscreen, false);
29.     }
30. };
31. mergeInto(LibraryManager.library, LibraryPageTool);

CSharp

Code (CSharp):

1. using UnityEngine;
2. #if UNITY_WEBGL && !UNITY_EDITOR
3. using System.Runtime.InteropServices;
4. #endif
5.  
6. public class PageTool : MonoBehaviour
7. {
8. #if UNITY_WEBGL && !UNITY_EDITOR
9.     [DllImport("__Internal")]
10.     private static extern void GoFullscreen();
11.  
12.     public static void ActivateFullscreen()
13.     {
14.         GoFullscreen();
15.     }
16. #else
17.     public static void ActivateFullscreen()
18.     {}
19. #endif
20. }

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.

 

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

 

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

Feedback (or a pr) will be useful!

 

@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.

 

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

 

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

 

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

 

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

 

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

Code (JavaScript):

1.  <body>
2.    <div class="webgl-content" style="display: table; width: 100%; height: 100%;">
3.      <div id="unityContainer"></div>
4.    </div>
5.    <script>
6.    var mywidth = innerWidth;
7.    var myheight = innerHeight;
8.        document.getElementById("unityContainer").style.width = mywidth + "px";
9.        document.getElementById("unityContainer").style.height = myheight + "px";
10.    </script>
11.   </body>

 

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

 

@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.

 

Is it like this on your scene?


Change to


Something must've gone wrong when I last updated this asset. Please confirm if this is the issue.

 

@dradb I saw your review on the store. Can you tell me if the solution above fixes the problem? I tried here and it works. I will update the plugin.

EDIT

Oh it's because on Unity 2019 you can't select static methods in the inspector...ok will fix asap.

EDIT

It's fixed, I submitted to the store.

 

Thanks Mark. Yes I saw that "missing".
Do you know how long it takes to get through? Still showing the old version.

 

@Marks4 I am using your fullscreen asset in my game. It was made in 2019.4.23. Its working in a separate project. But when i import in my original project it is not working even though pointerdown is properly implemented in the button

 

My plugin was broken on Unity 2021, I recently updated it. I have a few questions.

1. Are you using the latest version of my plugin?
2. What Unity version are you using?
   
3. Can you make a sample scene with the problem and share it?

Reach out to me at marjob14@gmail.com to discuss further.

 

1. I have recently updated you plugin
2.I’m using unity 2019.4.23
3.While i build the sample scene from the same unity version the plugin is working but in my original project it shrinks the screen, I will share you the scenario in your mail. Thanks for replying