Intel-RealSense-Navigation-Library/Sample.html at master · Intel-Technology/Intel-RealSense-Navigation-Library · GitHub

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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Web Navigator</title>
<script src="./JS/realsense.js"></script>
<script src="./JS/realsense-navigator.js"></script>
<script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>
<script src="https://autobahn.s3.amazonaws.com/autobahnjs/latest/autobahn.min.jgz"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="css/intel-realsense-navigator.css">

<style type="text/css">
html {
  height: 100%;
}

body {
  padding:0;
  margin:0;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  width: 100%;
  height: 100%;
  text-align: center;
}

#content {
    text-align: left;
    font-family: Arial Black;
    font-size: 24px;
    padding: 5px;
}

#list {
    text-align: left;
    font-family: Arial Black;
    font-size: 22px;
    padding: 5px;
}

ol {
  padding-left: 50px;
}

</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  self.supported();
  self.CompatibilityCheck();
});

self.CompatibilityCheck = function () {
    UpdateText("Checking  Compatibility.");
    //check platform compatibility
    intel.realsense.SenseManager.detectPlatform(['hand', 'voice', 'nuance_en_us_cnc'], []).then(function (info) {
        if (info.nextStep == 'ready') {
            UpdateText("Platform supports Intel(R) RealSense(TM) SDK feature");
            self.preparerealsenseexperience();
        }
        else if (info.nextStep == 'unsupported') {
            UpdateText("Check platform readiness for Intel(R) RealSense(TM) SDK");
        }
        else if (info.nextStep == 'driver') {
            UpdateText("Please upgrade RealSense(TM) F200 Depth Camera Manager (DCM) and firmware before running the application");
        }
        else if (info.nextStep == 'runtime') {
            UpdateText("Please download and install Intel(R) RealSense(TM) SDK Runtime before running the application");
        }
    });
}


  //Check to see if we are on the target platform. This can be modified to support a wider range
  //but please ensure that you validate on the target browsers before shipping.
  self.supported = function (){
    UpdateText("Checking Platform");
    //check if we are on a Windows platform
	if(check(/windows|win32/)){
	  //Check if browser is Internet explorer 11 or above
	  if (navigator.userAgent.indexOf('Trident') >= 0 && navigator.userAgent.indexOf('MSIE') == -1) {
	    alert('Browser is IE');
      }
	  //Check if browser is Chrome
	  else if (navigator.userAgent.search("Chrome") >= 0) {
	    alert("Browser is Chrome");
	  }
	  //Check if browser is Firefox
	  else if (navigator.userAgent.search("Firefox") >= 0) {
	    alert("Browser is Firefox");
	  }
	  else {
	    alert('Please update/install and re-run the sample on a supported browser');
	  }
	}
  };

  self.preparerealsenseexperience = function (){
	var navigator = new IntelRealSense.Navigator();
    var content = document.getElementById('content');

	  //navigator.addNavigationElement('realsense-pinch', content, function(event) { console.log(event.detail) } );
    navigator.addNavigationElement('realsense-hover', content, function(event) { console.log(event.detail) } );
    //navigator.addNavigationElement('realsense-tap', content, function() { alert('woohoo'); });
    navigator.addSpeechElement(['hello', 'monkey'], function(word) {alert(word);});
    //navigator.addNavigationElement('realsense-speech-begin', content, function() { alert('you said something'); });
    navigator.init();
    navigator.startNavigation();
  }

  function stuff(){
    console.log('stuff');
  }
  //**helper functions**//

  // Check user agent string
  var ua = navigator.userAgent.toLowerCase();
  var check = function(r) {
      return r.test(ua);
  };

  //get and update text by id
  function UpdateText(fieldName) {
    var fieldNameElement = document.getElementById("field_name");
    while(fieldNameElement.childNodes.length >= 1) {
      fieldNameElement.removeChild(fieldNameElement.firstChild);
    }
    fieldNameElement.appendChild(fieldNameElement.ownerDocument.createTextNode(fieldName));
  }
</script>
</head>
<body>
  <video class="intel-realsense" id="testvideo" width="568" height="320" controls="">
      <source src="video/RealSense.mp4" type="video/mp4">
      Your browser does not support the video tag.
  </video>
    <div id="field_name">Checking  Compatibility.</div>
    <h1>Intel&#174 RealSense&#8482 Navigation Sample</h1>
