ppapi/examples/audio_input/audio_input.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>Audio Input 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       while (list.firstChild)
  60         list.removeChild(list.firstChild);
  61
  62       for (var i = 0; i < storage.length; ++i) {
  63         AppendDevice(
  64             list, storage[i],
  65             'javascript:UseDesignatedDevice(' + is_monitor + ',' + i + ');');
  66       }
  67     }
  68
  69     function AppendDevice(list, text, href) {
  70       var list_item = document.createElement('li');
  71       var link = document.createElement('a');
  72       link.href = href;
  73       link.innerText = text;
  74       list_item.appendChild(link);
  75       list.appendChild(list_item);
  76     }
  77
  78     function UseDesignatedDevice(is_monitor, index) {
  79       if (is_monitor)
  80         UseDevice(monitor_device_array[index], 'Monitor:' + index);
  81       else
  82         UseDevice(enumerate_device_array[index], 'Enumerate:' + index);
  83     }
  84
  85     function UseDefaultDevice() {
  86       UseDevice('Default', 'UseDefault');
  87     }
  88
  89     function UseDevice(display_text, command) {
  90       var in_use_device = document.getElementById('in_use_device');
  91       in_use_device.innerText = display_text;
  92       var plugin = document.getElementById('plugin');
  93       plugin.postMessage(command);
  94     }
  95
  96     function Stop() {
  97       var plugin = document.getElementById('plugin');
  98       plugin.postMessage('Stop');
  99     }
 100
 101     function Start() {
 102       var plugin = document.getElementById('plugin');
 103       plugin.postMessage('Start');
 104     }
 105
 106     function Initialize() {
 107       var plugin = document.getElementById('plugin');
 108       plugin.addEventListener('message', HandleMessage, false)
 109       plugin.postMessage('PageInitialized');
 110     }
 111
 112     document.addEventListener('DOMContentLoaded', Initialize, false);
 113   </script>
 114 </head>
 115
 116 <body>
 117   <embed id="plugin" type="application/x-ppapi-example-audio-input"
 118       width="800" height="400"/>
 119   <div style="margin-bottom:10px">In-use device:
 120     <span id="in_use_device" style="font-weight:bold">None</span>
 121   </div>
 122   <div id="available_devices">
 123     Available device(s), choose one to open:
 124     <ul>
 125       <li><a href="javascript:UseDefaultDevice();">
 126           Default - use NULL device ref</a></li>
 127     </ul>
 128     <div>
 129       <ul>List retrieved by MonitorDeviceChange(), will change when
 130           pluging/unpluging devices: (Notifications received:
 131           <span style="font-weight:bold" id="notification_counter">0</span>
 132           )</ul>
 133       <ul id="monitor_list"/>
 134     </div>
 135     <div>
 136       <ul>List retrieved by EnumerateDevices(), never updated after the page is
 137           initialized:</ul>
 138       <ul id="enumerate_list"/>
 139     </div>
 140   </div>
 141   <div id="control_panel">
 142     <a href="javascript:Stop();">Stop</a>
 143     <a href="javascript:Start();">Start</a> (known issue: crbug.com/161058)
 144   </div>
 145   <div id="status"></div>
 146 </body>
 147 </html>