Today many web-browsers have several restrictions when running interactive content locally. 'Locally' means when opening a html file directly from the local file-system in the browser. In the browsers address bar local files can be identified by their file:// url.

When trying to run a local html file, the browser might restrict scripted access to other local files. And because of this dynamically loading xml, js or image files might be not possible.

A localhost server is an application that runs a web-server locally on the system and provides access to the local files by http:// or https:// addresses. This way the file access is the same as when running online on a web-server.

This has also the advantage that other systems and devices in the same local networks (e.g. mobile devices in the same wifi) could also access the files by using the localhost server address.

krpano includes two special and easy-to-use localhost server applications. One GUI application and one command-line application. More information here: krpano Testing Server

• Firefox

  Before Firefox 68:
  • Notthing todo in this case, that browser is allowing access to the local files in the same folder as the origin html file by default.
  For Firefox 68 and newer:
  1. Enter about:config in the browsers address bar.
  2. Then enter security.fileuri.strict_origin_policy in search bar on that config page to filter the available settings.
  3. Change that setting to false.
  4. After that access to local files should be possible, restarting the browser should be not necessary.

• Chrome

  Chrome would need to be started with --allow-file-access-from-files as argument. To do this:
  
  On Windows:
  1. Make a new shortcut/link icon to Chrome somewhere (e.g. by right-clicking it).
  2. Edit the proprieties of that new link (also by right-clicking it).
  3. Add --allow-file-access-from-files into the file path after Chrome.exe (make sure there is a blank between).
  4. Restart Chrome using that new icon (but make sure to close all currently opened Chrome windows before doing that).
  On Mac:
  1. Close all currently opened Chrome windows.
  2. Open the Terminal.
  3. Enter this line:

     open /Applications/Google\ Chrome.app --args --allow-file-access-from-files

• Safari (Mac)

  1. In the Safari Settings enable the Developer Menu in the Advanced tab.
  2. Then there will be a new Develop Menu in the Menubar.
  3. There enable the 'Disable Local File Restrictions' option.

There are tools like NW.js or Electron available that allow building standalone Desktop applications that run webcontent. Especially NW.js is easy to setup, so here example instructions for it:

For Windows:

1. Download NW.js from here: https://nwjs.io/.
2. Extract it anywhere.
3. As example: build a tour using the MAKE VTOUR droplet and copy the vtour folder into the extracted nwjs folder.
4. Create a file named package.json inside the nwjs folder (any texteditor will do) with the following content:

   {"name":"My tour", "main":"vtour/tour.html"}

   This file tells NW.js which file to load when starting it.
5. Then just click the nw.exe to start the tour.
6. The nw.exe file could be also renamed to any other name.

For Mac:

1. Download NW.js from here: https://nwjs.io/.
2. Right-click the nwjs application to show its package content.
3. Go there first into the Contents and then into Resources folder.
4. Make there a new folder named app.nw.
5. As example: build a tour using the MAKE VTOUR droplet and copy the vtour folder into that app.nw folder.
6. Create a file named package.json also inside the app.nw folder (any texteditor will do) with the following content:

   {"name":"My tour", "main":"vtour/tour.html"}

   This file tells NW.js which file to load when starting it.
7. Then just click the nwjs to start the tour.
8. The nwjs file could be also renamed to any other name.

More information here in the krpano Forum.

Another and very special way to bypass the local-file-access restrictions from the browsers would be embedding / inlining ALL files directly into the html file itself. That means the xml files, plugin js files and the images, all inside one (and probably large) html file. This make only sense for very small projects of course - no multi-resolution or big tours.

Technically this is possible by using DATA-Urls and base64-encoded files to inline the files. The core krpano.js file can be keep an external file (but inlining would be possible too) and the main xml file itself can be added directly without base64-encoding as script tag into the html file.

Here a full example html file (without the actual base64-encoded images, that would be too large):

<!DOCTYPE html>
<html>
<head>
  <title>krpano</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <style>
    html { height:100%; }
    body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
  </style>
</head>
<body>

<script src="krpano.js"></script>

<script id="krpanoxmlcode" type="text/xmldata">
<krpano>
  <image>
    <sphere url="data:image/jpeg;base64,...here a base64-encoded image..." />
  </image>
  <layer name="logo" url="data:image/jpeg;base64,...here a base64-encoded image..." align="rightbottom" x="10" y="10" enabled="false" />
</krpano>
</script>

<div id="pano" style="width:100%;height:100%;">
  <noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;text-align:center;"><td>ERROR:<br><br>Javascript not activated<br><br></td></tr></table></noscript>
  <script>
    embedpano({xml:null, target:"pano", html5:"webgl+only",onready:function(krpanoJSinterface)
    {
      var krpano = krpanoJSinterface.get("global");
      var xmlstring = document.getElementById("krpanoxmlcode").innerHTML;
      krpano.actions.loadxml(xmlstring);
    }});
  </script>
</div>

</body>
</html>