index.html

<%= header_begin %>

<%= segment_script %>

<title>Video metadata extraction - Algorithmia</title>
<link rel="canonical" href="https://demos.algorithmia.com/<%= slug %>">
<meta name="description" content="Video transformations and data extraction"/>
<meta name="robots" content="index,follow">

<!-- FB -->
<meta property="og:title" content="Video transformations and data extraction">
<meta property="og:url" content="https://demos.algorithmia.com/video-metadata/">
<meta property="og:description" content="Use machine learning to extract information from your videos">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta property="og:image" content="https://demos.algorithmia.com/video-metadata/public/images/fbshare.jpg">
<meta property="og:site_name" content="Algorithmia">

<!-- TWTR -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@algorithmia">
<meta name="twitter:title" content="Video transformations and data extraction">
<meta name="twitter:description" content="Use machine learning to extract information from your videos">
<meta name="twitter:image" content="https://demos.algorithmia.com/video-metadata/public/images/twshare.jpg">
<meta name="twitter:creator" content="@algorithmia">

<!-- OTHER -->
<meta itemprop="name" content="Video transformations and data extraction">
<meta itemprop="description" content="Use machine learning to extract information from your videos">

<!-- CSS -->
<link rel="stylesheet" href="<%= slug %>/public/css/font.knightlab.css">
<link title="timeline-styles" rel="stylesheet" href="<%= slug %>/public/css/timeline.css">

<%= header_end %>

