video_capture.html | Explore in Territory

<!DOCTYPE html>
<html>
<!--
Copyright 2012 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<head>
  <title>Video Capture Example</title>
  <script type="text/javascript">
    var monitor_device_array = [];
    var enumerate_device_array = [];
    var monitor_notification_count = 0;

    function HandleMessage(message_event) {
      if (message_event.data) {
        var status = document.getElementById('status');
        if (message_event.data == 'EnumerationFailed') {
          status.innerText = 'Device enumeration failed!';
        } else if (message_event.data == 'MonitorDeviceChangeFailed') {
          status.innerText = 'Monitor device change failed!';
        } else if (message_event.data == 'OpenFailed') {
          status.innerText = 'Open device failed!';
        } else if (message_event.data == 'StartFailed') {
          status.innerText = 'Start capturing failed!';
        } else if (message_event.data == 'StopFailed') {
          status.innerText = 'Stop capturing failed!';
        } else {
          AddDevices(message_event.data);
        }
      }
    }

    function AddDevices(command) {
      var serialized_names = '';
      var is_monitor = false;
      if (command.search('Monitor:') == 0) {
        serialized_names = command.substr(8);
        is_monitor = true;
        monitor_notification_count++;
        var counter = document.getElementById('notification_counter');
        counter.innerText = monitor_notification_count;
      } else if (command.search('Enumerate:') == 0) {
        serialized_names = command.substr(10);
      } else {
        status.innerText = 'Unrecognized command!';
        return;
      }

      var storage = serialized_names.length != 0 ?
                    serialized_names.split('#__#') : [];
      if (is_monitor)
        monitor_device_array = storage;
      else
        enumerate_device_array = storage;

      var list = document.getElementById(
          is_monitor ? 'monitor_list' : 'enumerate_list');
      if (list) {
        while (list.firstChild)
          list.removeChild(list.firstChild);

        for (var i = 0; i < storage.length; ++i) {
          AppendDevice(
              list, storage[i],
              'javascript:UseDesignatedDevice(' + is_monitor + ',' + i + ');');
        }
      }
    }

    function AppendDevice(list, text, href) {
      var list_item = document.createElement('li');
      var link = document.createElement('a');
      link.href = href;
      link.innerText = text;
      list_item.appendChild(link);
      list.appendChild(list_item);
    }

    function UseDesignatedDevice(is_monitor, index) {
      if (is_monitor)
        UseDevice(monitor_device_array[index], 'Monitor:' + index);
      else
        UseDevice(enumerate_device_array[index], 'Enumerate:' + index);
    }

    function UseDefaultDevice() {
      UseDevice('Default', 'UseDefault');
    }

    function UseDevice(display_text, command) {
      var in_use_device = document.getElementById('in_use_device');
      in_use_device.innerText = display_text;
      var plugin = document.getElementById('plugin');
      plugin.postMessage(command);

      var available_devices = document.getElementById('available_devices');
      available_devices.parentNode.removeChild(available_devices);

      var control_panel = document.getElementById('control_panel');
      control_panel.style.display = '';
    }

    function Stop() {
      var plugin = document.getElementById('plugin');
      plugin.postMessage('Stop');
    }

    function Start() {
      var plugin = document.getElementById('plugin');
      plugin.postMessage('Start');
    }

    function Initialize() {
      var plugin = document.getElementById('plugin');
      plugin.addEventListener('message', HandleMessage, false);
      plugin.postMessage('PageInitialized');
    }

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

<body>
  <embed id="plugin" type="application/x-ppapi-example-video-capture"
      width="320" height="240"/>
  <div style="margin-bottom:10px">In-use device:
    <span id="in_use_device" style="font-weight:bold">None</span>
  </div>
  <div id="available_devices">
    Available device(s), choose one to open:
    <ul>
      <li><a href="javascript:UseDefaultDevice();">
          Default - use NULL device ref</a></li>
    </ul>
    <div>
      <ul>List retrieved by MonitorDeviceChange(), will change when
          pluging/unpluging devices: (Notifications received:
          <span style="font-weight:bold" id="notification_counter">0</span>
          )</ul>
      <ul id="monitor_list"/>
    </div>
    <div>
      <ul>List retrieved by EnumerateDevices(), never updated after the page is
          initialized:</ul>
      <ul id="enumerate_list"/>
    </div>
  </div>
  <div id="control_panel" style="display:none">
    <a href="javascript:Stop();">Stop</a>
    <a href="javascript:Start();">Start</a>
  <div/>
  <div id="status"></div>
</body>
</html>
chromium/ppapi/examples/video_capture/video_capture.html
