locked
Intel RealSense SDK and Windows Store app using HTML5 and JavaScript

    Question

  • I am trying to compile a RealSense Windows Store app using Html 5 and JavaScript.I have used jQuery 2.1.3.js and RealSense JS Library.This is the following code

    <head>
        <meta charset="utf-8" />
        <title>App1</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    
        <!-- App1 references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
        <script src="js/promise-1.0.0.min.js"></script>
        <script src="js/realsense-3.0.js"></script>
        <script src="js/realsenseinfo-3.0.js"></script>
    
        <script src="js/jquery-2.1.3.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var sense;
                var imageSize;
                var handModule;
                var handConfiguration;
    
                // check platform compatibility
                RealSenseInfo(['hand'], function (info) {
                    if (info.IsReady == true) {
                        $('#info').append('<b>Platform supports Intel(R) RealSense(TM) SDK feature</b>');
                        status('OK');
                        document.getElementById("Start").disabled = false;
                    } else {
                        status('Platform not supported: ' + info.responseText);
                        if (info.IsPlatformSupported != true) {
                            $('#info').append('<b>Intel® RealSense™ 3D camera not found</b>');
                        } else if (info.IsBrowserSupported != true) {
                            $('#info').append('<b>Please update your browser to latest version</b>');
                        } else {
                            $('#info').append('<b>Please download and install the following update(s) before running sample: </b>');
                            for (i = 0; i < info.Updates.length; i++) {
                                $('#info').append('<a href="' + info.Updates[i].url + '">' + info.Updates[i].href + '</a><br>');
                            }
                        }
                    }
                })
    
                $('#Start').click(function () {
                    document.getElementById("Start").disabled = true;
                    PXCMSenseManager_CreateInstance().then(function (result) {
                        sense = result;
                        return sense.EnableHand(onHandData);
                    }).then(function (result) {
                        handModule = result;
                        status('Init started');
                        return sense.Init(onConnect, onStatus);
                    }).then(function (result) {
                        return handModule.CreateActiveConfiguration();
                    }).then(function (result) {
                        handConfiguration = result;
                        if (document.getElementById("alerts").checked)
                            return handConfiguration.EnableAllAlerts();
                        else
                            return handConfiguration.DisableAllAlerts();
                    }).then(function (result) {
                        if (document.getElementById("gestures").checked)
                            return handConfiguration.EnableAllGestures(false);
                        else
                            return handConfiguration.DisableAllGestures();
                    }).then(function (result) {
                        return handConfiguration.ApplyChanges();
                    }).then(function (result) {
                        return sense.QueryCaptureManager();
                    }).then(function (capture) {
                        return capture.QueryImageSize(pxcmConst.PXCMCapture.STREAM_TYPE_DEPTH);
                    }).then(function (result) {
                        imageSize = result.size;
                        return sense.StreamFrames();
                    }).then(function (result) {
                        status('Streaming ' + imageSize.width + 'x' + imageSize.height);
                        document.getElementById("Stop").disabled = false;
                    }).catch(function (error) {
                        status('Init failed: ' + JSON.stringify(error));
                        document.getElementById("Start").disabled = false;
                    });
                });
    
                function clear() {
                    $('#alerts_status').text('');
                    $('#gestures_status').text('');
                    document.getElementById("Start").disabled = false;
                    var canvas = document.getElementById('myCanvas');
                    var context = canvas.getContext('2d');
                    context.clearRect(0, 0, canvas.width, canvas.height);
                }
    
                $('#Stop').click(function () {
                    document.getElementById("Stop").disabled = true;
                    sense.Close().then(function (result) {
                        status('Stopped');
                        clear();
                    });
                });
    
                function onHandData(mid, module, data) {
                    var canvas = document.getElementById('myCanvas');
                    var context = canvas.getContext('2d');
                    var radius = 5;
                    var scale = 1;
    
                    canvas.width = imageSize.width;
                    canvas.height = imageSize.height;
    
                    if (data.hands == 'undefined') return;
                    for (h = 0; h < data.hands.length; h++) {
                        var joints = data.hands[h].trackedJoint;
                        var baseX = joints[0].positionImage.x;
                        var baseY = joints[0].positionImage.y;
                        var wristX = joints[0].positionImage.x;
                        var wristY = joints[0].positionImage.y;
    
                        for (j = 0; j < joints.length; j++) {
                            if (joints[j] == null || joints[j].confidence <= 0) continue;
    
                            var x = joints[j].positionImage.x;
                            var y = joints[j].positionImage.y;
    
                            context.beginPath();
                            context.arc(x * scale, y * scale, radius, 0, 2 * Math.PI);
                            context.lineWidth = 2;
                            context.strokeStyle = 'green';
                            context.stroke();
    
                            if (j == 2 || j == 6 || j == 10 || j == 14 || j == 18) {
                                baseX = wristX;
                                baseY = wristY;
                            }
    
                            context.beginPath();
                            context.moveTo(baseX * scale, baseY * scale);
                            context.lineTo(x * scale, y * scale);
                            context.stroke();
    
                            baseX = x;
                            baseY = y;
                        }
                    }
                    for (a = 0; a < data.alerts.length; a++) {
                        $('#alerts_status').text('Alert: ' + JSON.stringify(data.alerts[a]));
                    }
                    for (g = 0; g < data.gestures.length; g++) {
                        $('#gestures_status').text('Gesture: ' + JSON.stringify(data.gestures[g]));
                    }
                }
    
                function onConnect(data) {
                    if (data.connected == false) {
                        $('#alerts_status').append('Alert: ' + JSON.stringify(data) + '<br>');
                    }
                }
    
                function onStatus(data) {
                    if (data.sts < 0) {
                        status('Error ' + data.sts);
                        clear();
                    }
                }
    
                function status(msg) {
                    $('#status').text(msg);
                }
            });
        </script>
    
    
    </head>
    <body>
        <div id="wrapper">
            <div id="container">
    
                <h1>Intel(R) RealSense(TM) SDK Hands Viewer Web Sample</h1>
    
                <div id="info"></div>
                <br>
                <input id="gestures" type="checkbox" />Gestures
                <input id="alerts" type="checkbox" />Alerts
                <br>
                <br>
                <button id="Start">Start</button>
                <button id="Stop" disabled="disabled">Stop</button>
                <br>
                <br>
    
                <canvas id="myCanvas" style="border:1px solid #000000;"></canvas>
    
                <div id="gestures_status"></div>
                <div id="alerts_status"></div>
                <br>
                Status:<div id="status"></div>
            </div>
        </div>
    </body>


    But When I am compiling the program I am getting unhandled exception

    Unhandled exception at line 115, column 29 in ms-appx://927179d3-333b-44bb-ae8c-8387e29641ec/default.html

    0x800a138f - JavaScript runtime error: Unable to get property 'length' of undefined or null reference

    Please help it will also help others to integrate Windows Store apps with RealSense SDK

    Thursday, March 26, 2015 6:58 PM

Answers

  • Hi Abhishek,

    Simply read your error message like you did not successfully import some library or the object contain "length" property is not initialized.

    I'm not sure if the line that get error is this one:

    for (h = 0; h < data.hands.length; h++) {

    I think you may set a breakpoint before this line to see if the data.hands.length is null.

    Anyway, you can get more specific suggestions from Intel RealSense SDK community:https://software.intel.com/en-us/forums/realsense

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Friday, March 27, 2015 2:53 AM
    Moderator