WebServerBasics-WPF C# Sample

Article
07/14/2014

Kinect for Windows 1.8

Overview

The Kinect web server sample demonstrates how to implement a Kinect-enabled user interface using HTML5 and JavaScript in a web browser. This sample uses web protocols to deliver Kinect sensor streams to the web browser. However, for optimal latency and security it is best to run the Kinect web server on the same machine as the web browser.

The sample consists of a simple host application (WebServerBasics-WPF.exe) and a reusable assembly (Microsoft.Samples.Kinect.WebServer) that implements the actual Kinect web server. The web server uses standard web protocols (HTTP/REST and WebSocket) to provide a number of real-time Kinect streams to the HTML5 application. This sample implements the Interaction Stream, Skeleton Stream, User Viewer, and Background Removed Stream. You can implement other streams by using the patterns demonstrated in the sample. The Kinect web server can also serve up static files; however, we recommend using a dedicated web server such as IIS to serve real content.

A set of JavaScript APIs are supplied in the sample to allow the HTML5 application to access the streams, as well as to hook up the Kinect-enabled HTML UI elements to the interaction stream events.

Configuring the web server

The Kinect web server is configured to listen on a dedicated port. By default, the sample uses port 8181. You can change the port number by modifying the WebServerBasics-WPF.exe.config configuration file.

If you are running the Kinect web server on the same machine as the web browser, no special firewall configuration is needed. In other configurations—such as running the Kinect web server in a virtual machine or on a networked machine—you must open the Kinect web server port in the Windows Firewall.

Important

Because the Kinect stream data is not encrypted and the client is not authenticated, we strongly recommend that you do not open the Kinect web server port to the Internet.

Host configurations

This sample can be adapted to demonstrate the host configurations that are described in the following sections. Changes to the configuration should be made in the sample's WebServerBasics-WPF.exe.config configuration file. The settings that control host configurations are listed in the following table.

Setting	Description
OriginUri	Specifies the host path and port to use to connect to the server.
FileRootDirectory	Specifies the relative or absolute path to where web content is located on disk. The web content can be accessed through the https://localhost:8181/file/... URI.
AccessControlAllowedOrigins	Limits cross-origin resource sharing to the specified set of hosts.

Simple local host configuration

In the simplest host configuration, the Kinect web server runs on the local computer and is used both to supply the Kinect sensor streams and to serve simple web content.

Figure 1. Figure 1. Simple local host configuration

Dn435689.k4w_webapps_config1(en-us,IEB.10).png

The following XML demonstrates how to configure the sample for this scenario. In this configuration, the AccessControlAllowedOrigins setting is not needed because the web content and the Kinect streams are on the same server.

<applicationSettings>
  <Microsoft.Samples.Kinect.WebserverBasics.Properties.Settings>
    <setting name="OriginUri" serializeAs="String">
      <value>http://localhost:8181</value>
    </setting>
    <setting name="FileRootDirectory" serializeAs="String">
      <value>Content\Web</value>
    </setting>
    <setting name="AccessControlAllowedOrigins" serializeAs="String">
      <value/>
    </setting>
  </Microsoft.Samples.Kinect.WebserverBasics.Properties.Settings>
</applicationSettings>

Dedicated web server on the local computer

To use a dedicated content web server on the local computer, you must configure the content web server to use a different port than the Kinect web server.

Figure 2. Figure 2. Dedicated web server on the local computer

Dn435689.k4w_webapps_config2(en-us,IEB.10).png

The following XML demonstrates how to configure the sample for this scenario. In this configuration, the content web server path and port must be added to the AccessControlAllowedOrigins setting to enable communication between the servers. Also, the Kinect web server no longer needs to specify the root file path because it is not responsible for serving web content.

<applicationSettings>
  <Microsoft.Samples.Kinect.WebserverBasics.Properties.Settings>
    <setting name="OriginUri" serializeAs="String">
      <value>http://localhost:8181</value>
    </setting>
    <setting name="FileRootDirectory" serializeAs="String">
      <value/>
    </setting>
    <setting name="AccessControlAllowedOrigins" serializeAs="String">
      <value>http://localhost:80</value>
    </setting>
  </Microsoft.Samples.Kinect.WebserverBasics.Properties.Settings>
</applicationSettings>

Dedicated web server over the network

To use a dedicated content web server over the network, add the URI of the content web server to the list of cross-origin resource hosts.

Figure 3. Figure 3. Dedicated web server over the network

Dn435689.k4w_webapps_config3(en-us,IEB.10).png

<applicationSettings>
  <Microsoft.Samples.Kinect.WebserverBasics.Properties.Settings>
    <setting name="OriginUri" serializeAs="String">
      <value>http://localhost:8181</value>
    </setting>
    <setting name="FileRootDirectory" serializeAs="String">
      <value/>
    </setting>
    <setting name="AccessControlAllowedOrigins" serializeAs="String">
      <value>http://www.contoso.com:80</value>
    </setting>
  </Microsoft.Samples.Kinect.WebserverBasics.Properties.Settings>
</applicationSettings>

To run a sample you must have the Kinect for Windows SDK installed. To compile a sample, you must have the developer toolkit installed. The latest SDK and developer toolkit are available on the developer download page. If you need help installing the toolkit, look on this page: To Install the SDK and Toolkit. The toolkit includes a sample browser, which you can use to launch a sample or download it to your machine. To open the sample browser, click Start > All Programs > Kinect for Windows SDK [version number] > Developer Toolkit Browser.

If you need help loading a sample in Visual Studio or using Visual Studio to compile, run, or debug, see Opening, Building, and Running Samples in Visual Studio.

Share via