- From: Ian Hickson <ian@hixie.ch>
- Date: Tue, 8 Dec 2009 17:39:35 +0000 (UTC)
- To: public-device-apis@w3.org
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 UTC