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. 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. Each MediaStream object can contain zero or more tracks, in particular audio and video tracks. Each track in a MediaStream object has a corresponding MediaStreamTrack object. A MediaStreamTrack represents content comprising one or more channels, where the channels have a defined well known relationship to each other (such as a stereo or 5.1 audio signal). A channel is the smallest unit considered in this API specification. A MediaStream object has an input and an output. Each track in a MediaStream object can be disabled, meaning that it is muted in the object's output. A MediaStream can be finished , indicating that its inputs have forever stopped providing data. The output of a MediaStream object MUST correspond to the tracks in its input. Both MediaStream and MediaStreamTrack objects can be cloned.

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

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 navigator.getUserMedia ( constraints, successCallback, errorCallback ); Example Here's an example of using getUserMedia() with browser prefixes. Parameters constraints The constraints parameter is a MediaStreamConstraints object with two Boolean members: video and audio. If the value or the member is not specified in the object, the value for the member defaults to false. successCallback The getUserMedia function will call the function specified in the successCallback with the LocalMediaStream object that contains the media stream. function(localMediaStream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(localMediaStream); video.onloadedmetadata = function(e) { // Do something with the video here. }; }, errorCallback Permissions

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 :

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

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 “!! !

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. Code : html Et le code javascript pour récupérer l'élément DOM : Code : javascript var video = document.getElementById("video"); Bien maintenant, pour passer un élément en plein écran, il faut appeler sa méthode element.requestFullScreen(); Et voila ! Code : css

Popcorn.js | The HTML5 Media Framework 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. En effet, la balise audio HTML5, tout comme un select, un radio ou une checkbox, n’est pas « personnalisable ». La balise audio sur Firefox, Chrome et Opera Mise en place du lecteur On définit la structure HTML du lecteur avec la balise HTML5 audio.

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 Intégrer le player dans votre page Commencez par télécharger le player puis décompressez l'archive (.rar). Avec votre éditeur de code habituel (ou le bloc-note de windows), ouvrez le fichier "player_HTML5.html" et insérez les scripts et code dans votre page. Il y a 2 blocs de code, celui du head et celui du body. Le code à placer entre les balises <head> et </head> est délimité par les commentaires <! <! jQuery(document).ready(function() { var $ = jQuery.noConflict(); $.html5audio('#componentWrapper', ap_settings, 'sound_id1'); ap_settings = null; }); Editer votre liste de musique En exemple : <! Personnalisation

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: 1 <html>2 <head>3 <script src=" </head>5 <body>6 </body>7 </html> Next, you will need to write a few lines of JavaScript to create your Popcorn instance and do something with it.

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. Ce guide a pour but de vous permettre d'organiser un learning lab de manière autonome. Pourquoi Popcorn ? Il existe aussi de nombreuses démonstrations des capacités de Popcorn.js. Que faire ? La devise est : Partager et faire ! Qui ? Les équipes sont constituées de : Agenda

Créer un plugin Popcorn.js | Adfab Connect 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. Le plugin que nous allons créer va nous permettre d’afficher des info supplémentaires à la vidéo, un lien apparaîtra à partir d’un instant de la vidéo et disparaîtra a un autre instant, de plus une image sera affiché en mouseover de ce lien lorsqu’il est a l’écran. Mise en place du projet Avant de commencer notre plugin nous allons d’abord mettre en place un fichier html qui contient notre vidéo et charge popcorn.js ainsi que popcorn.linkMouseOver.js. Notre plugin