ppapi/examples/video_capture/video_capture.html

   1 <!DOCTYPE html>
   2 <html>
   3   <!--
   4   Copyright (c) 2012 The Chromium Authors. All rights reserved.
   5   Use of this source code is governed by a BSD-style license that can be
   6   found in the LICENSE file.
   7   -->
   8 <head>
   9   <title>Video Capture Example</title>
  10   <script type="text/javascript">
  11     var monitor_device_array = [];
  12     var enumerate_device_array = [];
  13     var monitor_notification_count = 0;
  14
  15     function HandleMessage(message_event) {
  16       if (message_event.data) {
  17         var status = document.getElementById('status');
  18         if (message_event.data == 'EnumerationFailed') {
  19           status.innerText = 'Device enumeration failed!';
  20         } else if (message_event.data == 'MonitorDeviceChangeFailed') {
  21           status.innerText = 'Monitor device change failed!';
  22         } else if (message_event.data == 'OpenFailed') {
  23           status.innerText = 'Open device failed!';
  24         } else if (message_event.data == 'StartFailed') {
  25           status.innerText = 'Start capturing failed!';
  26         } else if (message_event.data == 'StopFailed') {
  27           status.innerText = 'Stop capturing failed!';
  28         } else {
  29           AddDevices(message_event.data);
  30         }
  31       }
  32     }
  33
  34     function AddDevices(command) {
  35       var serialized_names = '';
  36       var is_monitor = false;
  37       if (command.search('Monitor:') == 0) {
  38         serialized_names = command.substr(8);
  39         is_monitor = true;
  40         monitor_notification_count++;
  41         var counter = document.getElementById('notification_counter');
  42         counter.innerText = monitor_notification_count;
  43       } else if (command.search('Enumerate:') == 0) {
  44         serialized_names = command.substr(10);
  45       } else {
  46         status.innerText = 'Unrecognized command!';
  47         return;
  48       }
  49
  50       var storage = serialized_names.length != 0 ?
  51                     serialized_names.split('#__#') : [];
  52       if (is_monitor)
  53         monitor_device_array = storage;
  54       else
  55         enumerate_device_array = storage;
  56
  57       var list = document.getElementById(
  58           is_monitor ? 'monitor_list' : 'enumerate_list');
  59       if (list) {
  60         while (list.firstChild)
  61           list.removeChild(list.firstChild);
  62
  63         for (var i = 0; i < storage.length; ++i) {
  64           AppendDevice(
  65               list, storage[i],
  66               'javascript:UseDesignatedDevice(' + is_monitor + ',' + i + ');');
  67         }
  68       }
  69     }
  70
  71     function AppendDevice(list, text, href) {
  72       var list_item = document.createElement('li');
  73       var link = document.createElement('a');
  74       link.href = href;
  75       link.innerText = text;
  76       list_item.appendChild(link);
  77       list.appendChild(list_item);
  78     }
  79
  80     function UseDesignatedDevice(is_monitor, index) {
  81       if (is_monitor)
  82         UseDevice(monitor_device_array[index], 'Monitor:' + index);
  83       else
  84         UseDevice(enumerate_device_array[index], 'Enumerate:' + index);
  85     }
  86
  87     function UseDefaultDevice() {
  88       UseDevice('Default', 'UseDefault');
  89     }
  90
  91     function UseDevice(display_text, command) {
  92       var in_use_device = document.getElementById('in_use_device');
  93       in_use_device.innerText = display_text;
  94       var plugin = document.getElementById('plugin');
  95       plugin.postMessage(command);
  96
  97       var available_devices = document.getElementById('available_devices');
  98       available_devices.parentNode.removeChild(available_devices);
  99
 100       var control_panel = document.getElementById('control_panel');
 101       control_panel.style.display = '';
 102     }
 103
 104     function Stop() {
 105       var plugin = document.getElementById('plugin');
 106       plugin.postMessage('Stop');
 107     }
 108
 109     function Start() {
 110       var plugin = document.getElementById('plugin');
 111       plugin.postMessage('Start');
 112     }
 113
 114     function Initialize() {
 115       var plugin = document.getElementById('plugin');
 116       plugin.addEventListener('message', HandleMessage, false);
 117       plugin.postMessage('PageInitialized');
 118     }
 119
 120     document.addEventListener('DOMContentLoaded', Initialize, false);
 121   </script>
 122 </head>
 123
 124 <body>
 125   <embed id="plugin" type="application/x-ppapi-example-video-capture"
 126       width="320" height="240"/>
 127   <div style="margin-bottom:10px">In-use device:
 128     <span id="in_use_device" style="font-weight:bold">None</span>
 129   </div>
 130   <div id="available_devices">
 131     Available device(s), choose one to open:
 132     <ul>
 133       <li><a href="javascript:UseDefaultDevice();">
 134           Default - use NULL device ref</a></li>
 135     </ul>
 136     <div>
 137       <ul>List retrieved by MonitorDeviceChange(), will change when
 138           pluging/unpluging devices: (Notifications received:
 139           <span style="font-weight:bold" id="notification_counter">0</span>
 140           )</ul>
 141       <ul id="monitor_list"/>
 142     </div>
 143     <div>
 144       <ul>List retrieved by EnumerateDevices(), never updated after the page is
 145           initialized:</ul>
 146       <ul id="enumerate_list"/>
 147     </div>
 148   </div>
 149   <div id="control_panel" style="display:none">
 150     <a href="javascript:Stop();">Stop</a>
 151     <a href="javascript:Start();">Start</a>
 152   <div/>
 153   <div id="status"></div>
 154 </body>
 155 </html>