-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathpanostream.html
111 lines (97 loc) · 3.64 KB
/
panostream.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
<!DOCTYPE HTML PUBLIC -//IETF//DTD HTML//EN">
<!--
Copyright (c) 2013 The WebRTC project authors. All Rights Reserved.
Use of this source code is governed by a BSD-style license
that can be found in the LICENSE file in the root of the source
tree. An additional intellectual property rights grant can be found
in the file PATENTS. All contributing project authors may
be found in the AUTHORS file in the root of the source tree.
-->
<html>
<head>
<title>Multi-device panorama video</title>
<link rel="StyleSheet" href="stylesheet.css">
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
<!-- Load the polyfill to switch-hit between Chrome and Firefox. -->
<script src="adapter.js"></script>
<!--
Load the code that creates the scene, caneras and maps video feeds to 3D
textures. Internally it uses:
* The profiler nanolibrary from http://inspirit.github.io/jsfeat for FPS
collection etc.
* Obviously the three.JS library.
-->
<script src="libs/profiler.js" type="text/javascript" ></script>
<script src="libs/three.js" type="text/javascript" ></script>
<script src="libs/TrackballControls.js" type="text/javascript" ></script>
<script src="webgl.js" type="text/javascript"></script>
<!-- This is the NaCl/PNaCl part -->
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<title>NaClMiguelao</title>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="stitching.js"></script>
<script src="panostream.js"></script>
<script type="text/javascript">
window.onload = function() {
getDevices();
startWebGL();
};
</script>
</head>
<body data-name="nacl_glue"
data-tools="glibc pnacl linux"
data-configs="Release"
data-path="{tc}/..">
<div id="wrapper">
<!--
Just as in part1, the <embed> element will be wrapped inside the <div>
element with the id "listener". In part1, the embed was specified in HTML,
here the common.js module creates a new <embed> element and adds it to the
<div> for us.
-->
<div id="listener"></div>
<!--
This element will be populated with the messages that come from the NaCl
module. See example.js.
-->
<div id="log" style="display:none"></div>
<div>
Current webcam: <select id="videosrc"></select>
<button id="request-video" onclick="requestVideo();">Request video</button>
<button id="reset-video" onclick="resetAllVideo();">Reset all devices
</button>
<button id="btn_calibrate" onclick="calibrate()" disabled="true">
(Please) calibrate.</button>
</div>
<div>Panorama:</div>
<div id="container">
<div id="left">
<video width="320" height="240" id="vid1" autoplay="autoplay"
class="video-area"></video>
<div id="vid1-label"></div>
<div>
Size: <div id="vid1-size" class="inline-contents"></div>
<div id="vid1-stream-size" class="inline-contents">(stream size
:N/A)</div><br/>
</div>
</div>
<div id="left">
<video width="320" height="240" id="vid2" autoplay="autoplay"
class="video-area"></video>
<div id="vid2-label"></div>
<div>
Size: <div id="vid2-size" class="inline-contents"></div>
<div id="vid2-stream-size" class="inline-contents">(stream size
:N/A)</div><br/>
</div>
</div>
</div>
<canvas id="canvas1" width="320" height="240" style="display:none"></canvas>
<canvas id="canvas2" width="320" height="240" style="display:none"></canvas>
<!--<canvas id="canvas3" width="320" height="240"></canvas>-->
<div id="glcanvas" width="960" height="240"></div>
<br>
</div>
</body>
</html>