background preloader

Capturing Audio & Video in HTML5

Capturing Audio & Video in HTML5
Introduction Audio/Video capture has been the "Holy Grail" of web development for a long time. For many years we've had to rely on browser plugins (Flash or Silverlight) to get the job done. Come on! HTML5 to the rescue. This tutorial introduces a new API, navigator.getUserMedia(), which allows web apps to access a user's camera and microphone. The road to getUserMedia() If you're not aware of its history, the way we arrived at the getUserMedia() API is an interesting tale. Several variants of "Media Capture APIs" have evolved over the past few years. I'll try to summarize what happened in 2011... Round 1: HTML Media Capture HTML Media Capture was the DAP's first go at standardizing media capture on the web. If you wanted to let users take a snapshot of themselves with the webcam, that's possible with capture=camera: Recording a video or audio is similar: Kinda nice right? Support: Android 3.0 browser - one of the first implementations. Round 2: device element Take a breath. Round 3: WebRTC OK. Related:  Webdoc/Video/html5 (video et code)

Cacophony - An interactive video player in HTML5 and Javascript. TypeScript: JavaScript Development at Application Scale - Somasegar's blog In addition to supporting industry-standard programming languages, such as C++, Python, and JavaScript, Microsoft has always been at the forefront of creating great programming languages – Visual Basic, C#, and F# being the most recent examples. We create programming languages to solve problems and to enable a broad set of people to build software. Today, we’re introducing a new programming language that solves a very specific problem – getting JavaScript development to scale. During the past five years, JavaScript speed has doubled every nine months (as measured by the WebKit SunSpider JavaScript benchmark.) Here’s a good overview of and introduction to TypeScript by Anders Hejlsberg: Application-Scale JavaScript JavaScript was originally designed to be a client-side scripting language for web pages, and for many years it was limited to event handlers that scripted a Document Object Model (DOM). Enter TypeScript. TypeScript Starts and Ends with JavaScript Class Declarations and Modularity

20+ Demos Showing Advanced jQuery Effects Just a short while ago, Flash was one of the primary technologies used by web designers to add interactivity to a website. Since the introduction of the iPad, with its lack of the Flash Player, there’s an acceleration in the web development world to use alternative technologies to Flash, such as jQuery, Ajax and others. Although Flash is still a very powerful and useful tool, which works great on many cases, several of the effects that web designers are accustomed to creating in Flash, can be just as easily implemented using jQuery. Here are 21 online demos that show the power of jQuery for creating advanced effects and interactivity that can rival Flash. 1. This demo mimics the popular card flip technique which can rotate an element 360 degrees around its own x or y-axis. 2. jQuery Quicksand plugin This is a great plugin for sorting an array of elements/icons on a page with nice fade-in/fade-out and animation effects. 3. 4. 5. 6. 7. jQuery Circulate 8. 9. 10. 11. 12. 13. 14. 15. 16. 19. 20.

HTML5 Video Introduction In modern browsers, adding a video to your page is as easy as adding an image. No longer do you need to deal with special plug-ins or require crazy markup, you can do it with a single element. The Markup Let's jump in with a really simple example: That's all you need to embed a simple video on your page and show the basic controls so that a user can play, pause or otherwise control the video. Specifying Sources You can specify multiple source files by using the <source> element. When the browser parses the <source> tag, it uses the optional type attribute to help decide which file to download and play. It's also a good idea to make sure that your videos are being served with the right MIME type. Media Fragments Adding a media fragment to the media URL, you can specify the exact portion you want to play. You can also specify the times in hours:minutes:seconds, such as #t=00:01:05 to start the video at one minute, five seconds in. Providing captions and subtitles Attributes Styling

