I have a problem with the MultiSourceReader in browser.
I can't see in the browser the Skeleton and Colors (video) simultaneously.
//var Kinect2 = require('../lib/kinect2'),
var Kinect2 = require('kinect2'), //change to 'kinect2' in a project of your own
express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server),
zlib = require('zlib');
var kinect = new Kinect2();
if(kinect.open()) {
server.listen(8000);
console.log('Server listening on port 8000');
console.log('Point your browser to http://localhost:8000');
app.get('/', function(req, res) {
res.sendFile(__dirname + '/public/index_multi_video.html');
});
app.use(express.static(__dirname + '/public'));
// compression is used as a factor to resize the image
// the higher this number, the smaller the image
// make sure that the width and height (1920 x 1080) are dividable by this number
// also make sure the canvas size in the html matches the resized size
var compression = 3;
var origWidth = 1920;
var origHeight = 1080;
var origLength = 4 * origWidth * origHeight;
var compressedWidth = origWidth / compression;
var compressedHeight = origHeight / compression;
var resizedLength = 4 * compressedWidth * compressedHeight;
//we will send a smaller image (1 / 10th size) over the network
var resizedBuffer = new Buffer(resizedLength);
var compressing = false;
kinect.on('multiSourceFrame', function(data){
//compress the depth data using zlib
if(!compressing) {
compressing = true;
//data is HD bitmap image, which is a bit too heavy to handle in our browser
//only send every x pixels over to the browser
var y2 = 0;
for(var y = 0; y < origHeight; y+=compression) {
y2++;
var x2 = 0;
for(var x = 0; x < origWidth; x+=compression) {
var i = 4 * (y * origWidth + x);
var j = 4 * (y2 * compressedWidth + x2);
resizedBuffer[j] = data[i];
resizedBuffer[j+1] = data[i+1];
resizedBuffer[j+2] = data[i+2];
resizedBuffer[j+3] = data[i+3];
x2++;
}
}
zlib.deflate(resizedBuffer, function(err, result){
if(!err) {
var buffer = result.toString('base64');
io.sockets.sockets.forEach(function(socket){
socket.volatile.emit('multiSourceFrame', buffer);
});
}
compressing = false;
});
}
});
kinect.openMultiSourceReader({frameTypes: Kinect2.FrameType.color});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Node Kinect2 Client</title>
<link rel="stylesheet" href="">
</head>
<body>
<canvas id="bodyCanvas" width="640" height="360"></canvas>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('/');
var canvas = document.getElementById('bodyCanvas');
var ctx = canvas.getContext('2d');
var colorProcessing = false;
var colorWorkerThread = new Worker("js/colorWorker.js");
colorWorkerThread.addEventListener("message", function (event) {
if(event.data.message === 'imageReady') {
ctx.putImageData(event.data.imageData, 0, 0);
colorProcessing = false;
}
});
colorWorkerThread.postMessage({
"message": "setImageData",
"imageData": ctx.createImageData(canvas.width, canvas.height)
});
socket.on('multiSourceFrame', function(imageBuffer){
if(!colorProcessing) {
colorProcessing = true;
colorWorkerThread.postMessage({ "message": "processImageData", "imageBuffer": imageBuffer });
}
});
</script>
</body>
</html>
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent