RealSense Faces

gistfile1.js

    <script type="text/javascript">
        $(document).ready(function () {
            var sense;
            var imageSize;
            var faceConfiguration;

            // check platform compatibility
            RealSenseInfo(['face3d'], 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.EnableFace(onFaceData);
                }).then(function (result) {
                    return result.CreateActiveConfiguration();
                }).then(function (result) {
                    faceConfiguration = result;
                    faceConfiguration.configs.detection.isEnabled = true;
                    faceConfiguration.configs.landmarks.isEnabled = true;
                    faceConfiguration.configs.pose.isEnabled = true;
                    faceConfiguration.configs.expressionProperties.isEnabled = true;

                    var selects = document.getElementById("mode");
                    var mode = Number(selects.options[selects.selectedIndex].value);
                    return faceConfiguration.SetTrackingMode(mode);
                }).then(function (result) {
                    return faceConfiguration.ApplyChanges();
                }).then(function (result) {
                    status('Init started');
                    return sense.Init(null, onStatus);
                }).then(function (result) {
                    return sense.QueryCaptureManager();
                }).then(function (capture) {
                    return capture.QueryImageSize(pxcmConst.PXCMCapture.STREAM_TYPE_COLOR);
                }).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() {
                $('#pose_status').text('');
                $('#expressions_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 onFaceData(mid, module, data) {
                var canvas = document.getElementById('myCanvas');
                var context = canvas.getContext('2d');
                console.log(mid,module,data)
                canvas.width = imageSize.width;
                canvas.height = imageSize.height;

                if (data.faces == 'undefined') return;
                for (f = 0; f < data.faces.length; f++) {
                    var face = data.faces[f];
                    	console.log(face)
                }
            }

            function onStatus(data) {
                if (data.sts < 0) {
                    status('Error ' + data.sts + ' on module ' + data.mid);
                    clear();
                }
            }

            function status(msg) {
                $('#status').text(msg);
            }
        });
    </script>