ppapi/examples/video_encode/video_encode.html

<!DOCTYPE html>
<html>
  <!--
  Copyright 2015 The Chromium Authors. All rights reserved.
  Use of this source code is governed by a BSD-style license that can be
  found in the LICENSE file.
  -->
<head>
  <title>Video Encoder Example</title>
  <script type="text/javascript">
    var plugin;
    var track;
    var video;

    function $(id) {
      return document.getElementById(id);
    }

    function success(stream) {
      track = stream.getVideoTracks()[0];
      video.srcObject = stream;
      video.play();

      var list = $('profileList');
      var profile = (list.length < 1) ? 'vp8'
        : list.options[list.selectedIndex].value;

      plugin.postMessage({
        command: 'start',
        track: track,
        profile: profile,
        width: 640,
        height: 480
      });
    }

    function failure(e) {
      console.log("Error: ", e);
    }

    function startRecord() {
      $('length').innerHTML = ' Size: ' + dataArray.byteLength + ' bytes';
      navigator.webkitGetUserMedia({audio: false, video: true},
                                   success, failure);
    }

    function stopRecord() {
      plugin.postMessage({
        command: "stop"
      });
      var video = $('video');
      video.pause();
      track.stop();
    }

    function saveBlob(blob) {
      var blobUrl = URL.createObjectURL(blob);
      window.location = blobUrl;
    }

    function handleMessage(msg) {
      if (msg.data.name == 'data') {
        appendData(msg.data.data);
      } else if (msg.data.name == 'supportedProfiles') {
        console.log('profiles: ', msg.data);
        var profileList = $('profileList');
        for (var i = 0; i < msg.data.profiles.length; i++) {
          var item = document.createElement('option');
          item.label = item.value = msg.data.profiles[i];
          profileList.appendChild(item);
        }
      } else if (msg.data.name == 'log') {
        console.log(msg.data.message);
      }
    }

    function resetData() {
      window.dataArray = new ArrayBuffer(0);
    }

    function appendData(data) {
      var tmp = new Uint8Array(dataArray.byteLength + data.byteLength);
      tmp.set(new Uint8Array(dataArray), 0 );
      tmp.set(new Uint8Array(data), dataArray.byteLength);
      dataArray = tmp.buffer;
      $('length').textContent = ' Size: ' + dataArray.byteLength + ' bytes';
    }

    function initialize() {
      plugin = $('plugin');
      plugin.addEventListener('message', handleMessage, false);

      video = $('video');

      $('start').addEventListener('click', function (e) {
        resetData();
        startRecord();
      });
      $('stop').addEventListener('click', function (e) {
        stopRecord();
      });
      $('download').addEventListener('click', function (e) {
        saveBlob(new Blob([dataArray], { type: "application/octet-stream" }));
      });
    }

    document.addEventListener('DOMContentLoaded', initialize, false);
  </script>
</head>

<body>
  <h1>Video Encoder API Example</h1><br>
  This example demonstrates receiving frames from a video MediaStreamTrack and
  encoding them in a plugin.
  <br>
  <select id="profileList"></select>
  <input type="button" id="start" value="Start Recording"/>
  <input type="button" id="stop" value="Stop Recording"/>
  <input type="button" id="download" value="Download Recording"/>
  <div id="length"></div>
  <br>
  <div>
    <embed id="plugin" type="application/x-ppapi-example-video-encode"/>
    <video id="video" width="640" height="480"/>
  </div>
</body>
</html>