-
Notifications
You must be signed in to change notification settings - Fork 1
/
camera.html
73 lines (71 loc) · 3.41 KB
/
camera.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
<body>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.js"></script>
<script src="js/camera.js"></script>
<script src="js/adapter.min.js"></script>
<script src="js/animate.min.js"></script>
<title>Biscuit | Camera</title>
<center>
<div class="invisible">
<canvas id="canvasuse" width="1280" height="960"></canvas>
</div>
<div id="captureForm" style="background-color:#FFE3BB;">
<!--<div style="float:right;">
<br>
<div id="controls" width="100px" style="border: 3px solid #DDB05B;border-radius:5px;margin-right:20px;margin-top:2px;margin-bottom:2px;">
<h2>Controls</h2>
<h4 style="margin-top:2px;margin-bottom:2px;">Set Aspect Ratio</h4>
<button id="1:1" onclick="scale=1;">1:1</button><button id="3:2" onclick="scale=(3/2);">3:2</button><button id="4:3" onclick="scale=(4/3);">4:3</button><button id="16:9" onclick="scale=(16/9);">16:9</button>
</div>
</div>-->
<div id="display" style="height:240px;width:320px;">
<!-- If spacing is broken don't blame me, it is very fickle.-->
<video style="opacity:1;position:fixed;z-index:1;border:2px solid #DDB05B;border-radius:2px;" id="video" width="320" height="240" autoplay></video>
<canvas id="canvas" style="opacity:0.5;position:fixed;z-index:10;border:2px solid #DDB05B;border-radius:2px;" width="320" height="240"></canvas>
<img style="opacity:0;border:2px solid #DDB05B;border-radius:2px;" id="playback" src="#" width="320" height="240"></img>
</div>
<button id="snap" style="float:center;">Take Frame</button>
<br>
<button style="float:center;" id="btn-onion">Toggle Onion Skinning</button>
<br>
<button style="float:center;" id="btn-playback">Playback</button> Framerate:
<input value="24" id="framerate" type="text" class="numtext">
<br>
<h3>Frames</h3>
<button style="float:center;" id="btn-download">Download Frames</button><!--<button style="float:center;" id="btn-import">Import Frames</button>-->
<button style="float:center;" id="btn-export">Export Video</button> Framerate:
<input value="24" id="exframerate" type="text" class="numtext">
<a id="video-dl" href="#"></a>
<div id="area-frame-preview">
</div>
</div>
<script>
var scale = (1 + (1 / 3));
var widthdiv = 2.5;
function dynwindow() {
winW = parent.winW;
var childvid = document.querySelector('#video');
var childcanvas = document.querySelector('#canvas');
var childpbimg = document.querySelector('#playback');
var containdiv = document.querySelector('#display');
var controls = document.querySelector('#controls');
var dynwidth = parent.winW;
childvid.width = (dynwidth / widthdiv);
var vidwidth = childvid.width;
vidwidth = parseInt(vidwidth);
var vidheight = vidwidth / scale;
childvid.height = vidheight;
childcanvas.height = vidheight;
childpbimg.height = vidheight;
childcanvas.width = vidwidth;
containdiv.style.height = vidheight;
containdiv.style.width = vidwidth;
childpbimg.width = vidwidth;
controls.width = (winW / 8);
picheight = picwidth / scale;
document.getElementById("controls").style = "margin-right:100px";
}
setInterval('dynwindow()', 20);
</script>
</center>
</body>