appetize-embed-examples/sample-constant-running.html at master · appetizeio/appetize-embed-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<html>

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

    // query params
    var publicKey = getUrlParameter('publicKey') || 'demo_phq04c56jnvrkg0bn9w5ep4m9r';
    var device = getUrlParameter('device');
    var scale = getUrlParameter('scale');
    var osVersion = getUrlParameter('osVersion');
    var deviceColor = getUrlParameter('deviceColor');
    var centered = getUrlParameter('centered');
    var orientation = getUrlParameter('orientation');
    var codec = getUrlParameter('codec');
    var heartbeatInterval = parseInt(getUrlParameter('heartbeatInterval')) || 30;
    var restartInterval = parseInt(getUrlParameter('restartInterval')) || 5 * 60;
    var refreshInterval = parseInt(getUrlParameter('refreshInterval')) || 24 * 60 * 60; // hard refresh page 1x per day

    // start when DOM is interactive
    var iframe;
    document.onreadystatechange = function () {
      if (document.readyState == "interactive") {
        iframe = document.getElementById('myIframe');
        iframe.src = 'https://appetize.io/embed/' + publicKey + '?device=' + device + '&scale=' + scale + '&orientation=' + orientation + '&codec=' + codec + '&osVersion=' + osVersion + '&deviceColor=' + deviceColor + '&centered=' + centered + '&xdocMsg=true&autoplay=true';
        iframe.onload = function () {
          start()
        }
      }
    }

    var sessionActive = false; // if device is streaming
    var restarting = false; // waiting for session to end before restarting

    function start() {
      setInterval(function () {
        endSession();

        if (sessionActive) {
          restarting = true;
        } else {
          requestSession();
        }
      }, restartInterval * 1000);

      setInterval(function () {
        sendHeartbeat();
      }, heartbeatInterval * 1000);

      setInterval(function () {
        refreshPage();
      }, refreshInterval * 1000);
    }

    function requestSession() {
      console.log("starting session");
      iframe.contentWindow.postMessage("requestSession", "*");
    }

    function endSession() {
      console.log("ending session");
      iframe.contentWindow.postMessage("endSession", "*");
    }
    function sendHeartbeat() {
      console.log("sending heartbeat");
      iframe.contentWindow.postMessage("heartbeat", "*");
    }
    function refreshPage() {
      console.log("refreshing page");
      window.location.reload();
    }

    // Receiving messages from iframe in parent window
    var messageEventHandler = function (event) {
      console.log(event.data);

      switch (event.data) {
        case "sessionRequested":
          restarting = false;
          break;
        case "appLaunch":
          sessionActive = true;
          break;
        case "sessionEnded":
          sessionActive = false;
          if (restarting) {
            requestSession();
          }
          break;
      }
    };

    window.addEventListener('message', messageEventHandler, false);
  </script>
</head>

<body>
  <iframe id="myIframe" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
</body>

</html>