ppapi/examples/enumerate_devices/enumerate_devices.html

<!DOCTYPE html>
<html>
  <!--
  Copyright (c) 2012 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>Enumerate Devices Example</title>
  <script type="text/javascript">
    var device_array = [];
    var enumerating = false;

    function HandleMessage(message_event) {
      if (message_event.data) {
        var status = document.getElementById('status');
        if (message_event.data == 'EnumerationFailed') {
          status.innerText = 'Device enumeration failed!';
        } else {
          devices_data =
              message_event.data.substring('EnumerationSuccess'.length);
          if (devices_data.length > 0)
            device_array = devices_data.split('#__#');
          else
            device_array = [];

          var list = document.getElementById('device_list');
          if (device_array.length == 0)
            list.innerHTML = 'No devices.';
          for (var i = 0; i < device_array.length; ++i) {
            var list_item = document.createElement('li');
            var span = document.createElement('span');
            span.innerText = device_array[i];
            list_item.appendChild(span);
            list.appendChild(list_item);
          }
          status.innerText = 'Device enumeration success!';
        }
        enumerating = false;
      }
    }

    function EnumerateDevices(sync) {
      if (enumerating)
        return;
      enumerating = true;
      var status = document.getElementById('status');
      var plugin = document.getElementById('plugin');
      if (sync) {
        status.innerText = 'Enumerating devices sync...'
        plugin.postMessage('EnumerateDevicesSync');
      } else {
        status.innerText = 'Enumerating devices async...'
        plugin.postMessage('EnumerateDevicesAsync');
      }
    }
    
    function Initialize() {
      var plugin = document.getElementById('plugin');
      plugin.addEventListener('message', HandleMessage, false);
      EnumerateDevices(true);
    }

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

<body>
  <embed id="plugin" type="application/x-ppapi-example-enumerate-devices"
      width=0 height=0 />
  <div>
    Press a link to enumerate video devices:
    <ul>
      <li><a href="javascript:EnumerateDevices(true)">Enumerate devices sync</a>
          (only implemented for out-of-process)</li>
      <li><a href="javascript:EnumerateDevices(false)">Enumerate devices async</a></li>
    </ul>
  </div>
  <div id="available_devices">
    Available device(s):
    <ul id="device_list">No devices.</ul>
  </div>
  <div>
    Status: <span id="status"></span>
  </div>
</body>
</html>