WebRTC – Using your Webcam for video in HTML Tutorial

Download the src(github)
View the demo

WebRTC is project to bring Real Time Communications to the browser. It is designed to allow video/voice chat with the browser without plugins. Because you technically have to have access to the webcam to do video chat, WebRTC gives you a javascript API to the webcam. This is what I am going to show you how to use. I am not going to go into the audio portion or how to create a real time communication link. WebRTC is still very much in beta and most browsers use a vendor prefix to get access to the webcam. I will show you what I did to create my webcam javascript abstraction library.

Create a Webcam Library

I created a small shim/abstraction library to make getting and using the webcam easier. I used what I learned from creating CreateMyPhotobooth (this is a small plug, but I am relaying what I learned from this). I have the project on github with a demo, grunt build info, and tests.

Use of the Library

When you include the library you will have access to the wcvj (WebCamVidJa) object. The first function is videoIsSupported. Continue reading “WebRTC – Using your Webcam for video in HTML Tutorial”

Facebook and FourSquare API checkin calls with SVG in HTML tutorial

Download the src(github)
View the demo

This has been an idea in my head for awhile now. The app will get your checkins from Facebook and FourSquare and will show you on a map which states you have been to. It is very similar to the other apps I have created. Although I do use a new skill, manipulating SVGs.

I want to give a quick thanks to Theshibboleth who created the SVG of the US. I downloaded it from Wikipedia.

The SVG

SVG stands for Scalable Vector Graphics. The simplest definition is that it is an XML file that describes how to build an image. If you would like to know more as always you can use Wikipedia or do a quick Google search. SVG has support in HTML5 for inline and loading. I am using inline SVG for this project. To do that all you have to do is copy out all the XML from the SVG file and paste it into your page. This lets you treat the SVG just like HTML. By that I mean that you can apply CSS classes to change the look and use javascript to attach event listeners and/or modify attributes on the fly. Continue reading “Facebook and FourSquare API checkin calls with SVG in HTML tutorial”

HTML 5 run tracking application

Download the src(github)
View the demo

The github repo has been updated. Some of the code will not match what is currently in the repo.

An idea that I have had for awhile is a RunKeeper like application that runs completely in the browser. This is not due to any inherit issues with the RunKeeper application, just more of a proof-of-concept. HTML 5 makes this easy. We can save old runs and run without an Internet connection making it almost a native app.

The only phone I have tested this with is an iPhone 4S as that is the only phone I have access to. It should work with an iPhone 4 and possibly a 3GS, but I cannot say for sure. Android should work as well as it should support everything I am doing with HTML 5 and javascript. Desktops can also try it out if you are using any modern browser: Chrome, FireFox, or Safari. You won’t get a path and possibly get an error if your browser cannot get a location. I have tested it in IE and it does not work. I have no plans to try and make it work as the only place I was trying to make it work was the iPhone. Although not supporting IE has made the code a lot cleaner.

RunKeeper in the browser: RunBrowser

HTML 5 – almost a native app

HTML 5 gives us many new methods to make a webpage an application. Before HTML 5 there were many workarounds to make a webpage do what we wanted it to. Now they are built right into the browser. The first thing I am going to cover is application cache. Continue reading “HTML 5 run tracking application”