<div id="content">
    <h1>About the library</h1>
    <p>This sample demonstrates the use of Intel&#174 RealSense&#8482 Navigation library, which is a simple interface to the Intel&#174 RealSense&#8482 SDK for Web.
        Out of the box the library provides the ability to easily integrate an end-to-end solution for gesture and voice recognition in your web page.
        The library also allows you to subscribe to speech and gesture events, to further customize and tailor the experience to your application.
        The following is what you will learn from this sample:</p>

    <div id ="Div1">
        <ul>
            <li>Query if the system is RealSense capable</li>
            <li>Check RealSense components are up-to-date</li>
            <li>Voice recognition to play and pause a video</li>
            <li>Voice recognition to open a hyperlink</li>
            <li>Voice recognition to scroll the page up or down</li>
            <li>Gestures to play/pause a video</li>
            <li>Gestures to interact with hyperlinks and other page elements</li>
        </ul>
    </div>

     Check out the Intel&#174 <a href="https://software.intel.com/en-us/realsense/home" id="A1" class="intel-realsense">Developer Zone</a> to find out more about RealSense&#8482 and offerings.


    <h2>Code Breakdown</h2>

    <p>
        To prepare for the RealSense experience, we must ensure that the browser trying to run is supported. In the following listing we determine if the browser is one of three supported.
        WE look for Chrome, Firefox and Internet explorer (version 11 and up). If the browser is neither of these we do not initialize or do any further checking. At this point
        the application should fallback to the traditional mouse and keyboard functionality. Note the browser check can be modified to support a wider range (Opera for example is supported)
        since the user agent string includes chrome, but please ensure that you validate the browsers you intend to support before shipping.
    </p>

    <pre><code>
    //Check to see if we are on the target platform. This can be modified to support a wider range
    //but please ensure that you validate on the target browsers before shipping.
    self.supported = function (){
      UpdateText("Checking  Platform");
      //check if we are on a Windows platform
      if(check(/windows|win32/)){
        //Check if browser is Internet explorer 11 or above
        if (navigator.userAgent.indexOf('Trident') >= 0 && navigator.userAgent.indexOf('MSIE') == -1) {
          alert('Browser is IE');
        }
        //Check if browser is Chrome
        else if (navigator.userAgent.search("Chrome") >= 0) {
          alert("Browser is Chrome");
        }
        //Check if browser is Firefox
        else if (navigator.userAgent.search("Firefox") >= 0) {
          alert("Browser is Firefox");
        }
        else {
          alert('Please update/install and re-run the sample on a supported browser');
        }
      }
    };
    </code></pre>


    <p>In the following code listing we see the platform compatibility check. What this does is determine if the platform is ready and has the necessary components using the following flags:</p>
    <div id ="Div1">
        <ul>
            <li>isCameraF200 - Checks whether the system has an available RealSense camera</li>
            <li>isDCMF200Ready - Checks that the DCM is installed and up-to-date</li>
            <li>isRuntimeInstalled - Checks that the SDK runtime is installed and up-to-date</li>
            <li>isCheckNeeded - Determines if the check is necessary (flag set when the system RS enabled with ECM, runtime, camera, etc.)</li>
        </ul>
    </div>

    <pre><code>
    self.CompatibilityCheck = function(){
      UpdateText("Checking  Compatibility.");
      //check platform compatibility
      RealSenseInfo(['hand', 'voice', 'nuance_en_us_cnc'], function (info) {
        if (info.isDCMF200Ready && info.isRuntimeInstalled) {
          UpdateText("Platform supports Intel(R) RealSense(TM) SDK feature");
          self.preparerealsenseexperience();
        } else {
          if (info.isCheckNeeded) {
            UpdateText("Check platform readiness for Intel(R) RealSense(TM) SDK");
          } else {
            if (!isCameraF200 && !info.isDCMF200Ready) {
              UpdateText("Application cannot run because Intel(R) RealSense(TM) 3D F200 camera is not available");
            }
            if (isCameraF200 &&!info.isDCMF200Ready) {
              UpdateText("Please upgrade RealSense(TM) F200 Depth Camera Manager (DCM) and firmware before running the application");
            }
            if (!info.isRuntimeInstalled) {
              UpdateText("Please download and install Intel(R) RealSense(TM) SDK Runtime before running the application");
            }
          }
        }
      })
    };
    </code></pre>

    <p>
        Once the check has completed successfully, we can initialize RealSense navigation and RealSense engine. In the following listing we first create an instance of the navigation library and a reference to the content object.
        We then add a user defined element and it's callback for the given event, in this case the tap gesture event. We then add a user defined list of commands (can be a specific command or phrase) to be accepted and a callback.
        Note the scrolling via hand position is default functionality and is available out of the box. Lastly, we initialize the navigation library, which in turn creates the navigation elements for scrolling and initializes the gesture and
        speech modules of the RealSense SDK. Then we begin by starting the navigation, which is used for visualization of the hand position and scroll direction indicators.
    </p>

    <code><pre>
    self.preparerealsenseexperience = function (){
      var navigator = new IntelRealSense.Navigator();
      var content = document.getElementById('content');
      //navigator.addNavigationElement('realsense-tap', content, function() { alert('woohoo'); });
      navigator.addSpeechElement(['hello', 'monkey'], function(word) {alert(word);});
      //navigator.addNavigationElement('realsense-speech-begin', content, function() { alert('you said something'); });

      navigator.addNavigationElement('realsense-pinch', content, function(event) { console.log(event.detail) });
      navigator.init();
      navigator.startNavigation();
    }
    </code></pre>

    <p>
        Thanks for trying the RealSense Navigation Library. We hope to see the community help contribute to this Open Source project. Please feel free to fork the <a href="https://github.com/Intel-Technology/Intel-RealSense-Navigation-Library" id="A2" class="intel-realsense">Intel&#174  RealSense&#8482 Navigation Library</a> project on Github.

        A quick note on the Intel Privacy Policy: We require that anytime the camera and microphone is used to capture user data, they ne informed of the action, via a notification pop-up.
    </p>

</div>
<div>
</div>


</body></html>