<section class="purple-grad-background hero">
  <div class="container" id="content">
    <div class="row">
      <div class="col-md-7">
        <h1>Video Metadata</h1>
        <h4 class="light whitespace-md">Use machine learning to extract information from videos</h4>
      </div>
      <div class="col-sm-12 col-md-7">
        <div class="card">
          <h3>1. CHOOSE A VIDEO</h3>
          <div class="row whitespace sample-videos">
            <div class="col-xs-6 col-sm-3 sample-image">
              <a onclick="selectVideo('massage')"><img src="<%= slug %>/public/images/massage.png" alt="massage" id="video-thumb-massage" class="video-thumb"></a>
            </div>
            <div class="col-xs-6 col-sm-3 sample-image">
              <a onclick="selectVideo('india1643')"><img src="<%= slug %>/public/images/india1643.png" alt="india1643" id="video-thumb-india1643" class="video-thumb"></a>
            </div>
            <div class="col-xs-6 col-sm-3 sample-image">
              <a onclick="selectVideo('city730')"><img src="<%= slug %>/public/images/city730.png" alt="city730" id="video-thumb-city730" class="video-thumb"></a>
            </div>
            <!--<div class="col-xs-6 col-sm-3 sample-image">-->
              <!--<a onclick="selectVideo('india8698')"><img src="<%= slug %>/public/images/india8698.png" alt="india8698" id="video-thumb-india8698" class="video-thumb"></a>-->
            <!--</div>-->
            <div class="col-xs-6 col-sm-3 sample-image">
              <a onclick="selectVideo('dance4428')"><img src="<%= slug %>/public/images/dance4428.png" alt="dance4428" id="video-thumb-dance4428" class="video-thumb"></a>
            </div>
            <!--<div class="col-xs-6 col-sm-3 sample-image">-->
              <!--<a onclick="selectVideo('wiffle')"><img src="<%= slug %>/public/images/wiffle.png" alt="wiffle" id="video-thumb-wiffle" class="video-thumb"></a>-->
            <!--</div>-->
            <!--<div class="col-xs-6 col-sm-3 sample-image">-->
              <!--<a onclick="selectVideo('motorcycle')"><img src="<%= slug %>/public/images/motorcycle.png" alt="motorcycle" id="video-thumb-motorcycle" class="video-thumb"></a>-->
            <!--</div>-->
            <div class="col-xs-6 col-sm-3 sample-image">
              <a onclick="selectVideo('slapping64')"><img src="<%= slug %>/public/images/slapping64.png" alt="slapping64" id="video-thumb-slapping64" class="video-thumb"></a>
            </div>
            <!--<div class="col-xs-6 col-sm-3 sample-image">-->
              <!--<a onclick="selectVideo('training1194')"><img src="<%= slug %>/public/images/training1194.png" alt="training1194" id="video-thumb-training1194" class="video-thumb"></a>-->
            <!--</div>-->
            <div class="col-xs-6 col-sm-3 sample-image">
              <a onclick="selectVideo('woman87')"><img src="<%= slug %>/public/images/woman87.png" alt="woman87" id="video-thumb-woman87" class="video-thumb"></a>
            </div>
            <div class="col-xs-6 col-sm-3 sample-image">
              <a onclick="selectVideo('crowd6582')"><img src="<%= slug %>/public/images/crowd6582.png" alt="crowd6582" id="video-thumb-crowd6582" class="video-thumb"></a>
            </div>
            <div class="col-xs-6 col-sm-3 sample-image">
              <a onclick="selectVideo('busstation6094')"><img src="<%= slug %>/public/images/busstation6094.png" alt="busstation6094" id="video-thumb-busstation6094" class="video-thumb"></a>
            </div>
          </div>
          <h3>2. CHOOSE AN ALGORITHM</h3>
          <div class="whitespace-md radio-btns">
            <button name="selectedAlgorithm" class="btn btn-radio" id="button-nudity" onclick="selectAlgo('nudity')">Nudity</button>
            <button name="selectedAlgorithm" class="btn btn-radio" id="button-tagger" onclick="selectAlgo('tagger')">Tagger</button>
            <button name="selectedAlgorithm" class="btn btn-radio" id="button-cars" onclick="selectAlgo('cars')">Cars</button>
            <button name="selectedAlgorithm" class="btn btn-radio" id="button-deepfashion" onclick="selectAlgo('deepfashion')">Fashion</button>
            <button name="selectedAlgorithm" class="btn btn-radio" id="button-places" onclick="selectAlgo('places')">Places</button>
            <!--<button name="selectedAlgorithm" class="btn btn-radio" id="button-realestate" onclick="selectAlgo('realestate')">Real Estate</button>-->
            <button name="selectedAlgorithm" class="btn btn-radio" id="button-emotion" onclick="selectAlgo('emotion')">Emotion</button>
            <button name="selectedAlgorithm" class="btn btn-radio" id="button-faces" onclick="selectAlgo('faces')">Faces</button>
          </div>
          <form class="form-group" onsubmit="analyze(); return false">
            <button class="btn btn-primary">
                <span>
                  <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
                  <span id="analyze-button-text">Extract Metadata & Build Timeline</span>
                </span>
            </button>
          </form>
          <div id="status-label"></div>
        </div>
      </div>
    </div>
  </div>
  <span class="image-credit">Image by <a target="_blank" href="https://smartphotocourses.com/">Smart Online Learning</a></span>
</section>

<div id="overlay" class="container hidden">
  <div class="dots-text-container">
    <h3 class="dots-text">Boom...</h3>
  </div>
  <div class="dots-container">
      <div class="dot dot1"></div>
      <div class="dot dot2"></div>
      <div class="dot dot3"></div>
      <div class="dot dot4"></div>
  </div>
</div>

<section class="container hidden results" id="results-algo">
  <div class="row">
    <h4 class="result-title col-sm-12"></h4>
    <div class="result-wrapper">
      <video class="result-input col-sm-6" controls></video>
      <textarea class="result-output col-sm-6"></textarea>
      <div class="result-timestamp"></div> <div class="result-toggle"><input type="checkbox" class="fullresults"> show full JSON</div>
    </div>
  </div>
</section>

<section class="container hidden results" id="results-sequence">
  <div class="row">
    <h4 class="result-title col-sm-12">Timeline</h4>
    <div class="result-output col-sm-12"><div id="timeline-embed"></div></div>
    <div class="result-output col-sm-12" id="timeline-html"></div>
  </div>
</section>

