-
-
Notifications
You must be signed in to change notification settings - Fork 23
/
Copy pathdepth-stream-colored.html
133 lines (116 loc) · 5.15 KB
/
depth-stream-colored.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Kinect Azure Example</title>
<link rel="stylesheet" href="../assets/vendors/bootstrap-4.3.1-dist/css/bootstrap.css">
<link rel="stylesheet" href="../assets/vendors/bootstrap-4.3.1-dist/css/docs.min.css">
</head>
<body class="container-fluid py-3">
<div class="d-flex align-items-baseline justify-content-between">
<h1 class="bd-title">Depth Stream (colored)</h1>
<button onclick="require('electron').remote.getCurrentWebContents().openDevTools()">open dev tools</button>
</div>
<p>
This demo shows the depth stream in an html canvas element. Note that the canvas tag in this demo is resized through css to fit the window. The native image size in this demo is <span id="info">different</span>.
</p>
<canvas id="depthCanvas" class="img-fluid"></canvas>
<script>
{
const KinectAzure = require('kinect-azure');
const kinect = new KinectAzure();
const $info = document.getElementById('info');
const $depthCanvas = document.getElementById('depthCanvas'),
depthCtx = $depthCanvas.getContext('2d');
let depthImageData;
const init = () => {
startKinect();
};
const startKinect = () => {
if(kinect.open()) {
const depthMode = KinectAzure.K4A_DEPTH_MODE_NFOV_UNBINNED;
const convertInCpp = false;
kinect.startCameras({
depth_mode: depthMode,
depth_to_redblue: convertInCpp
});
const depthModeRange = kinect.getDepthModeRange(depthMode);
kinect.startListening((data) => {
$info.textContent = ` ${data.depthImageFrame.width}x${data.depthImageFrame.height}`;
if (!depthImageData && data.depthImageFrame.width > 0) {
$depthCanvas.width = data.depthImageFrame.width;
$depthCanvas.height = data.depthImageFrame.height;
depthImageData = depthCtx.createImageData($depthCanvas.width, $depthCanvas.height);
}
if (depthImageData) {
if (convertInCpp){
renderDepthFrameToCanvas(depthCtx, depthImageData, data.depthImageFrame, depthModeRange);
} else {
renderDepthFrameAsBlueToRed(depthCtx, depthImageData, data.depthImageFrame, depthModeRange);
}
}
});
}
};
const renderDepthFrameToCanvas = (ctx, canvasImageData, imageFrame, depthModeRange) => {
canvasImageData.data.set(imageFrame.imageData);
ctx.putImageData(canvasImageData, 0, 0);
};
const renderDepthFrameAsBlueToRed = (ctx, canvasImageData, imageFrame, depthModeRange) => {
const newPixelData = Buffer.from(imageFrame.imageData);
const pixelArray = canvasImageData.data;
let depthPixelIndex = 0;
const range = 2 / 3;
for (let i = 0; i < canvasImageData.data.length; i+=4) {
const depthValue = Math.min(depthModeRange.max, Math.max(depthModeRange.min, newPixelData[depthPixelIndex+1] << 8 | newPixelData[depthPixelIndex]));
let hue = map(depthValue, depthModeRange.min, depthModeRange.max, 0, 1);
hue *= range;
hue = range - hue;
const rgb = hsvToRgb(hue, 1, 1);
pixelArray[i] = rgb[0];
pixelArray[i+1] = rgb[1];
pixelArray[i+2] = rgb[2];
pixelArray[i+3] = 0xff;
depthPixelIndex += 2;
}
ctx.putImageData(canvasImageData, 0, 0);
};
const map = (value, inputMin, inputMax, outputMin, outputMax) => {
return (value - inputMin) * (outputMax - outputMin) / (inputMax - inputMin) + outputMin;
};
/**
* https://gist.github.com/mjackson/5311256
* Converts an HSV color value to RGB. Conversion formula
* adapted from http://en.wikipedia.org/wiki/HSV_color_space.
* Assumes h, s, and v are contained in the set [0, 1] and
* returns r, g, and b in the set [0, 255].
*
* @param Number h The hue
* @param Number s The saturation
* @param Number v The value
* @return Array The RGB representation
*/
const hsvToRgb = (h, s, v) => {
let r, g, b;
const i = Math.floor(h * 6);
const f = h * 6 - i;
const p = v * (1 - s);
const q = v * (1 - f * s);
const t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r = v, g = t, b = p; break;
case 1: r = q, g = v, b = p; break;
case 2: r = p, g = v, b = t; break;
case 3: r = p, g = q, b = v; break;
case 4: r = t, g = p, b = v; break;
case 5: r = v, g = p, b = q; break;
}
return [ r * 255, g * 255, b * 255 ];
}
// expose the kinect instance to the window object in this demo app to allow the parent window to close it between sessions
window.kinect = kinect;
init();
}
</script>
</body>
</html>