134 lines
6.0 KiB
HTML
134 lines
6.0 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
|
<title>Introduction</title>
|
||
|
|
<link href="css/main.css" rel="stylesheet" type="text/css" />
|
||
|
|
<link href="css/browserref.css" rel="stylesheet" type="text/css" />
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<h1>Showcase Demo sample project</h1>
|
||
|
|
<p>
|
||
|
|
Showcase Demo sample uses the <a href="index_api.html#visageVision-t"><em>VisageSDK</em></a> API to implement a simple application which demonstrates:
|
||
|
|
<ul>
|
||
|
|
<li> face tracking and facial features visualization.</li>
|
||
|
|
<li> multiple face detection from a webcam.</li>
|
||
|
|
<li> switching between face tracking and face detection.</li>
|
||
|
|
<li> face recognition during face tracking.</li>
|
||
|
|
<li> age, gender and emotion estimation during face tracking or face detection.</li>
|
||
|
|
</ul>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Installing and running the project</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
The project must be installed on a web server in order to run (it can not run from a local disk). For a quick trial from Visage Technologies web server, click
|
||
|
|
<a href="https://visagetechnologies.com/demo/" target="_blank">here</a> and choose <b>Showcase Demo</b>.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
To install the application on your own web server, upload folders lib and Samples to your web server. To run the application access the Samples/ShowcaseDemo/showcase.html page via a web browser.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
The application must be licensed in order to function. Licensing is based on License Key Files. To obtain the License Key File:
|
||
|
|
<ol>
|
||
|
|
<li>Contact your Visage Technologies contact person in order to obtain a license key.</li>
|
||
|
|
<li>Copy the obtained license key file into your application folder (e.g. Samples/ShowcaseDemo).</li>
|
||
|
|
<li>Edit ShowcaseDemo/ShowcaseDemo.html, ShowcaseDemo/analysisWorker.js and ShowcaseDemo/recognitionWorker.js. Replace the "dev_html5.vlc" in variables <i>licenseName</i> and <i>licenseURL</i> at the bottom of the file with the name of your license key file.</li>
|
||
|
|
<li id="preloadFile">NOTE: License Key File must be preloaded before registration calling VisageModule.FS_createPreloadedFile() function.
|
||
|
|
An example of how this is done in the sample:
|
||
|
|
<pre class="prettyprint source"><code>
|
||
|
|
VisageModule.FS_createPreloadedFile('/', licenseName, licenseURL, true, false, function(){ }, function(){ alert("Loading License Failed!") });
|
||
|
|
</code>
|
||
|
|
</ol>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
For further information please read <a href="licensing.html" target="_blank">licensing</a> section of the documentation.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Using the sample application</h2>
|
||
|
|
<ul>
|
||
|
|
<li>Running the sample requires a recent browser.</li>
|
||
|
|
<li>The SDK needs to download its data files before using the application (you can track progress via the progress bar).</li>
|
||
|
|
<li>Allow the application to access your camera by choosing "Allow" in the browser's pop-up bar.</li>
|
||
|
|
<li>Look straight at the camera. Tracking will start.</li>
|
||
|
|
<li><i>Optional</i>: Change the tracker configuration using the drop-down menu. For details regarding tracker configuration
|
||
|
|
files, please refer to the <a href="doc/VisageTracker Configuration Manual.pdf">VisageTracker Configuration Manual</a>.
|
||
|
|
</li>
|
||
|
|
<li><i>Optional</i>: Change the mode from the default, tracker mode to detect mode</li>
|
||
|
|
<li><i>Optional</i>: Turn face analysis ON/OFF</li>
|
||
|
|
<li><i>Optional</i>: Turn draw modes ON/OFF</li>
|
||
|
|
<li><i>Optional</i>: Turn face recognition: </li>
|
||
|
|
<ul>
|
||
|
|
<li> Face recognition starts if the MATCH FACES option is checked</li>
|
||
|
|
<li> Adding new face descriptors to the gallery stops if the FREEZE GALLERY option is checked</li>
|
||
|
|
<li> Current gallery is saved in browsers' IndexedDB when SAVE button click</li>
|
||
|
|
<li> Saved gallery is loaded from browsers' IndexedDB when LOAD button click</li>
|
||
|
|
<li> All face descriptors would be removed from the gallery when CLEAR button click</li></ul>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h2>Implementation overview</h2>
|
||
|
|
<p>
|
||
|
|
Showcase Demo is implemented in HTML and JavaScript using the VisageSDK API for face tracking, getUserMedia API to access the camera and native canvas methods for rendering.
|
||
|
|
Face tracking results are updated using requestAnimationFrame API.
|
||
|
|
Face recognition is implemented in Web Worker.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Browser compatibility</h2>
|
||
|
|
<p>
|
||
|
|
Showcase Demo sample is tested on the recent browsers on Windows, Mac, Android and iPhone platforms.
|
||
|
|
Results are represented in the following table (<b>NOTE: Application is not adapted to mobile devices.</b>).
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
function platform(platformName) {
|
||
|
|
var i;
|
||
|
|
var x = document.getElementsByClassName("browser");
|
||
|
|
for (i = 0; i < x.length; i++) {
|
||
|
|
x[i].style.display = "none";
|
||
|
|
}
|
||
|
|
document.getElementById(platformName).style.display = "block";
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="Desktop" class="browser">
|
||
|
|
<table class="browserref notranslate">
|
||
|
|
<tr>
|
||
|
|
<th></th>
|
||
|
|
<th style="width:15%;" class="bsChrome" title="Chrome"></th>
|
||
|
|
<th style="width:15%;" class="bsFirefox" title="FireFox"></th>
|
||
|
|
<th style="width:15%;" class="bsOpera" title="Opera"></th>
|
||
|
|
<th style="width:15%;" class="bsEdge" title="Edge"></th></th>
|
||
|
|
<th style="width:15%;" class="bsSafari" title="Safari"></th></th>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th style="width:10%;" class="bsDesktop" title="Desktop"></th>
|
||
|
|
<td style="background-color:#99cc99">96</td>
|
||
|
|
<td style="background-color:#99cc99">91</td>
|
||
|
|
<td style="background-color:#99cc99">81</td>
|
||
|
|
<td style="background-color:#99cc99">88</td>
|
||
|
|
<td style="background-color:#99cc99">14</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th style="width:10%;" class="bsAndroid" title="Android"></th>
|
||
|
|
<td style="background-color:#99cc99">95</td>
|
||
|
|
<td style="background-color:#99cc99">93</td>
|
||
|
|
<td style="background-color:#99cc99">64</td>
|
||
|
|
<td style="background-color:#D3D3D3">--</td>
|
||
|
|
<td style="background-color:#D3D3D3">--</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th style="width:10%;" class="bsIphone" title="Iphone"></th>
|
||
|
|
<td style="background-color:#D3D3D3">--</td>
|
||
|
|
<td style="background-color:#D3D3D3">--</td>
|
||
|
|
<td style="background-color:#D3D3D3">--</td>
|
||
|
|
<td style="background-color:#D3D3D3">--</td>
|
||
|
|
<td style="background-color:#99cc99">14</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|