darkruby501.github.io/index.html at master · darkruby501/darkruby501.github.io · GitHub

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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!doctype html>
<html lang="en">
	<head>
		<title>PPG Webcam Pulse Detector</title>
		<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
		<meta charset="utf-8">
		<style>
			body {
				background-color: #00FF00; /*#f0f0f0;*/
				margin-left: 10%;
				margin-right: 10%;
				margin-top: 5%;
				width: 40%;
				overflow: hidden;
				font-family: "Helvetica", Arial, Serif;
				position: relative;
			}
		</style>
	</head>
	<body>
		<script src="./js/headtrackr.js"></script>
		<script src="./js/dsp.js"></script>
 		<script src="./js/pulsedetectr.js"></script>
		<script src="./js/smoothie.js"></script>
		<script src="./js/raphael-min.js"></script>
		<script src="./js/g.raphael-min.js"></script>
		<script src="./js/g.line-min.js"></script>

<!-- 	   <h2 style="font-family:lucida console">Photoplethysmogram Webcam Pulse Detector</h2>
 -->

		<canvas id="compare" width="320" height="240" style="display:none"></canvas>
		<video id="vid" autoplay loop width="320" height="240"></video>
		<canvas id="overlay" width="320" height="240"></canvas>
		<canvas id="test_canvas" width=320 height=240></canvas> <!-- New canvas for testing	 -->
		<canvas id="debug" width="320" height="240"></canvas>
		<canvas id="chart" width="320" height="80"></canvas> <!-- For real-time plot-->
		<canvas id="heartrate" width="320" height="80"></canvas> <!-- For real-time plot-->
	<!-- 	<canvas id="spectrum" width="320" height="240"></canvas> -->


		<p style="font-weight: bold;">Heart Rate : <span id='HeartRateBPM'></span> bpm</p>
		<p id='gUMMessage'></p>
		<p>Status : <span id='headtrackerMessage'></span></p>
		<p>Mean Green on Forehead : <span id='GrnAverageValue'></span></p>
		<p>Buffer Size : <span id='BufferSize'></span></p>
		<p>Sample Rate : <span id='SampleRate'></span> Hz</p>
		<p>Buffer Fill Time: <span id='BufferFillTime'></span> ms</p>
		<p>Resolution : <span id='BPMres'></span> bpm</p>


		<p><input type="button" onclick="htracker.stop();htracker.start();pdetector.reset();" value="reinitiate"></input>
		<br/><br/>


		<script>
		  // set up video and canvas elements needed
			var spectrumCanvas = Raphael(325, 320, 325, 240);

			//var spectrumCanvas = document.getElementById('spectrum');
			var videoInput = document.getElementById('vid');
			var canvasInput = document.getElementById('compare');
			var canvasOverlay = document.getElementById('overlay');
			var debugOverlay = document.getElementById('debug');
			var chartCanvas = document.getElementById('chart');
			var heartCanvas = document.getElementById('heartrate');
			var overlayContext = canvasOverlay.getContext('2d');
			/*var inputContext = canvasInput.getContext('2d'); //added to access video canvas*/

			//Varibles for pulsedetectr canvas.
			var testOverlay = document.getElementById('test_canvas');
/*			var testOverlayContext = testOverlay.getContext('2d');*/

			canvasOverlay.style.position = "absolute";
			canvasOverlay.style.top = '0px';
			canvasOverlay.style.zIndex = '100001';
			canvasOverlay.style.display = 'block';
			debugOverlay.style.position = "absolute";
			debugOverlay.style.top = '0px';
			debugOverlay.style.zIndex = '100002';
			debugOverlay.style.display = 'none';


			// add some custom messaging

			statusMessages = {
				"whitebalance" : "checking for stability of camera whitebalance",
				"detecting" : "Detecting face",
				"hints" : "Hmm. Detecting the face is taking a long time",
				"redetecting" : "Lost track of face, redetecting",
				"lost" : "Lost track of face",
				"found" : "Tracking face"
			};

			supportMessages = {
				"no getUserMedia" : "Unfortunately, <a href='http://dev.w3.org/2011/webrtc/editor/getusermedia.html'>getUserMedia</a> is not supported in your browser. Try <a href='http://www.opera.com/browser/'>downloading Opera 12</a> or <a href='http://caniuse.com/stream'>another browser that supports getUserMedia</a>. Now using fallback video for facedetection.",
				"no camera" : "No camera found. Using fallback video for facedetection."
			};

			document.addEventListener("headtrackrStatus", function(event) { //selects which status message to display
				if (event.status in supportMessages) {
					var messagep = document.getElementById('gUMMessage');
					messagep.innerHTML = supportMessages[event.status];
				} else if (event.status in statusMessages) {
					var messagep = document.getElementById('headtrackerMessage');
					messagep.innerHTML = statusMessages[event.status];
				}

			}, true);

			// the face tracking setup

			var htracker = new headtrackr.Tracker({altVideo : {ogv : "./media/capture5.ogv", mp4 : "./media/capture5.mp4"}, calcAngles : true, ui : false, headPosition : false, debug : debugOverlay, detectionInterval : 20});
			htracker.init(videoInput, canvasInput);
			htracker.start();


			var pdetector = new pulsedetectr.Detector();
			pdetector.init({CanvasBag: {iCanvas:canvasInput, oCanvas: testOverlay, oCanvas2: canvasOverlay, oChart: chartCanvas, oHeart: heartCanvas}, bufferSize: 128});


			// for each facetracking event received draw rectangle around tracked face on canvas

			document.addEventListener("facetrackingEvent", function( event ) {
				// clear canvas
				// overlayContext.clearRect(0,0,320,240);


				// once we have stable tracking, draw rectangle
				if (event.detection == "CS") {


					pdetector.set_event(event);
					// pdetector.run(event);


					// var messagep = document.getElementById('GrnAverageValue');
					// messagep.innerHTML = pdetector.GrnAverage;
				}
			});


			setInterval(function(){
				pdetector.run();
				var messagep = document.getElementById('GrnAverageValue');
				messagep.innerHTML = pdetector.GrnAverage;
				}, 20);

			setInterval(function(){
				if(pdetector.initialised==true){pdetector.getpulse()}
				}, 500);

				//	pdetector.plotSpectrum(spectrumCanvas)

		</script>
	</body>
</html>