WebRTC in the real world: signaling, TURN and STUN

New on HTML5 Rocks: a detailed look at building servers for WebRTC.

html5rocks.com/en/tutorials/webrtc/infrastructure

New on HTML5 Rocks: WebRTC infrastructure

Posted in Uncategorized | Leave a comment

simpl.info: simplest possible examples of HTML, CSS and JavaScript

I’ve built a site that aims to provide the simplest possible examples of HTML, CSS and JavaScript:

simpl.info

github.com/samdutton/simpl

Motivations:

  • ‘show me the code!’
  • ‘does technology X work on platform Y?’
  • ‘where the heck is that Foo example I saw?’
  • a minimum of ‘huh?’
  • easier to find simple stuff than gist.github.com, etc.
  • simpler and more comprehensive than html5demos.com, w3schools, etc.
  • short, consistent, guessable URLs with sensible redirects (e.g. /ajax => /xhr, /pc => /peerconnection)
  • easy to maintain

Caveats:

  • somewhat oriented to Chrome, and only cross-platform where I can be bothered and/or I think it make sense
  • lots missing: media queries, IndexedDB, WebGL, etc. – will add these when I get around to it
  • no templating

I hope it’s useful – comments and suggestions much appreciated!

Posted in Uncategorized | Tagged , , , | 2 Comments

WebRTC in Internet Explorer with Chrome Frame

It’s now possible to use WebRTC – PeerConnection and MediaStream – in Internet Explorer with Chrome Frame.

Best of all, getUserMedia no longer requires a flag to work with the Chrome stable channel – so, if Chrome Frame is installed, getUserMedia just works!

I’ve recorded a screencast that shows how to install Chrome Frame and configure Chrome in order to use WebRTC in Internet Explorer:

First, an explanation of how Chrome Frame works.

Google Chrome Frame is an open source plug-in that seamlessly brings Google Chrome’s open web technologies and speedy JavaScript engine to Internet Explorer 6, 7, 8, or 9.

When web developers add the Chrome Frame meta element to their web page, Internet Explorer will use Chrome Frame to render the page.

There’s more information about Chrome Frame for developers at developers.google.com/chrome/chrome-frame.

To try out WebRTC with Chrome Frame today, you will need to use Chrome’s Dev Channel. In the future, the WebRTC APIs will be available in both Chrome and Chrome Frame’s stable channels, without requiring any flags or other user intervention.

Installation steps

1. Download Chrome’s Dev Channel browser from dev.chromium.org/getting-involved/dev-channel. (This does not work with Canary.)

2. Quit all of your browsers.

3. Install Chrome’s Dev Channel.

4. Start Internet Explorer and install Chrome Frame from google.com/chromeframe?quickenable=true.

5. To enable PeerConnection, you need to set a flag by using regedit to create the following entry in your registry (as ever, be careful when using regedit!):

[HKEY_CURRENT_USER\Software\Policies\Google\Chrome]
"AdditionalLaunchParameters"="--enable-peer-connection"

Just to reiterate: the WebRTC APIs will be ‘flagless’ in future versions of Chrome and won’t need this kind of intervention.

6. Re-start Internet Explorer.

One tip: you need 32-bit Internet Explorer to use Chrome Frame. It’s normal to have 32-bit Internet Explorer, even for 64-bit Windows, but you may want to check. Just look in All Programs for the version named Internet Explorer!

Once you’ve set up Chrome Frame in Internet Explorer, try out the getUserMedia demo at simpl.info/getusermedia or the WebRTC video chat application at apprtc.appspot.com.

If you want to know more about how to implement real-time communication in your web apps, take a look at the detailed introduction to WebRTC and getUserMedia at html5rocks.com: html5rocks.com/en/tutorials/webrtc/basics, html5rocks.com/en/tutorials/getusermedia/intro.

Let us know how it goes!

Posted in Uncategorized | Tagged , , , , , | 1 Comment

Introduction to WebRTC – now on HTML5 Rocks

I’ve written a detailed introduction to WebRTC on HTML5 Rocks.

I’ve tried to explain some of the more difficult concepts – please let me know if anything is still mystifying!

WebRTC NAT traversal

Posted in Uncategorized | Leave a comment

Chrome Developer Tools, Google I/O 2012

Pavel Feldman taking feature requests live at Google I/O

Pavel Feldman taking feature requests live from the audience

The Google I/O session I did with Chrome Dev Tools tech lead Pavel Feldman is now on YouTube.

Lots of new features to help you develop and debug on mobile and desktop: frame mode, the Sources panel, the new timeline, Source Maps, Web Worker debugging – and much more.

It’s a fun session, especially when Pavel shows how he uses the Dev Tools to build the Dev Tools…

Posted in Uncategorized | Leave a comment

Getting started with the HTML5 track element

If you haven’t had a look at the HTML5 track element — check it out my tutorial on HTML5 Rocks.

The track element provides a simple, standardised way to add subtitles, captions, screen reader descriptions and chapters to video and audio.

Tracks can also be used for other kinds of timed metadata. The source data for each track element is a text file made up of a list of timed cues, and cues can include data in formats such as JSON or CSV. This can enable DOM manipulation and other behaviour synchronised with media playback — as well as deep linking and media navigation via text search.

Posted in Uncategorized | Tagged , , , | Leave a comment

Got Raspberry Pi!

Raspberry Pi desktop

Raspberry Pi desktop

We got a Raspberry Pi in the office today, and hooked it up to a keyboard and monitor.

Raspberry Pi board

Raspberry Pi board, roughly Arduino size

In case you haven’t heard of it, Raspberry Pi runs Linux on an ARM processor and has a target price of $25/£15 for a pre-configured system.

Works a treat!

Just want to get Chrome on it now :^).

Posted in Google Chrome, Primary schools, School | Tagged , , , , | 8 Comments