Face detection using HTML5, javascript, webrtc, websockets, Jetty and OpenCV Through HTML5 and the corresponding standards, modern browsers get more standarized features with every release. Most people have heard of websockets that allows you to easily setup a two way communication channel with a server, but one of the specifications that hasn't been getting much coverage is the webrtc specificiation. With the webrtc specification it will become easier to create pure HTML/Javascript real-time video/audio related applications where you can access a user's microphone or webcam and share this data with other peers on the internet. Update: in the newest versions of the webrtc spec we can also access the microphone! As with a lot of HTML5 related specification, the webrtc one isn't quite finished yet, and support amongst browsers is minimal. For this we need to take the following steps: In other words, we're going to create a real-time face detection system, where the frontend is completely provided by 'standard' HTML5/Javascript functionality.
Controlando nuestra WebCam con HTML5 Un sencillo ejemplo en el que accedemos a nuestra WebCam lo que nos permitirá convertir nuestro navegador web en una cámara de fotos utilizando únicamente HTML5, JavaScript y Canvas. Esto es posible gracias al desarrollo de la API getUserMedia, la cual aún no es soportada en todos los navegadores. Gracias a getUserMedia podremos acceder no solo al control de nuestra cámara sino también al del microfóno, aunque debemos tener en cuenta que la especificación todavía se encuentra en fase de desarrollo (la última actualización del borrador se dio el 12 de diciembre). El mayor inconveniente es el lento soporte que está recibiendo esta API, lo que siginifica que esta aplicación ni siquiera es compatible con muchos de los navegadores modernos. Respecto a Firefox, a día de hoy la gente de Mozilla aún no ha desarrollado la interfaz de usuario para la solicitud de activación de la cámara/micrófono. En realidad el código es más sencillo de lo que podría parecer.
Exploring the HTML5 Web Audio: visualizing sound If you've read some of my other articles on this blog you probably know I'm a fan of HTML5. With HTML5 we get all this interesting functionality, directly in the browser, in a way that, eventually, is standard across browsers. One of the new HTML5 APIs that is slowly moving through the standardization process is the Web Audio API. Update 30-11-2013: Firefox also has support for this API but a couple of API elements have changed. So why do I start with visualizations? There are many interesting examples that use this API. Create a signal volume meterVisualize the frequencies using a spectrum analyzerAnd show a time based spectrogram We start with the basic setup that we can use as the basis for the components we'll create. Setting up the basic If we want to experiment with sound, we need some sound source. Load the dataRead it in a buffer node and play the sound Load the data With the web audio we can use different types of audio sources. In this example you can see a couple of functions.
Moqups · Mockups, Wireframes & Prototyping The HTML5 test - How well does your browser support HTML5? Camera and Video Control with HTML5 Client-side APIs on mobile and desktop devices are quickly providing the same APIs. Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop. One of those APIs is the getUserMedia API, providing developers access to the user's camera. Let me show you how to get simple camera access from within your browser! The HTML Please read my note about the HTML structure below: <video id="video" width="640" height="480" autoplay></video><button id="snap">Snap Photo</button><canvas id="canvas" width="640" height="480"></canvas> Each of these elements should be created once confirmation of camera support is confirmed, but for the sake of this tutorial, I wanted to show you what the elements look like with basic HTML. The JavaScript Since the HTML elements above are already created, the JavaScript portion will look smaller than you think: Taking a photo is only marginally more difficult.
jQuery webcam plugin The jQuery webcam plugin is a transparent layer to communicate with a camera directly in JavaScript. As there is native support for webcams in modern browsers, it would be great if you could add this feature to the project and use the flash-version as a fallback for older ones. I don't have time for this project at the moment, so a pull request would be great! Overview This plugin provides three different modes to access a webcam through a small API directly with JavaScript - or more precisely jQuery. jQuery webcam example error: No camera was detected. Available Cameras If you activate the filter with the button on the right side of the picture, methods of my already published jQuery plugin xcolor will be used to distort the colors of the Canvas. General information about the interface The following snippet describes the interface of the webcam API: Config Parameter widthThe width of the flash movie. heightThe height of the flash movie. Callback Interface Save Interface webcam.save('/upload.php');
How to record audio in Chrome with native HTML5 APIs Two weeks ago a new version of Chrome was released. Google switched from the default Adobe’s Flash Player to an in-house developed version called “Pepper Flash”. Unfortunately Pepper Flash has a problem with audio recording, resulting in distorted audio on almost all Macs. This happened right in the middle of our efforts to build the Dubjoy Editor, a browser-based, easy to use tool for translating (dubbing) online videos. We started researching the space and checked a lot of sample code out there, but had limited success. From what you can find on html5rocks, capturing audio seems to be well supported. Everything seems easy and pretty straightforward, right? When clicking the “start recording” button, a permission request to use the microphone appears. Looks like the problem lies in assigning the recorded stream to the native audio source as it’s done in the video sample on html5rocks: audio.src = window.URL.createObjectURL(stream); mediaStreamSource.connect(context.destination);
A Simple Trip Meter using the Geolocation API Introduction The Geolocation API lets you find out where the user is and keep tabs on them as they move around, always with the user's consent. This functionality could be used as part of user queries, e.g. to guide someone to a destination point. It could also be used for "geo-tagging" some content the user has created, e.g. to mark where a photo was taken. The API is device-agnostic; it doesn't care how the browser determines location, so long as clients can request and receive location data in a standard way. The underlying mechanism might be via GPS, wifi, or simply asking the user to enter their location manually. The example here is a trip meter showing the initial location and maintaining a display of the distance they have travelled since the page was loaded. Step 1. You can easily check for compatibility by testing for the presence of the geolocation object: // check for Geolocation supportif (navigator.geolocation) { console.log('Geolocation is supported!') Step 2. Step 3.
Building a Touch-Friendly HTML5 Site | Clarity Blogs It Looks and Acts like an App…but it’s a Website Over the past month I have been doing some experiments with html5 and JavaScript. Specifically, I wanted to see exactly how close I could come to making a website ‘feel’ like a native app. In a recent post I made a claim that “websites can take a lesson from apps”. Avoiding jQuery has some perf benefits for mobile devicesAdding Touch support, and handling the default behaviors Getting around the lack of native scrolling in a fixed layout on iOS. Demo Site & Code If you’re like me and don’t have the patience to read the full post, I’ll cut to the chase. Avoiding the use of jQuery for optimized perf on mobile devices Adding touch capabilites to screen elements Using hardware accelerated css animationsDetecting browser capabilities with Modernizr An inertial scroller to workaround the lack of native scrolling in a fixed layout on iOS Avoiding jQuery for Better Performance Adding Touch Support [gist id=1104360] This isn’t really a new thing. Enjoy
HTML5: camera access Acceder a webcam y micrófono con HTML5 En este artículo te expondré una de las características de HTML5 más potentes: la capacidad de acceder a dispositivos como webcam y micrófono. El ejemplo que usaré es uno de los que expuse en uno de mis seminarios y que forma parte de los ejemplos de HTML5 y CSS3 para descargar aunque explicado en detalle. Ver ejemplo completo Funciona 100% en Chrome El ejemplo pretende que recojamos el audio y vídeo de nuestro dispositivo y los mostremos en un elemento video de HTML5. No es demasiado práctico pero servirá para comprender el funcionamiento. <! Acceso a dispositivos con HTML5 HTML5 nos permite acceder, siempre que el navegador lo permita, a dispositivos como webcam y micrófono a través del método getUserMedia. Como ves comprobamos que cada motor (webkit, microsoft, gecko) puede tener su propio método getUserMedia. navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; Rating: 8.3/10 (9 votes cast)
Las nuevas API de audio en HTML5