Browser Super Powers: getUserMedia

In case you didn’t already believe it, your Web Browser has super powers. No longer is it something to merely display a document marked up with hypertext.

No longer is it limited to the read-only text and images of the olden days (aka the last two decades or so). Oh no. Now that the browser wars have cooled down, and the commons group are collaborating and updating the W3C standards rapidly enough for the eager-beaver browser vendors, we’re seeing new functionality quickly adopted across all major browser.

One of these super powers allows us to access the user’s microphone and camera (with their permission) using a one-liner:

var promise = navigator.mediaDevices.getUserMedia(constraints);

where constraints define the device preferences, such as:

{
  audio: true,
  video: {
    width: { min: 1024, ideal: 1280, max: 1920 },
    height: { min: 776, ideal: 720, max: 1080 },
    facingMode: "user"
  }
}

Here we’re requesting permission to access the device’s microphone and the camera, with a minimum and maximum requirement around the camera resolution, as well as defining a preference for the front-facing camera if available (facingMode).

This is all just plain old javascript too! At the time of writing, you only need to worry about ye olde IE and Opera Mini not supporting it.

Don’t believe me? Go to a website that uses HTTPS, open your browser’s Developer Tools and paste this in to the console:

var constraints = { audio: true, video: true }; 

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
    var video = document.createElement('video');
    document.getElementsByTagName('body')[0].appendChild(video);
    video = document.querySelector('video');
    video.srcObject = mediaStream;
    video.onloadedmetadata = function(e) {
        video.play();
    };
})
.catch(function(err) { console.log(err.name + ": " + err.message); });

You’ll be prompted for permission to access your devices:
browser requesting permission to access camera

If you allow, then you can scroll to the bottom of the page and see your lovely face appear in a dynamically generated video tag:

dynamically added video element with my pretty face in it
Amazing, right?

Web browsers are getting closer to native apps in what they can achieve, and getUserMedia (aka Stream API) is just one example of this.

Asides #9 – IRC. WTF?

Whilst I’ve been attempting to learn a new thing each month this year, I’ve been finding it really tricky to keep to the pretty loose schedule. As such, I though I’d try and note down every time a shiny new thing takes my interest, so that I have some idea why I’m incapable of completing a series of blog posts.

JabbR / IRC

IRC

Internet Relay Chat (IRC) – text based shared “room” chat environment, with private messaging etc. I seriously had no idea that people still used these. I would have used them back in university (’98/’99), but haven’t touched them since.

The idea of attempting to convince a company that they should set up a private IRC server internally for team communication just doesn’t seem right to me. I’d much rather suggest that people use any other form of IM or even JabbR; this is probably due to my developer background instead of ops.

JabbR

As such, I’ve been trying to install JabbR in the cloud using AppHarbify as a proof of concept

You can use Janrain to process the authentication, and AppHarbify allow you to just install apps into your appharbor account – including JabbR!

The details for manual installation are in an AppHarbor blog but the killer info is in the comments section..

Instigator
— Discovering people still use IRC, thanks to discussions at DevOpsDays..

Aside #8 – Officeless Working; Amazeballs!

Whilst I’ve been attempting to learn a new thing each month this year, I’ve been finding it really tricky to keep to the pretty loose schedule. As such, I though I’d try and note down every time a shiny new thing takes my interest, so that I have some idea why I’m incapable of completing a series of blog posts.

Mobile working

WorkSnug

The worksnug website lists places mobile workers have tried and rated; unfortunately it’s mainly coffee shops. The app can apparently filter these out, but the app doesn’t work on the Samsung S3.

worksnug

Southbank

I’ve recently discovered that the SouthBank in London is an amazing place to be an officeless worker:

  • The Royal Festival Hall (RFH) is HUGE, has loads of different areas to sit, free wifi (a bit dodgy sometimes, but fast when it is working), no pressure to buy coffees just to be there, and a members area with panoramic views over London (for only £45 a year – awesome!)

  • The British Film Institute (BFI) venue has a Benugo coffee area, but quite a lot of seating and no pressure to actually buy any coffee

  • National Theatre is a wonderful, huge building, which between shows is exceptionally quiet. Free wifi, limited seating, but would be perfect in nicer weather due to it’s outdoor seating areas.

Instead of following WorkSnug and ending up stuck in coffee shops, I’m going to spend some time with E-Architect’s listing of awesome buildings in London and a few such others and find the ones you can happily work from.

Non-Southbank Mobile Workspaces

