-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (108 loc) · 4.8 KB
/
index.html
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content='width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes'>
<title>Unity WebGL Player | ar_final</title>
<link rel="stylesheet" href="TemplateData/style.css">
<style>
html{
height: -webkit-fill-available;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
min-height: -webkit-fill-available;
width: 100vw;
overflow: hidden;
}
.ctaDiv {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #fffa;
z-index: 99;
}
</style>
</head>
<body>
<script src="app.js" type="text/javascript"></script>
<!--IMAGETARGETS-->
<div id="startWebcamDiv" class="ctaDiv">
<p style="text-align: center; width:60vw">This augmented reality experience requires access to your device's camera</p>
<button id="startCameraBtn" onclick="StartCamera()" style="display:none">ALLOW ACCESS</button>
</div>
<div id="startWebcamManuallyDiv" style="display: none" class="ctaDiv">
<button onclick="StartCameraManually()" style="width:180px; height:40px; border:1px solid gray; border-radius:8px">START WEBCAM</button>
</div>
<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas" style="width: 100%; height: 100%; background: #0000; z-index: -99"></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>
<script src="Build/123.loader.js"></script>
<script>
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
container.className = "unity-mobile";
}
function StartCamera() {
canvas.style.width = window.innerWidth + "px";
canvas.style.height = window.innerHeight + "px";
document.getElementById("startWebcamDiv").style.display = "none";
createUnityInstance(document.querySelector("#unity-canvas"), {
dataUrl: "Build/123.data",
frameworkUrl: "Build/123.framework.js",
codeUrl: "Build/123.wasm",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "ar_final",
productVersion: "0.1",
//webglContextAttributes: { "preserveDrawingBuffer": true },
// matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size.
// devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
},
(progress) => {
progressBarFull.style.width = 100 * progress + "%";
}
).then((unityInstance) => {
window.gameInstance = unityInstance;
window.unityInstance = unityInstance;
window.iTracker.startWebcam();
//[FIX]: some browsers (such as Wechat) does not allow webcam autoplay so we need to start the webcam manually via new button press
window.waitForVideo = () => {
setTimeout(() => {
if (!window.iTracker.VIDEO) {
window.waitForVideo();
}
else if (window.iTracker.VIDEO.currentTime <= 0) {
document.getElementById("startWebcamManuallyDiv").style.display = "flex";
}
}, 2500)
};
window.waitForVideo();
loadingBar.style.display = "none";
});
loadingBar.style.display = "block";
}
function StartCameraManually() {
document.getElementById("startWebcamManuallyDiv").style.display = "none";
iTracker.VIDEO.play()
}
</script>
</body>
</html>