<!-- EXPLANATION -->
<div class="grey-background">
<section class="container">
  <div class="row row-md">
    <div class="col-md-12">
      <h2 class="whitespace-none">How it works</h2>
      <h4>Applying machine learning algorithms to extract information from videos</h4>
    </div>
  </div>
  <div class="row row-md">
    <div class="col-md-8">
      <h3>Tools used</h3>
      <ul>
        <li><a href="https://algorithmia.com/algorithms/media/VideoMetadataExtraction">VideoMetadataExtraction</a> – extract information from a video via image processing algorithms</li>
        <li><a href="https://algorithmia.com/algorithms/sfw/NudityDetectioni2v">NudityDetectioni2v</a> – detect nudity in images</li>
        <li><a href="https://algorithmia.com/algorithms/deeplearning/InceptionNet">InceptionNet</a> – extract features from images and generate tags</li>
        <li><a href="https://algorithmia.com/algorithms/LgoBE/CarMakeandModelRecognition">CarMakeandModelRecognition</a> – identify the make and model of cars</li>
        <li><a href="https://algorithmia.com/algorithms/algorithmiahq/DeepFashion">DeepFashion</a> – list clothing articles with bounding boxes</li>
        <li><a href="https://algorithmia.com/algorithms/deeplearning/Places365Classifier">Places365Classifier</a> – identify types of places</li>
        <li><a href="https://algorithmia.com/algorithms/deeplearning/RealEstateClassifier">RealEstateClassifier</a> – recognize categories of real estate</li>
        <li><a href="https://algorithmia.com/algorithms/deeplearning/EmotionRecognitionCNNMBP">EmotionRecognitionCNNMBP</a> – detect emotions in images</li>
        <li><a href="https://algorithmia.com/algorithms/dlib/faceDetection">FaceDetection </a> – Locate Faces</li>
      </ul>
    </div>
  </div>
  <div class="row row-md">
    <div class="col-md-8">
      <h3>Method</h3>
      <p>This algorithm extracts individual frames of the video, runs them through the specified image-processing algorithm, and combines the metadata results into a single JSON file with timepoints.</p>
    </div>
  </div>
  <div class="row row-md">
    <div class="col-md-8">
      <h3>Takeaway</h3>
      <p>You can now use our data-extraction algorithms on entire videos, not merely still images.  We take care of the complex machine-learning processes as well as splitting the video files, recombining the JSON output, and adding timepoints... all within a powerful cloud-based parallel pipeline, initiated by a single API call.</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      <h3>See also</h3>
      <p>If you're interested in transforming videos &mdash; for example, stylizing or automatically colorizing movies &mdash; try out the demo for VideoMetadataExtraction's sister algorithm <a href="../video-toolbox">VideoTransform</a></p>
    </div>
  </div>
</section>
</div>

<!-- BUILT FOR DEVS -->
  <section class="container">
    <div class="row">
      <div class="col-md-9">
        <h2 class="whitespace-sm">Built For Developers</h2>
        <h4 class="whitespace-md">A simple, scalable API for machine intelligence</h4>
          <p class="item-title">SAMPLE INPUT</p>
          <pre class="whitespace-md"><code class="python">import Algorithmia

client = Algorithmia.client('_API_KEY_')
algo = client.algo('media/VideoMetadataExtraction/0.5.0')
input = {
   "input_file":"data://media/videos/bus.mp4",
   "output_file":"data://media/videos/bus_tags.json",
   "algorithm":"algo://deeplearning/IllustrationTagger/0.2.5",
   "fps": 5
}
print algo.pipe(input)
</code></pre>
            <p class="item-title">SAMPLE OUTPUT</p>
            <pre><code class="json">{
    "output_file":"data://.algo/temp/bus_tags.json"
}</code></pre>
        <a href="https://algorithmia.com/algorithms/media/VideoMetadataExtraction" class="btn btn-primary-inverse">
          LEARN MORE
        </a>
      </div>
    </div>
  </section>

  <!-- JS -->
  <script src="<%= slug %>/public/js/TweenMax.min.js"></script>
  <script src="<%= slug %>/public/js/dots.js"></script>
  <script src="<%= slug %>/public/js/dropzone.js"></script>
  <script src="<%= slug %>/public/js/timeline-min.js"></script>

  <%= footer %>