Other great places I’ve previously tried and tested, or would like to:

Barbican
Barbican

British Museum
British Museum

British Library
British Library

Any other suggestions?

They don’t need to have free wifi; sometimes I prefer not to join those open networks and will instead fire up a bluetooth PAN with my phone. It’s still fast enough for everything I need to use it for.

Aside #7 – Career Change

Whilst I’ve been attempting to learn a new thing each month this year, I’ve been finding it really tricky to keep to the pretty loose schedule. As such, I though I’d try and note down every time a shiny new thing takes my interest, so that I have some idea why I’m incapable of completing a series of blog posts.

Career

Having decided to leave senior management and get back into something more technical, I thought about what I enjoy doing. I had a short chat with a very smart business friend of mine and thought I’d try to go it alone and focus on devops as a service I would eventually provide.

I was in the enviable position of having the luxury of a little bit of time to work out the direction to take, and made a great move in crowd-sourcing my decision making! I sent out a verbose email explaining all of the options and what I wanted to get out of life (!) to a group of friends (some techies, some not) and asked for their thoughts. The replies covered every possible scenario and reading them helped me work out what I wanted to do myself.

As such, I’m leaving permanent employment behind for the time being, becoming a contractor and working on setting up as a freelancer/consultant for DevOps evangelism.

Initially I needed to set up a company.. which isn’t particularly complicated, but it’s certainly not quick and easy! Coming up with a company name, checking domain availability, registering a company bank account, setting myself up as a consultancy; this is all time consuming stuff.

If you’re thinking of doing the same thing I would recommend reading up on it – there is a VAST amount of info out there on the interwebs and this article from Simon Rigsby is a great one to get your head around things.

What I ended up doing, after loads of email conversations with techie mates who have gone contracting, was to join the Professional Contractors Group and also got insurance, set up a company, and chose an accountant all via the PCG.

In the end it’s all been handled very smoothly by my accountants, and I’m now able to review a contract myself for basic IR35 flags, but I can get one contract reviewed for free each year via PCG.

Instigator
— not liking my job in senior management, deciding to work out what’s important to me instead and focus on that.

Aside #6 – A Random Analogy; DevOps/Washing Up

Whilst I’ve been attempting to learn a new thing each month this year, I’ve been finding it really tricky to keep to the pretty loose schedule. As such, I though I’d try and note down every time a shiny new thing takes my interest, so that I have some idea why I’m incapable of completing a series of blog posts.

Random Analogy – DevOps For Washing Up

Random Washing Up Analogy

Waterfall

Getting all of the dishes ready to wash, clearing all of the space required to let them dry, washing everything in one go and setting it all to dry, then getting a towel and drying everything in one go, then putting everything away in one go.

Agile

Wash one sink full, put it on the drainer, stop washing and grab a towel, dry that load and put it away as you go – one iteration completed!

DevOps

My definition of the devops movement is not about a technology or a single process, but about getting everyone necessary to get something out of the door involved at the start. As such; get two people to help you out: one washes, one dries, one puts away. Continuous deployment 😉

Instigator
— Thinking about DevOps a lot in the run up to devopsdays, and my dishwasher breaking..!

Aside #5 – A trip down memory lane (RISC OS games)

Whilst I’ve been attempting to learn a new thing each month this year, I’ve been finding it really tricky to keep to the pretty loose schedule. As such, I though I’d try and note down every time a shiny new thing takes my interest, so that I have some idea why I’m incapable of completing a series of blog posts.

RISC OS

I’d been derailed by the idea of getting games I used to play on Acorn running on the rPi. Seeing the RISC OS as an option for the rPi OS I went straight off to find ROMS for old Acorn games I loved as a lil hacker.. And ended up watching loads of vids on youtube:

Cataclysm

Galactic Dan

(“Mmm! Thank you!”)

Xenon 2

Twin Worlds

Mad Professor

Gods

(awesome music!)

Instigator
— Seeing Mad Professor youtube clip whilst researching for the “setup” pi post made me yearn for simpler times..

Aside #4 – Accessing EC2 from my phone via SSH

Whilst I’ve been attempting to learn a new thing each month this year, I’ve been finding it really tricky to keep to the pretty loose schedule. As such, I though I’d try and note down every time a shiny new thing takes my interest, so that I have some idea why I’m incapable of completing a series of blog posts.

Accessing EC2 from a phone running ConnectBot

