W3C home > Mailing lists > Public > public-device-apis@w3.org > December 2009

UI for enabling webcam use from untrusted content

From: Ian Hickson <ian@hixie.ch>
Date: Tue, 8 Dec 2009 17:39:35 +0000 (UTC)
To: public-device-apis@w3.org
Message-ID: <Pine.LNX.4.62.0912081708020.16061@hixie.dreamhostps.com>

I've been trying to come up with what the UI could look like for allowing 
untrusted content access to one's camera and other devices, for the 
purpose of streaming or direct access, as opposed to the simpler cases of 
getting a static picture or non-live video. For example, for the purpose 
of implementing a Web-based video conferencing system.

I haven't yet been able to find something that really works.

Here are the ideas I've looked at. For each example, I assume that there 
are two devices, a webcam and a mic, and that the site wants the user to 
enable the webcam. Key requirements are that the user actively pick the 
webcam, not just click through a prompt, and that the user be kept aware 
of the camera being enabled for as long as it is enabled.

1. Toolbar buttons.

   +-----------------------------------+
   | [] [] [_http://www.exa_] [] () () | <-- last two buttons are the 
   | +-------------------------------+ |     webcam and the mic
   | |                               | |
   | |  To start the video chat,     | |
   | |  activate your camera.        | |
   | |                               | |
   | +-------------------------------+ |
   +-----------------------------------+

   Cons: - Unintuitive.
         - Doesn't scale to multiple devices.
         - Cluttered.


2. Device Drawer

   +-----------------------------------+
   | [] [] [_http://www.example.c_] [] |-----------.
   | +-------------------------------+ | () Webcam | <-- User has to drag
   | |                               | | () Mic    |     and drop the icon
   | |  To start the video chat,     | |           |     into the content
   | |  activate your camera.        | |           |     area to activate
   | |                               | |           |     the device.
   | +-------------------------------+ |-----------'
   +-----------------------------------+

   Cons: - Even more unintuitive.
         - UI idiom is only established on Mac.
         - No indication of device use when drawer is closed.


3. On-screen indicator

   +-----------------------------------+
   | [] [] [_http://www.example.c_] [] |        +----------+
   | +-------------------------------+ |        | x Webcam |
   | |                               | |        |   Mic    |
   | |  To start the video chat,     | |        |          |
   | |  activate your camera.        | |        +----------+
   | |                          @  RRR EEE  CC
   | +------------------------ @@@ RR  EE  C
   +--------------------------- @  R R EEE  CC

   REC indicator first appears grayed out when the page requests a
   device. When the user clicks the indicator, a menu appears showing
   the available devices, and clicking one enables it, turning the REC 
   indicator red.

   Cons: - Unintuitive.


4. Infobars

   +-----------------------------------+
   | [] [] [_http://www.example.c_] [] |
   | +-------------------------------+ |
   | | Bla bla  (Enable Webcam) (No) | |
   | +-------------------------------+ |
   | | Bla bla     (Enable Mic) (No) | |
   | +-------------------------------+ |
   | |                               | |
   | |  To start the video chat,     | |
   | |  activate your camera.        | |
   | |                               | |
   | +-------------------------------+ |
   +-----------------------------------+

   Cons: - Doesn't scale to multiple devices.
         - Users will enable devices they didn't intend to, since they 
           likely won't read the prompts.
         - No on-screen indicator of active device use.


Anyone got any better ideas?

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'
Received on Tuesday, 8 December 2009 17:40:10 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 9 May 2012 00:14:02 GMT