1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
<!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>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>
|
