HTML5開發Kinect體感游戲的實例應用

npm install kinect2

var Kinect2 = require('../../lib/kinect2'),
 express = require('express'),
 app = express(),
 server = require('http').createServer(app),
 io = require('socket.io').listen(server);
 
var kinect = new Kinect2();
// 打開kinect
if(kinect.open()) {
 // 監聽8000端口
 server.listen(8000);
 // 指定請求指向根目錄
 app.get('/', function(req, res) {
 res.sendFile(__dirname + '/public/index.html');
 });
 // 將骨骼數據發送給瀏覽器端
 kinect.on('bodyFrame', function(bodyFrame){
 io.sockets.emit('bodyFrame', bodyFrame);
 });
 // 開始讀取骨骼數據
 kinect.openBodyReader();
}

var socket = io.connect('/');
var ctx = canvas.getContext('2d');
socket.on('bodyFrame', function(bodyFrame){
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 var index = 0;
 // 遍歷所有骨骼數據
 bodyFrame.bodies.forEach(function(body){
 if(body.tracked) {
 for(var jointType in body.joints) {
 var joint = body.joints[jointType];
 ctx.fillStyle = colors[index];
 // 如果骨骼節點為脊椎中點
 if(jointType == 1) {
 ctx.fillStyle = colors[2];
 }
 ctx.fillRect(joint.depthX * 512, joint.depthY * 424, 10, 10);
 }
 // 識別左右手手勢
 updateHandState(body.leftHandState, body.joints[7]);
 updateHandState(body.rightHandState, body.joints[11]);
 index++;
 }
 });
});

kinect.on('bodyFrame', function(bodyFrame){}); //還有哪些數據類型呢？

body.joints[11] // joints包括哪些呢？

body [object] {
 bodyIndex [number]：索引，允許6人
 joints [array]：骨骼節點，包含坐標信息，顏色信息
 leftHandState [number]：左手手勢
 rightHandState [number]：右手手勢
 tracked [boolean]：是否捕獲到
 trackingId
} 

var emitColorFrame = false;
io.sockets.on('connection', function (socket){
 socket.on('startColorFrame', function(data){
 emitColorFrame = true;
 });
});
kinect.on('multiSourceFrame', function(frame){
 
 // 發送玩家骨骼數據
 io.sockets.emit('bodyFrame', frame.body);
 
 // 玩家拍照
 if(emitColorFrame) {
 var compression = 1;
 var origWidth = 1920;
 var origHeight = 1080;
 var origLength = 4 * origWidth * origHeight;
 var compressedWidth = origWidth / compression;
 var compressedHeight = origHeight / compression;
 var resizedLength = 4 * compressedWidth * compressedHeight;
 var resizedBuffer = new Buffer(resizedLength);
 // ...
 // 照片數據過大，需要壓縮提高傳輸性能
 zlib.deflate(resizedBuffer, function(err, result){
 if(!err) {
 var buffer = result.toString('base64');
 io.sockets.emit('colorFrame', buffer);
 }
 }); 
 emitColorFrame = false;
 }
});
kinect.openMultiSourceReader({
 frameTypes: Kinect2.FrameType.body | Kinect2.FrameType.color
});

(function(){
 importScripts('pako.inflate.min.js');
 
 var imageData;
 function init() {
 addEventListener('message', function (event) {
 switch (event.data.message) {
 case "setImageData":
 imageData = event.data.imageData;
 break;
 case "processImageData":
 processImageData(event.data.imageBuffer);
 break;
 }
 });
 }
 function processImageData(compressedData) {
 var imageBuffer = pako.inflate(atob(compressedData));
 var pixelArray = imageData.data;
 var newPixelData = new Uint8Array(imageBuffer);
 var imageDataSize = imageData.data.length;
 for (var i = 0; i < imageDataSize; i++) {
 imageData.data[i] = newPixelData[i];
 }
 for(var x = 0; x < 1920; x++) {
 for(var y = 0; y < 1080; y++) {
 var idx = (x + y * 1920) * 4;
 var r = imageData.data[idx + 0];
 var g = imageData.data[idx + 1];
 var b = imageData.data[idx + 2];
 }
 }
 self.postMessage({ "message": "imageReady", "imageData": imageData });
 }
 init();
})(); 

var tracks = this.tracks;
var len = tracks.length;
 
// 數據過濾
if(tracks[len-1] !== window.undefined) {
 if(Math.abs(n - tracks[len-1]) > 0.2) {
 return;
 }
}
this.tracks.push(n);

// 保留5個數據
if(this.tracks.length > 5) {
 this.tracks.shift();
} else {
 return;
}
 
// 位移總量
var dis = 0;
for(var i = 1; i < this.tracks.length; i++) {
 dis += this.tracks[i] - this.tracks[i-1];
}
if(Math.abs(dis) < 0.01) {
 this.stand();
} else {
 if(this.tracks[4] > this.tracks[3]) {
 this.turnRight();
 } else {
 this.turnLeft();
 }
 this.run();
}