Quantcast
Viewing latest article 17
Browse Latest Browse All 20

Video Conferencing with the HTML5 Device Element

Image may be NSFW.
Clik here to view.

Did you know that work is being done to enable videoconferencing from HTML5 applications? Ian Hickson has been doing work on the element in a separate draft to make this possible.

The element will be used to allow the user to give permission to a page to use a device, such as a video camera. A type attribute can be used for the page to give more specificity on what kind of device they want access to. Right now this could be 'media' for access to an audio or visual device; 'fs' to access the file system, such as a USB connected media player; or 'rs232' or 'usb' to access devices connected in this manner.

Example usage:

HTML:
  1.  
  2. <p>To start chatting, select a video camera: <device type=media onchange="update(this.data)"></device></p>
  3. <video autoplay></video>
  4.  function update(stream) {
  5.    document.getElementsByTagName('video')[0].src = stream.url;
  6.  }
  7. </script>
  8.  

The spec includes a way to work with Stream objects for the data coming from the device and to record Streams. It also includes an API for working with peer-to-peer connections, such as sendBitmap() or sendFile() to send data between a peer connection. The entire standard is still being baked but here is what a P2P connection might look like in pseudo-code:

JAVASCRIPT:
  1.  
  2. var serverConfig = ...; // configuration string obtained from server
  3. // contains details such as the IP address of a server that can speak some
  4. // protocol to help the client determine its public IP address, route packets
  5. // if necessary, etc.
  6.  
  7. var local = new ConnectionPeer(serverConfig);
  8. local.getLocalConfiguration(function (configuration) {
  9.   if (configuration != '') {
  10.     ...; // send configuration to other peer using out-of-band mechanism
  11.   } else {
  12.     // we've exhausted our options; wait for connection
  13.   }
  14. });
  15.  
  16. function ... (configuration) {
  17.   // called whenever we get configuration information out-of-band
  18.   local.addRemoteConfiguration(configuration);
  19. }
  20.  
  21. local.onconnect = function (event) {
  22.   // we are connected!
  23.   local.sendText('Hello');
  24.   local.addStream(...); // send video
  25.   local.onstream = function (event) {
  26.     // receive video
  27.     // (videoElement is some <video> element)
  28.     if (local.remoteStreams.length> 0)
  29.       videoElement.src = local.remoteStreams[0].url;
  30.   };
  31. };
  32.  

[via Aditya Mani]


Viewing latest article 17
Browse Latest Browse All 20

Trending Articles