Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Opera Adds HTML5 Webcam Input: getUserMedia

DZone's Guide to

Opera Adds HTML5 Webcam Input: getUserMedia

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

The latest builds of Opera now support the 'getUserMedia' HTML5 API.  This allows you to set up an HTML5 <video> as the input for a webcam recording.  



Here's a simple code snippet showing how this works:

// Replace the source of the video element with the stream from the camera
  var video = document.getElementById('sourcevid');
  if (navigator.getUserMedia) {
      navigator.getUserMedia('video', successCallback, errorCallback);
      function successCallback(stream) {
          video.src = stream;
      }
      function errorCallback(error) {
          console.error('An error occurred: [CODE ' + error.code + ']');
          return;
      }
  } else {
      console.log('Native web camera streaming (getUserMedia) is not supported in this browser.');
      return;
  }

Source: http://labs.opera.com/news/2011/10/19/

The other major new feature in the new build is 'Native Pages', which is Opera's own implementation of a feature similar to Safari Reader where you can use CSS3 extensions to split pages of content into book-like pages with page turning arrows.  Check out the post for the full changelist.

 

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Mitch Pronschinske. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}