-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (76 loc) · 2.54 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
<html>
<head>
<script src="js/aframe.min.js"></script>
<script src="spectator.js"></script>
<style type="text/css">
/* #spectatorDiv {
position: absolute;
left:0;
top: -1000;
}*/
#hmdDiv {
position: absolute;
z-index: 100;
top:0;
left:0;
}
#composite {
position: absolute;
z-index: -100;
top:0;
left:340px;
}
</style>
</head>
<body>
<div style="height:240px; width:320px;" id="hmdDiv">
<a-scene embedded stats>
<a-sphere
position="0 1.25 -1"
radius="1.25"
color="#EF2D5E">
<a-animation
attribute="scale"
duration="2000"
to="1.3 1.3 1.3"
direction="alternate"
repeat="indefinite">
</a-animation>
</a-sphere>
<a-box
position="-1 0.5 1"
rotation="0 45 0"
width="1" height="1" depth="1"
color="#4CC3D9"></a-box>
<a-cylinder
position="1 0.75 1"
radius="0.5" height="1.5"
color="#FFC65D"></a-cylinder>
<a-plane
rotation="-90 0 0"
width="4" height="4"
color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
<a-entity id="primaryCamera" position="0 0 3.8">
<a-camera></a-camera>
</a-entity>
<a-entity id="secondaryCamera" position="2 1.8 4.8" rotation="-20 45 0">
<a-camera look-controls="hmdEnabled:false;" active="false"
spectator="fps:30;
specDiv:#spectatorDiv;
camVideo:#videoElement;
compDiv:#composite;
gaussBlur:true">
</a-camera>
</a-entity>
</a-scene>
<div id="spectatorDiv" style="height:240px; width:320px;"></div>
<!-- 640 x 480 -->
<div hidden id="webcam" style="height:480px; width:640px;">
<video autoplay="true" id="videoElement" class="videoInsert" width="640" height="480">
</video>
</div>
<div id="composite" style="height:480px; width:640px;">
</div>
</body>
</html>