HTML5 video progresses with Real Time Communications ...

Takeaway: Ryan Boudreaux shares the latest developments with the HTML 5 video element and offers some live demos you can view to see it in action.

As the HTML5 specification progresses we are starting to observe more advances in adoption rates among browsers and user agents for several of the elements. In particular, the HTML5 Video <video> element has gained some implementation ground recently with the introduction of Chrome 23 Beta, as the browser now incorporates several technologies that leverage nascent communication standards.

The Chromium Blog announced on October 2^nd that beta versions of the browser now support Peer Connection API, which allows web developers to create web applications that incorporate real-time audio and video communications without the need for a plug-in. Along with the getUserMedia API Chrome now allows web apps to access your camera and microphone without plug-ins. This is the first step toward the Real-Time Communications (RTC) capability, a project of WebRTC, whose mission is to enable rich, high quality, RTC applications to be developed in the browser via simple JavaScript APIs and HTML5. While some of the API?s are still in a flux state, the project is making steps toward improving quality and accessibility.

The move toward a world where you can connect your telephone, television, and computer onto a single platform with a web application is taking hold with the WebRTC implementation. Google Developers offer a great introduction of WebRTC with a presentation including webcam access, p2p, and rich audio/video communication capabilities in the browser. In this demo which was presented at the Google I/O sessions in July, they give an overview of the WebRTC technologies available today, show how to build WebRTC apps, and discuss the potential this technology adds to the Web Platform.

The Chrome browser update also includes support for the HTML5 Track <track> element which allows web developers to specify external timed tracks for media elements. Attributes of the track element include adding subtitles, captions, descriptions, chapters, and metadata to media. The track attributes open up great possibilities for media accessibility, allows content within a video to be organized, and allows for enhanced user experience interactions with media on the web.

The code

Let?s take a look at some of the code that permits the HTML5 Video element the ability to leverage media towards the next level. The tutorial Capturing Audio & Video in HTML5 by HTML5 Rocks shows you how to implement the getUserMedia API with navigator.getUserMedia() and getUserMedia(), which allows the browser to access input devices for audio and video.

The tutorial explains how feature detection is now a function of checking for navigator.getUserMedia(). An example code snippet is displayed below:

function hasGetUserMedia() {

? return !!(navigator.getUserMedia;

}

if (hasGetUserMedia()) {

} else {

? alert('getUserMedia() function is not supported in your browser');

}

The feature detection function checks to see if the user has the media feature and if so then it is good to go, if not then the user is alerted that the get user media function is not supported. To gain access to the media device you have to ask permission first, and to do this you have to pass the parameter for each device, such as {video: true} for only a webcam, or {video: true, audio: true} for both the webcam and a microphone.

For cross-browser support with navigator.getUserMedia() you can add in vendor prefixes such as the example below:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

Live demos

Several live demonstration sites are up and functioning so that you can test drive or review the functionality of RTC. Below are three such examples of RTC implementations including a map tracking application, a webcam ?toy? that uses the getUserMedia API and WebGL to capture video feeds, and a ?photo booth? that captures video and renders photos with CSS filters in real time.

Map Track Demo - By Sam Dutton, shows how the track element can be used to synchronize video playback with the position of a map marker, and make synchronized changes to DOM elements.

Figure B

Webcam Toy - By Neave Interactive is a web app made by Paul Neave and uses the WebRTC getUserMedia API for HTML5 camera access, in addition to WebGL fragment shading (GLSL) to apply real-time special effects to the camera video feed.

Figure C

CSS Filters Photobooth - By HTML5 Demos is an example of the navigator.getUserMedia() API for capturing audio and video, sans plugin. This demo also shows the video being rendered to while CSS filters are applied in real time.

Figure D

Where is HTML5 video going?

While the HTML5 video element and its features are gaining faster browser adoption with Google, other user agents are starting to catch up as well. The ?Can I use?? compatibility table for HTML5 video support shows that the feature has a 79.49% overall support with partial support for certain sub-features at 0.6%, and total support at 80.09%. The ?Can I use?? findings are based on five resources listed in the table including the W3C Specification, a detailed article from the dev.opera.com group, the WebM Project, Video for Everybody!, and Dive Into HTML5 Video.

While the RTC feature at this time runs only in Chrome 23 Beta, the following browsers and versions do support the fundamental HTML5 video element features:

• IE 9.0+
• Firefox 14.0+
• Chrome 21+
• Safari 5.1+
• Opera 12.0+
• iOS Safari 3.2+
• Android Browser 2.3+
• Blackberry Browser 7.0+

The following browsers support the HTML5 video element sub-feature for the WebM/VP8 video format:

• Firefox 14.0+
• Chrome 21+
• Opera 12.0+
• Android Browser 2.3+

The following browsers support the HTML5 video element sub-feature for the MPEG-4/H.264 video format:

• IE 9.0+
• Chrome 21+
• Safari 5.1+
• iOS Safari 3.2+
• Blackberry Browser 7.0+

The following browsers support the HTML5 video element sub-feature for the Ogg/Theora video format:

• Firefox 14.0+
• Chrome 21+
• Opera 12.0+

Source: http://www.techrepublic.com/blog/webmaster/html5-video-progresses-with-real-time-communications/2007

espn3 kevin youkilis Tropical Storm Debby fox news legend of korra lebron james magic mike trailer