animishy.github.io/ar2.html at main · AnimishY/animishy.github.io · 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
<!DOCTYPE html>
<html>
  <head>
    <title>AR.js GLTF Viewer</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/jeromeetienne/ar.js/2.2.1/aframe/build/aframe-ar.min.js"></script>
    <style>
      body, html {
        margin: 0;
        overflow: hidden;
        font-family: sans-serif;
      }

      #goBackBtn {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #333;
        color: white;
        border: none;
        padding: 16px 32px;
        font-size: 18px;
        width: 80%;
        text-align: center;
        border-radius: 10px;
        z-index: 10;
        cursor: pointer;
      }

      #goBackBtn:hover {
        background-color: #555;
      }

      #errorMessage {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(255, 0, 0, 0.8);
        color: white;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
        max-width: 80%;
        z-index: 100;
        display: none;
      }

      #tryAgainBtn {
        margin-top: 15px;
        padding: 10px 20px;
        background-color: white;
        color: black;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }
    </style>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        // Check if getUserMedia is supported
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
          showError("Camera access not available in your browser. Please use a modern browser that supports WebRTC (like Chrome, Firefox, or Edge on desktop, or Chrome on Android).");
        }

        // Listen for AR.js errors
        window.addEventListener('camera-error', function(event) {
          showError("Camera access denied. Please ensure you've given camera permission and are using HTTPS.");
        });
      });

      function showError(message) {
        document.getElementById('errorMessage').style.display = 'block';
        document.getElementById('errorText').innerText = message;
      }

      function retryCamera() {
        location.reload();
      }
    </script>
  </head>
  <body>
    <div id="errorMessage">
      <h3>Camera Access Error</h3>
      <p id="errorText">WebRTC camera access issue detected. Please ensure your browser supports WebRTC and camera access is allowed.</p>
      <button id="tryAgainBtn" onclick="retryCamera()">Try Again</button>
    </div>

    <a-scene embedded arjs="debugUIEnabled: false;" vr-mode-ui="enabled: false">
      <!-- Marker (use default Hiro marker or replace with your own) -->
      <a-marker preset="hiro">
        <!-- Replace 'your-model.gltf' with actual path -->
        <a-entity
          gltf-model="PIS-A3-ATTEMPT2.gltf"
          scale="0.005 0.005 0.005"
          position="0 0 0">
        </a-entity>
      </a-marker>

      <a-entity camera></a-entity>
    </a-scene>

    <!-- Go Back Button -->
    <button id="goBackBtn" onclick="history.back()">← Go Back</button>
  </body>
</html>