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. It might not be apparent, but the rise of HTML5 has brought a surge of access to device hardware. 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: Take a breath.

http://www.html5rocks.com/en/tutorials/getusermedia/intro/?redirect_from_locale=fr

Related:  Webdoc/Video/html5 (video et code)

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: Media Capture and Streams 4. MediaStream API 4.1 Introduction The MediaStream interface is used to represent streams of media data, typically (but not necessarily) of audio and/or video content, e.g. from a local camera. The data from a MediaStream object does not necessarily have a canonical binary form; for example, it could just be "the video currently coming from the user's video camera".

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? (subtitles, transcriptions, annotations…) animate HTML elements? navigator.getUserMedia - WebRTC Prompts the user for permission to use a media device such as a camera or microphone. If the user provides permission, the successCallback is invoked on the calling application with a LocalMediaStream object as its argument. Syntax

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. For those who are not, here is a basic example: HTML5 Professor - FullScreen API Dans ce court tutoriel, je vais vous présenter une des toutes dernières fonctionnalités de l'HTML 5 : le mode fullscreen (plein écran). Celle-ci peut s'utiliser dans de nombreux cas, comme par exemple pour visionner une vidéo ou des diapos, mais on peux aussi passer n'importe quel élément de la page en plein écran (une iframe, une div, une image, etc...). Les navigateurs compatibles : comme d'habitude Firefox (9+) et Google Chrome (15+) Attention : Pour limiter les abus, on ne peut déclencher la mise en plein écran que lors d'un click ou d'une pression sur le clavier ( comme pour les fenêtres popUp). Sans plus attendre, voyons comment faire. Tout d'abord, il va nous falloir un élément que l'on veux passer en mode plein écran.

Audio Player, un lecteur audio HTML5 customisé avec jQuery Audio Player est un plugin jQuery qui permet de personnaliser le lecteur audio généré par la balise HTML5 audio. Ainsi, vous pouvez créer un lecteur totalement custom et cross-browser qui hérite parfaitement des capacités HTML5 natives comme le préchargement du fichier, la lecture automatique ou encore la boucle de lecture. HTML5… et une surcouche JS Le plugin Audio Player ajoute à l’élément audio (flux ou streaming audio) quelques lignes de code HTML, puis avec un peu de CSS3 (transition, box-shadow, gradient), il permet d’obtenir un lecteur flambant neuf et personnalisé, tout en gardant les mêmes fonctionnalités du lecteur HTML5 de base. Il n’existe aucun moyen direct pour styliser le lecteur, c’est pourquoi l’outil utilise une surcouche JS. Cependant, le DOM HTML5 possède des méthodes, des propriétés et des événements pour manipuler facilement le lecteur.

Player Audio JQuery, HTML5 et CSS3 avec Playlist Voici un player audio que je vous propose en téléchargement et qui vous permettra de faire découvrir aux visiteurs de votre site une sélection de vos morceaux préférés. Celui-ci intègre toutes les fonctionnalités de controle d'un player classique avec, en plus, la possibilité de switcher d'un morceau à l'autre. Démonstration Voir la demoTelecharger les fichiers sources Popcorn.js Documentation Popcorn.js is a JavaScript library that allows video, audio and other media to control and be controlled by arbitrary elements of a webpage. Combining open source web technologies, authors can let their media be the “conductor” of interactive and immersive experiences. While no prior HTML or JavaScript experience and knowledge is necessary — it is helpful and will make the process of creating your first Popcorn experience easier. To get started, you’ll first include the Popcorn.js script in a basic HTML file — you may use just the core or the fully loaded Popcorn.js (includes modules, effects, plugins, players, parsers, etc). Alternatively, you can create your own Popcorn.js script using build tool. Including the script is simple, take a look:

HowTo : organiser un Learning Lab Popcorn.js « Sur la route de la Geek Ceci est une traduction d'un article de Michelle Thorne, qui travaille chez Mozilla. Ce genre d'événement d'enseignement aurait une belle place dans le Mozilla Space dont je parlais plus tôt, d'où la traduction. Learning Lab Popcorn Un labo d'enseignement Popcorn (ou Learning Lab Popcorn) est un événement permettant aux développeurs et aux réalisateurs de films de se familiariser avec la technologie Popcorn.js, une bibliothèque HTML5 Javascript qui permet d'intégrer les technologies du Web dans la production de médias. Les participants peuvent créer de nouvelles extensions, bidouiller des modèles et coder des démonstrations qui mélangent des informations à des vidéos, en utilisant des outils ouverts et un design collaboratif.

Créer un plugin Popcorn.js Popcorn est une librairie javascript créée par la team Mozilla qui enrichit les contenus vidéos. La balise vidéo des spécifications html est très pratique mais il manque certaines foncitonnalitées, c’est pourquoi popcorn nous offre la possibilité d’avoir des média vidéo plus interactifs pour le web. Introduction a la librairie La documentation de popcorn est très bien faite et très simple d’utilisation, c’est pourquoi je vous propose aujourd’hui non pas de voir comment l’utiliser mais plutôt de créer votre propre plugin.

Comment créer un lecteur audio HTML5 Ce tutoriel va démontrer comment s'interfacer avec un lecteur audio HTML5. On connait tous le lecteur mais je veux aller complètement ailleurs ici. Évidemment, tous les fureteurs ne rendent pas le même résultat visuellement et vous ne voulez pas briser votre design. Donc, je vais démontrer comment créer votre propre lecteur en HTML/CSS en utilisant l'API Javascript de la balise audio en HTML5. La balise audio dans IE9, Chrome, FireFox et Safari

L’audio / vidéo en HTML5 Utiliser de l’audio ou de la vidéo n’est plus aujourd’hui l’apanage d’une animation Flash. Depuis HTML5 de nouvelles balises prévues à cet effet sont apparues, et les navigateurs peuvent lire de tels flux en mode natif. Nous allons donc au cours de cet article effleurer quelques unes de ces nouvelles possibilités. Avant toute chose quelle est donc la couverture ? À la différence des autres balises apparues avec HTLM5, il ne suffit pas d’ajouter la librairie de Rémy Sharp, html5shiv, pour que le navigateur puisse prendre en compte les deux balises <video> ou <audio>.

Introduction to HTML5 video Update history: 1 July 2010 — replaced download links to our experiment.webm-enabled builds with links to Opera 10.60 (final).14 May 2010 — some minor changes made; information on codecs added to mention the VP8 codec Google have made available and the experimental VP8-supporting Opera Labs build.31 July 2012 — a late update that merges the original article with an extended version that was written subsequently for an external magazine. This update includes a more in-depth scripting section, a new section that shows how to swap video sources, and replaces the outdated information on the autobuffer attribute with preload.14 January 2012 — amended to focus on webM and H.264, with only a side-note on Ogg Theora.

Related: