ppapi/examples/video_capture/video_capture.html - chromium/src - Git at Google

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