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