index.html

<style>
  body {
    font-family: 'Roboto', 'Noto', sans-serif;
    line-height: 1.5;
    background-color: #fbfbfb;
    margin: 20px;
  }

  #contents {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  #contents > div {
    padding: 16px;
    width: 25vw;
    min-width: 400px;
    height: auto;
  }

  img {
    width: 100%;
    height: auto;
    object-fit: scale-down;
  }
</style>

<h1>Web Depth Camera Capture demos</h1>

<div id="contents">
  <div>
    <img src="gesture/hands_interaction.gif">
    <br>
    <p>
      Moving boxes using hands demo shows live depth captured mesh interaction with scene objects; combining 3D world and depth captured hands (or other objects) rendering and Bullet Physics. <a href="https://01org.github.io/depth-camera-web-demo/gesture/index.html">Run the live demo here.</a>
    </p>
  </div>  
  <div>
    <img src="backgroundremoval.gif">
    <br>
    <p>
      Simple background removal implemented as flood-fill of background color to similarly colored pixels.
      Works only with simple backgrounds - e.g. room walls on the demo gif.
      <a href="https://01org.github.io/depth-camera-web-demo/depthdemo.html">Run the live demo here.</a>
    </p>
  </div>  
  <div>
    <img src="typing_in_the_air/typing_in_the_air.gif">
    <br>
    <p>
      Typing in the air tutorial shows how to use depth stream and WebGL transform feedback to do simple gesture recognition.
      Check the <a href="typing_in_the_air/doc/tutorial.html">tutorial text</a> and
      <a href="https://01org.github.io/depth-camera-web-demo/typing_in_the_air/front_capture_typing.html">run the live demo here.</a>
    </p>
  </div>
  <div>
    <img src="https://github.com/01org/depthcamera-pointcloud-web-demo/raw/master/recording.gif">
    <br>
    <p>
      3D point cloud rendering demo shows how to render and synchronize depth and color video on GPU.
      <a href="https://01org.github.io/depthcamera-pointcloud-web-demo/">Run the live demo here.</a>
    </p>
  </div>
  <div>
    <img src="how_the_demo_looks.gif">
    <br>
    <p>
      HTML5 Depth Capture tutorial shows how to access depth stream, check the
      <a href="https://01.org/chromium/blogs/astojilj/2017/depth-camera-capture-html5">tutorial text</a>
      or <a href="https://01org.github.io/depth-camera-web-demo/depthdemo.html">run the live demo here.</a>
    </p>
  </div>
</div>