public/controller.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <meta name="author" content="Jochem Janssens">
  <meta name="description" content=" web-experiment met WebGL (Three.js) en javascript-socketing (socket.io)">
  <meta name="keywords" content="Jochem Janssens, Jochem, Janssens, Devine, WebGL, socket">
  <title>Controller</title>
  <meta name="theme-color" content="#F6BE57">
  <link rel="shortcut icon" type="image/png" href="assets/img/favicon.png"/>
  <link rel="stylesheet" href="css/controller.css">
</head>
<body>
  <h1 class="description-title">Experiment</h1>
  <p class="description-text">
    Leg je GSM plat voor je, en probeer dan deze rond zijn assen te roteren en bekijk welk effect dit heeft op de vorm.
  </p>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
  <script type="text/javascript">
    let socket, targetId;

    const init = () => {
      targetId = getUrlParameter('id');
      if (!targetId) {
        alert('Gelieve de code via een computer te scannen');
        return;
      }
      socket = io.connect('/');

      window.addEventListener('deviceorientation', e => {
        socket.emit('update', targetId, {
          x: e.beta,
          y: e.gamma
        });
      });
    }

    const getUrlParameter = name => {
      name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
      const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
      const results = regex.exec(location.search);
      return results === null ? false : decodeURIComponent(results[1].replace(/\+/g, ' '));
    };

    init();

    WebFontConfig = {
      custom: {
        families: ['Branding'],
        urls: ['assets/fonts/branding.css']
      }
    };

    (function(d) {
      var wf = d.createElement('script'), s = d.scripts[0];
      wf.async = true;
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js';
      s.parentNode.insertBefore(wf, s);
    })(document);
  </script>
</body>