Re: UI for enabling webcam use from untrusted content

Hi all,

I wrote some thoughts about Ian's UI ideas on a Google-internal mailing
list, and someone recommended that I send it to this list as well.  So, here
I am, and here's what I wrote:


Whatever UI we end up with, I'd like to strongly suggest that it have these
important properties:

A) It should be extensible to any device, including things we haven't
thought of.  This will allow the market to innovate and come up with new and
interesting devices without having to get support from us.  (Take "us" to
mean either w3c or browser vendors.)

B) It should support the case where the user has multiple webcams (or
whatever other device) connected.  Note that since this would be for power
users, the interface doesn't have to make this case easy and intuitive, but
it should be *possible*.

C) It should support "virtual" devices which are actually implemented by
other software (or web apps).  For example, I should be able to write a
piece of software which exposes a virtual web cam that just plays a movie
fed from a file, or a piece of software that merges two camera feeds into
one with the images side-by-side.  Again, this would be for power users, so
does not necessarily have to be easy, just possible.

Note that if the UI supports (B), then (C) should presumably be automatic.

Of the four UI designs suggested by Ian, #2 (the device drawer) supports the
above properties most naturally.

I'd also like to suggest a design #5 (sorry, no ASCII art):  The web page
could have a box which is a "socket" for a web cam (or whatever) device.  If
you click on (or maybe hover over) the socket, the browser will pop up a box
suggesting devices that could be connected to this socket, but advanced
users should also be able to drag and drop devices other than the suggested

The metaphor here is of hooking up devices physically.  If I want my iPod to
be able to play music to my head phones, I plug my headphones into the
iPod's audio output socket.  If I'd rather that it play to my stereo, I hook
that up instead.  Everyone understands how this works in the physical world.
 Can we extend this to virtual space as well?


Elsewhere in the thread, I wrote the following, which is also probably worth
reposting here:


A file-access <input> allows you to select a file to open.  Similarly, a
webcam <input> should allow you to select a web cam to connect to.  Not only
does this create the possibility of having multiple cameras, but I think it
forces the user to think about what is happening.  A dialog box that simply
says "OK to use web cam?" will probably get reflexive "yes" clicks, but one
saying "Choose a web cam to use: [list]" will, I think, force the user to
realize what they're doing.  And if they don't want to think about it,
they'll probably click "cancel", thus avoiding giving away capabilities they
didn't intend.

>  In terms of the additional "power features" below, at least some of these
strike me as browser config options.

I don't know about that.  A config option, done naively, would probably only
allow one camera to be used at a time.  What if I want to connect multiple
cameras at once?  Say, for example, that I have multiple video conference
participants at once site, each with a camera on them, and want to share one
computer and browser instance among them.

This is analogous to singletons in object-oriented design.  They seem
incredibly convenient until the moment that you decide that you need more
than one instance, and then all of the sudden the singleton is a huge road
block.  The same applies to "singleton" devices.  In OO design, it usually
is not as hard as you think to avoid using a singleton, and I think the same
is true of device interfaces.


-----Original Message-----
From: [mailto:] On Behalf Of Ian Hickson
Sent: Tuesday, December 08, 2009 09:40 AM
Subject: UI for enabling webcam use from untrusted content

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       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'

Received on Thursday, 10 December 2009 07:50:10 UTC