forked from nlothian/FlashCamShim
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (104 loc) · 4.92 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
122
123
124
125
126
127
128
129
130
131
132
133
134
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="CamShim.js"></script>
<script type="text/javascript" src="calibrate.js"></script>
<script type="text/javascript" src="common_utils.js" ></script>
<script type="text/javascript" src="keypad.js" ></script>
<script type="text/javascript" src="sylvester.js" ></script>
<script language="javascript">
var frameCount = 0;
var fpsCalcTimeSecs = 5;
var width = 80;
var height = 60;
var img = new Image();
var config;
var calibratedColorRange;
function showFrameCallback(encodedImage) {
//document.getElementById('displayImg').src="data:image/jpg;base64," + encodedImage;
img.src = "data:image/jpg;base64," + encodedImage;
frameCount++;
}
function camStatus(status) {
if (status == "ENABLED") {
document.getElementById('camera').style.width = width + "px";
document.getElementById('camera').style.height = height + "px";
} else {
alert("You need to give this page camera access.");
}
}
function camInfo(messageLevel, message) {
switch(messageLevel) {
case "ERROR": alert(message); break;
case "MESSAGE": break; // need to do something useful here
case "DEBUG": document.forms["form1"].output.value += "DEBUG: " + message + "\n"; break;
}
}
function onMotionDetected(movementOccuring) {
/*
if (movementOccuring) {
camInfo("DEBUG", "movement occuring");
} else {
camInfo("DEBUG", "movement stopped");
}
*/
}
function calcFramerate() {
var fps = (frameCount/fpsCalcTimeSecs);
frameCount = 0;
//camInfo("DEBUG","fps = " + fps);
document.getElementById('fps').value = fps;
}
function displayCam() {
// setup options
var camOptions = new CamOptions();
camOptions.resolutionX = width;
camOptions.resolutionY = height;
camOptions.framesPerSecond = 100;
camOptions.displayVideo = "true";
camOptions.camStatusCallbackFunction = "camStatus";
camOptions.messageCallbackFunction = "camInfo";
camOptions.motionDetectionCallbackFunction = "onMotionDetected";
camOptions.mirrorVideo = "true";
var camShim = new CamShim("camera", "showFrameCallback", camOptions); // create the flash camera interface
// run this to measure framerate
setInterval(calcFramerate, (fpsCalcTimeSecs * 1000));
//config = new Config(document.getElementById('displayImg'), document.getElementById('canvas'));
config = new Config(img, document.getElementById('canvas'));
}
function calibrate() {
calibratedColorRange = config.sensedColorRange();
config.close();
document.getElementById('calibrateBtn').style.display = 'none';
var keypad = new Keypad(img, document.getElementById('canvas'), calibratedColorRange);
keypad.enable();
}
</script>
<title>CamShim</title>
</head>
<body onload="displayCam()">
<div id="camera"></div>
<div id="display">
<img id='displayImg' src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=" />
<button id='calibrateBtn' onClick='calibrate();'>Calibrate</button>
<div style="padding: 15px;">
<span id='calibratedcolor' style="border: solid 5px white; margin: 3px; padding: 5px;">Calibrated Color</span>
<span id='maxcolor' style="border: solid 5px white; margin: 3px; padding: 5px;">Max</span>
<span id='mincolor' style="border: solid 5px white; margin: 3px; padding: 5px;">Min</span>
</div>
<br />FPS:<input type='text' value='0' id='fps'>
<br />Calibrated Color:<input type='text' value='0' id='display'>
<br />Closest Similarity:<input type='text' value='0' id='angle'>
</div>
<div>
<canvas id="canvas" width="320" height="240"></canvas>
<div id='key' style='font-size: 48px; width:100%; padding-left:50%;float:right'> </div>
</div>
<div>
<form name="form1" onsubmit="return false;">
<textarea cols="60" rows="20" name="output" readonly="false"></textarea>
</form>
</div>
</body>
</html>