Le Programmeur Moderne - Le JavaScript moderne Ces dernières années, l'utilisation de JavaScript a évolué jusqu'à en faire un incontournable du web. L'écrasante majorité des navigateurs supportent JavaScript, que ce soit pour les ordinateurs de bureau ou les téléphones portables. Les navigateurs web optimisent continuellement leurs moteurs JavaScript et les développeurs en profitent pour apporter des applications entières sur le web. Le succès de JavaScript est tel qu'il s'étend désormais à d'autres usages : Node.js, CouchDB ou encore Meteor utilisent JavaScript pour créer des sites web, mais cette fois aussi du côté serveur ! Paradoxalement, la réputation de JavaScript a longtemps été mauvaise, et on n'imagine pas forcément au premier abord toutes les possibilités aujourd'hui offertes par JavaScript. L'utilisation principale de JavaScript reste aujourd'hui l'aide à la navigation sur un site web. L'histoire mouvementée de JavaScript La préhistoire C'est en 1995 qu'a eu lieu sur le web le début de la guerre des navigateurs.

Cinéma Le Méliès Le nom de Montreuil est fortement associé au septième art : le pionnier Émile Reynaud, les studios Albatros, les frères Pathé et bien sûr Georges Méliès, l’inventeur des effets spéciaux. La Ville lui consacre un équipement dédié au cinéma. Le cinéma Georges-Méliès est classé « art et essai » et doté des labels « recherche et découverte », « jeune public » et « répertoire et patrimoine ». Il réalise actuellement près de 200 000 entrées par an, prouvant que l’on peut être à la fois une salle exigeante, dynamique et accessible au public familial. Il est également reconnu comme l’un des cinémas les plus actifs de France en organisant de nombreux débats en présence de réalisateurs ou de comédiens invités. Parmi ceux accueillis figurent Manuel de Oliveira, Hong Sang-Soo, Emmanuel Bourdieu, Peter Bogdanovich, Jacques Audiard, Laurent Cantet, Benoît Jacquot, Vincent Lindon, Salomé Stévenin, René Ferret, Jacques Doillon, Todd Solondz, Nuri Bilge Ceylan, Milos Forman, Fanny Ardant…

HTML5 – ce qu’il faut savoir sur la balise VIDEO - Stanislas Quastana's blog on TechNet HTML5, aujourd’hui tout le monde en parle et si on se concentre sur la partie langage de balise (c’est à dire à dire tout sauf CSS3, SVG, WebGL, WebSocket…), certaines nouveautés ont le vent en poupe, notamment la balise vidéo et la balise audio. Quand on parle de son / musique joués dans un navigateur Web, on se rappelle tout d’abord les formats ou lecteurs d’un passé pas si éloigné (Quicktime, Real Player, voire Windows Media). Mais aujourd’hui, la mode est plus au lecteur nécessitant un plug-in tel que Adobe Flash ou encore Microsoft Silverlight. Avec l’arrivée progressive d’HTML5 et sa balise vidéo, certaines choses pourraient bien changer ou pas L’objectif de ce billet est de résumer ce qu’il faut savoir sur la balise vidéo d’HTML5 Pour insérer une vidéo dans une page HTML5, il suffit d’utiliser la balise suivante : Plutôt simple ? A cela, il est possible d’ajouter différentes options pour obtenir quelques fonctionnalités supplémentaires, par exemple: Côté Apple iOS :

jQuery Lightbox Evolution Lightbox Evolution is a tool for displaying images, html content, maps, and videos in a “lightbox” style that floats overtop of web page. Using Lightbox Evolution, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page. Screenshots Testimonials Themes iPad Compatible Technical Support If you have any questions, please contact me from my profile page here. Changelog 1.8.0 (Aug 17 2013) * jQuery 2.0 compatible * JW Player 6 compatible 1.7.3 (Feb 24 2013) * Fixed multiple galleries bug. * Added youku.com video server. * Fixed '__flash__removeCallback' is undefined error in all versions of IE. 1.7.2 (Feb 21 2013) * Fixed data-options bug with malformed JSON. 1.7.1 (Feb 17 2013) * Now you can change the duration of the transition "loading". 1.7.0 (Jan 25 2013) * Added retina support to default theme. * Added retina support to evolution theme. * Added retina support to carbono theme. * Changed default animation.

