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> 156
