index.html

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity Web Player | ExportedProject</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <style>
      /* full-page canvas */
      html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
      #unity-container { position: absolute; inset: 0; width: 100%; height: 100%; }
      #unity-canvas { width: 100% !important; height: 100% !important; display: block; background: #000; }
      #unity-footer { display: none; }
    </style>
  </head>
  <body>
    <div id="unity-container" class="unity-desktop">
      <canvas id="unity-canvas" width=960 height=600 tabindex="-1"></canvas>
      <div id="unity-loading-bar">
        <div id="unity-logo"></div>
        <div id="unity-progress-bar-empty">
          <div id="unity-progress-bar-full"></div>
        </div>
      </div>
      <div id="unity-warning"> </div>
      <div id="unity-footer">
        <div id="unity-logo-title-footer"></div>
        <div id="unity-fullscreen-button"></div>
        <div id="unity-build-title">ExportedProject</div>
      </div>
    </div>
    <script>
      var canvas = document.querySelector("#unity-canvas");

      // Shows a temporary message banner/ribbon for a few seconds, or
      // a permanent error message on top of the canvas if type=='error'.
      // If type=='warning', a yellow highlight color is used.
      // Modify or remove this function to customize the visually presented
      // way that non-critical warnings and error messages are presented to the
      // user.
      function unityShowBanner(msg, type) {
        var warningBanner = document.querySelector("#unity-warning");
        function updateBannerVisibility() {
          warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
        }
        var div = document.createElement('div');
        div.innerHTML = msg;
        warningBanner.appendChild(div);
        if (type == 'error') div.style = 'background: red; padding: 10px;';
        else {
          if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
          setTimeout(function() {
            warningBanner.removeChild(div);
            updateBannerVisibility();
          }, 5000);
        }
        updateBannerVisibility();
      }

      // Unity surfaces non-fatal problems as alert() ("This page says...") and as an on-page
      // banner. Neither is actionable for a player, so send both to the console instead.
      window.alert = function (m) { console.warn("[unity]", m); };
      unityShowBanner = function (msg, type) { console.warn("[unity " + (type || "info") + "]", msg); };

      var buildUrl = "Build";
      var loaderUrl = buildUrl + "/WebGL.loader.js";
      var config = {
        arguments: [],
        dataUrl: buildUrl + "/WebGL.data",
        frameworkUrl: buildUrl + "/WebGL.framework.js",
        codeUrl: buildUrl + "/WebGL.wasm",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "DefaultCompany",
        productName: "ExportedProject",
        productVersion: "1.0",
        showBanner: unityShowBanner,
        // errorHandler: function(err, url, line) {
        //    alert("error " + err + " occurred at line " + line);
        //    // Return 'true' if you handled this error and don't want Unity
        //    // to process it further, 'false' otherwise.
        //    return true;
        // },
      };

      config.cacheControl = function (url) { return "no-store"; };
      config.autoSyncPersistentDataPath = true;

      // By default, Unity keeps WebGL canvas render target size matched with
      // the DOM size of the canvas element (scaled by window.devicePixelRatio)
      // Set this to false if you want to decouple this synchronization from
      // happening inside the engine, and you would instead like to size up
      // the canvas DOM size and WebGL render target sizes yourself.
      // config.matchWebGLToCanvasSize = false;

      // If you would like all file writes inside Unity Application.persistentDataPath
      // directory to automatically persist so that the contents are remembered when
      // the user revisits the site the next time, uncomment the following line:
      // config.autoSyncPersistentDataPath = true;
      // This autosyncing is currently not the default behavior to avoid regressing
      // existing user projects that might rely on the earlier manual
      // JS_FileSystem_Sync() behavior, but in future Unity version, this will be
      // expected to change.

      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        // Mobile device style: fill the whole browser client area with the game canvas:

        var meta = document.createElement('meta');
        meta.name = 'viewport';
        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
        document.getElementsByTagName('head')[0].appendChild(meta);
        document.querySelector("#unity-container").className = "unity-mobile";
        canvas.className = "unity-mobile";

        // To lower canvas resolution on mobile devices to gain some
        // performance, uncomment the following line:
        // config.devicePixelRatio = 1;


      } else {
        // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
        /* size comes from the full-page CSS */
        
      }

      document.querySelector("#unity-loading-bar").style.display = "block";

      // Prefer the whole file; fall back to stitching the uploaded parts together.
      // Not every static host answers HEAD, so fall back to a one-byte ranged GET.
      async function exists(url) {
        try {
          var head = await fetch(url, { method: 'HEAD' });
          if (head.ok) return true;
          if (head.status === 404) return false;
        } catch (e) {}
        try {
          var res = await fetch(url, { headers: { Range: 'bytes=0-0' } });
          return res.ok || res.status === 206;
        } catch (e) { return false; }
      }
      async function resolveSplitFile(url) {
        if (await exists(url)) return url;
        var namings = [
          function (i) { return url + '.part' + (i + 1); },
          function (i) { return url + '.' + String(i).padStart(3, '0'); },
          function (i) { return url + '.part' + String(i + 1).padStart(3, '0'); }
        ];
        for (var n = 0; n < namings.length; n++) {
          if (!(await exists(namings[n](0)))) continue;
          var blobs = [];
          for (var i = 0; i < 128; i++) {
            var part = namings[n](i);
            if (!(await exists(part))) break;
            blobs.push(await (await fetch(part)).blob());
          }
          // A Blob of Blobs can be backed by disk, so peak memory stays near one part.
          return URL.createObjectURL(new Blob(blobs, { type: 'application/octet-stream' }));
        }
        throw new Error('Could not find ' + url + ' or any of its parts.');
      }

      var script = document.createElement("script");
      script.src = loaderUrl;
      script.onload = async () => {
        config.dataUrl = await resolveSplitFile(config.dataUrl);
        config.codeUrl = await resolveSplitFile(config.codeUrl);
        createUnityInstance(canvas, config, (progress) => {
          document.querySelector("#unity-progress-bar-full").style.width = 100 * progress + "%";
              }).then((unityInstance) => {
                window.unityInstance = unityInstance;
                document.querySelector("#unity-loading-bar").style.display = "none";
                document.querySelector("#unity-fullscreen-button").onclick = () => {
                  unityInstance.SetFullscreen(1);
                };

              }).catch((message) => {
                alert(message);
              });
            };

      document.body.appendChild(script);

    </script>
  </body>
</html>