The ppk you use for putty/kitty/ssh doesn’t work on connectbot so you need to generate a new one from within the phone (connectbot app) and copy it over to your EC2 instance, appending it to your authorised keys file.

Generating the key

Go and install the app from the android store.

Find the app on your phone:
connectbot_icon

Generate a new key from the Manage Keys page:
connectbot_generate_public_key

Getting your file to your EC2 instance

Firstly, copy the public key to clipboard:
connectbot_copy_public_key

Then get it to your phone. There are a few ways of doing this; I pasted it into a new text file via my phone’s dropbox app and then curl-ed/wget-ed that file on to my EC2 instance (obviously logging in from a PC).

Adding it to your authorised keys

First I backed the existing authorized_keys file up:

cp ~/.ssh/authorized_keys backup_auth

Then I appended the one generated from my phone:

cat s3_id_dsa.pub >> ~/.ssh/authorized_keys

You can now log in directly from your phone without using a login:
connectbot_logged_in_to_EC2

Instigator
— needing to restart Apache whilst AFK

Aside #3 – HDMI-CEC Awesomeness

Whilst I’ve been attempting to learn a new thing each month this year, I’ve been finding it really tricky to keep to the pretty loose schedule. As such, I though I’d try and note down every time a shiny new thing takes my interest, so that I have some idea why I’m incapable of completing a series of blog posts.

HDMI CEC

I’m investigating writing apps that implement HDMI CEC protocol and can therefore be manipulated via a TV remote control only. Or an API to handle basic stuff.

HDMI pins
It looks like HDMI CEC is on pins 13 and 17 (?) of an HDMI male connector

The idea that you can plug an HDMI cable into your HDMI-CEC capable TV and not have to use a keyboard to interact with the device is fantastic for usability!

Instigator
— HDMI CEC on XBMC and BerryBoot

Aside #2 – RPi + VirtualBox = :(

Whilst I’ve been attempting to learn a new thing each month this year, I’ve been finding it really tricky to keep to the pretty loose schedule. As such, I though I’d try and note down every time a shiny new thing takes my interest, so that I have some idea why I’m incapable of completing a series of blog posts.

Running Pi distros in VirtualBox

Apparently you can run raspberryPi distros in virtualbox (totally doesn’t work though..)

Converting a .img to a .vdi:

"C:\Program Files\Oracle\VirtualBox\VBoxManage.exe" convertfromraw -format VDI path:\to\input.img path:\to\output.vdi

Instigator
— trying to get decent screenshots of the various pi OS without having to take pics of the tv

Aside #1 – EC2 WordPress Issues

Whilst I’ve been attempting to learn a new thing each month this year, I’ve been finding it really tricky to keep to the pretty loose schedule. As such, I though I’d try and note down every time a shiny new thing takes my interest, so that I have some idea why I’m incapable of completing a series of blog posts.

EC2 Issues

I’m really having problems with EC2 these days, and I’m constantly being dragged back into finding out what the problem(s) is/are..

Restarts don’t restart

Had to add entries into the rc.local to restart httpd and mysql, and also had to change the permissions on the file to allow it to be executed upon restart (sudo chmod 6755 /etc/rc.d/rc.local).

Instigator
— because the blog went down a couple of times and I didn’t notice!

Backups kill the site!

WordPress 2 DropBox – killed me. As does mysqldump in general.

DB backup

mysqldump --add-drop-table -u <username> -p <database> | bzip2 -czs > <db backup filename>.bz2

website backup

tar -cjf <site backup filename>.bz2 /var/www

Instigator
— wordpress kept telling me to upgrade to the latest version, but also had a big MAKE SURE YOU BACKUP FIRST warning; and the WordPress 2 DropBox plugin killed my EC2 microinstance.

WordPress: Alerting on high CPU usage

#!/bin/sh
#
# Script to check CPU usage and tweet me if it's over a threshold
#
if [ ` uptime | awk '{ print$10 }' | cut -d. -f1 ` -gt 50 ];
then
    sudo python /home/ec2-user/tweepy/ec2Event.py '@rposbo LOAD: ' < /tmp/load
else
    echo lo
fi

This totally doesn’t work! Uptime seems to happily report low CPU usage even when the site is dying. Maybe CPU is low and mem is high.. hmm.. may have to change that check.

Instigator
— attempting to backup wordpress keeps breaking my site, dammit!

logstash, graphite, statsd

Currently trying to get those three to work together and help me find out why the EC2 microinstance is so.. uh.. micro..

Instigator
— EC2 just keeps on dying and I need to find out why