jRecorder – jQuery plugin for audio recording | Programming Ideas, Logics, Tips and Tricks Recently I made a jQuery plugin named jRecorder to record voice in html pages. This plugin is very easy to integrate with your web page and you DON’T need a flash server or RED5 server to do the recording What all you need is a Web Server (PHP or any server scripting language). You can find the documentation and Download the plugin HERE. eg: $.jRecorder( settings ); Another advantage is your can decide your recorder design, buttons , mic activity level , recording progress etc in HTML+CSS and this plugin gives you many recording callback events to manage. This plugin sends recorded WAV file to your webserver, where you can save this file where ever you wish. The technology used here is, the plugin uses hidden swf file to record the voice and save the binary data in browser’s cache and when the recording finishes, it sends the data to webserver. The plugin is good for recording voice less than 180 seconds (3 min), else the time to upload the final data to server takes longer. Thanks Sajith

timesheets.js The goal of this project is to rely on declarative W3C standards (namely, SMIL Timing and SMIL Timesheets) to synchronize HTML content. These demos rely purely on our Timesheet Scheduler: 100% declarative and standard-based, no specific JavaScript code is used. Ever wanted to… create your own slideshow in HTML? synchronize HTML content with multimedia streams? …without writing any single line of JavaScript? It’s possible. It’s based on declarative W3C standards. It works with HTML, SVG and XML. Discover SMIL Timesheets with the following demos! Basic Markup a simple “Rotating Banner” example to introduce the basic concepts of SMIL time containers Media Annotations synchronizing HTML content with a multimedia stream: rich subtitles, audio annotations, segmented timeline Slideshow Engine nesting time containers and relying on declarative user interaction to create a highly flexible slideshow engine We’re focusing on two developments: Both developments are free and open-source software. HTML Markup

ECMAScript 5 Strict Mode, JSON, and More Previously I analyzed ECMAScript 5’s Object and Property system. This is a huge new aspect of the language and deserved its special consideration. There are a number of other new features and APIs that need attention, as well. Strict Mode Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a “strict” operating context. Since ECMAScript 5 is backwards-compatible with ECMAScript 3, all of the “features” that were in ECMAScript 3 that were “deprecated” are just disabled (or throw errors) in strict mode, instead. Strict mode helps out in a couple ways: It catches some common coding bloopers, throwing exceptions.It prevents, or throws errors, when relatively “unsafe” actions are taken (such as gaining access to the global object).It disables features that are confusing or poorly thought out. Most of the information about strict mode can be found in the ES5 specification [PDF] on page #235. How do you enable strict mode? Simple. // Non-strict code...

WAMI Toolkit How To: Create a Playlist for HTML5 Audio Update: New article! - How To: Create a Dynamic Playlist for HTML5 Audio (Advanced) Just a few years ago, if you wanted to add audio or video to your webpage, it wasn't as simple and easy as it is now using HTML5 and a modern browser. Lucky for us those days are long gone. You may already be familiar with the HTML5 ‘<audio>’ tag and how to use it to add an audio file to your webpage. <audio controls="controls"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> Your browser does not support the audio tag. And here is the above code in action: That's great if you only have or want one song to play on your webpage, but what if you have a list of songs that you want to put on your page? Check out the HTML5 Audio Playlist example here. The Code Let's jump right in and get started with the code. Here is a brief explanation of the html code above: Line 1: Starts the div wrapper for our audio controls and the playlist. Line 1: Add the jQuery library. With “!! !

10 Impressive JavaScript Animation Frameworks Complex and slick JavaScript-based animation has been made easier with the emergence of frameworks and libraries that give developers the ability to create stunning and eye-grabbing animation and transition effects that make it easy these complex tasks. In this article, you will read about the top 10 JavaScript-based animation frameworks and libraries that will enable you to create engaging and captivating user experiences. 1. $fx $fx is a compact and lightweight JavaScript animation library which extends native JavaScript DOM methods with its own animation methods and functions. 2. jsAnim Created by web developer Kevin Dolan, jsAnim is a JavaScript animation framework for creating high-impact and slick animation sequences for web interfaces. 3. scripty2 scripty2 is a flexible and lightweight JavaScript animation framework for developing delicious visual effects. 5. Glimmer is a framework for easily creating interactive elements on your web pages. 6. 7. 8. 9. 10. Related content

Related: