Inline video in Mobile Safari on iOS

Recently we released a game for one of our clients, Red Bull. The game feature two awesome breakdancers which you control. Hitting the markers at the beat of the music gives you performance and accuracy points.

A video posted by earth people (@earthpe0ple) on

The biggest challenge we faced during the R&D was to play video of the dancers whilst allowing the player to interact. Currently, there is no straightforward way of doing this on iPhone devices. Any playing video tag will automatically startup in fullscreen using the built in media player. This is where our little hack came useful.

Through extensive testing and research we managed to extract image-data from a video-tag. Setting the currentTime property will stealthily move the playhead of the video and make that frame available for rendering onto a canvas. Realizing this we created our own custom player capable of extracting 25 frames a second, move to defined clips and perform loops. All on the “incompatible” iPhone.

Video compression played a huge role on the outcome. Usually videos enter keyframes around each second of video material. This also means that seeking in videos often snap to those keyframes. We did however discover that our video-material got even smaller in file-size setting the keyframes to every frame and allowed us to seek freely.

keyframes

Performance is a pain and video buffers doesn’t make it any easier. Video-elements only automatically buffer a certain amount of data. Jumping back and forth in a video shifts the buffers around while playing resulting in lag and dropped frames. This wasn’t good enough for gaming. Solution; Blobs. Loading the complete video into a Blob, from which the video-player can read from, removed the delays making video access instant. Now, this can be solved using several different techniques, for instance Application Cache, but we came to the conclusion that Blobs and trust in the regular browser cache would be sufficient and optimal in terms of performance.

/Carl

Botanical – vår nya familjemedlem (in Swedish)

Screen Shot 2016-04-07 at 20.20.03

I snart tio år har Earth People skapat och utvecklat verktyg för att hjälpa tjänster att prata med varandra. Ofta utan att tjänsterna egentligen stöder detta. Vi har byggt feta amerikanska bilkampanjer med konversationsteknik, reverse-engineerat Snapchat’s API till Europas första SnapChat-kampanj, hackat ihop det enda rimliga sättet att hitta bra band på SXSW, typ kopplat ihop MatHem med FindMyIphone och fått en hel del världspress på köpet.

Precis just nu pågår ett skifte, i vilket fler och fler tjänster bjuder in till utveckling av chattbottar. Det är via denna kanal som många kunder kommer att interagera med tjänster och varumärken eftersom användare har slutat installera nya appar. Tjänster som Kik, WeChat, Telegram och Slack leder denna bottrevolution, och nu när bottarna kommer till Facebook Messenger och Skype tror vi och många andra att detta kommer att explodera. Med detta som utgångspunkt startar vi nu en systerbyrå – Botanical.

Earth People lever kvar som vanligt och fortsätter göra internet en bättre plats för våra kunders kunder. Men vill du ha en bott – prata med Botanical.

/Peder, vd

Throwable images

I have been playing around with the idea of instant communication between devices/browsers for a while now. Trying to find new ways of using WebSockets further than just text messages. Suddenly realized that an old invention of “throwable” images between devices would be possible today with the illusion of instant data sharing. This video demonstrates how an image can be thrown between a cellphone and a computer with “zero” delay.

/Carl

My family uses Slack. It’s pretty interesting.

Everything changed for the better when we started using slack at work. We’ve made countless custom integrations; doorbells, intercoms, travel cards, reddit, lunch menues, git hooks, server monitoring, you name it – we haz it.

My family has been using Google Calendar for a few years. Me and my wife used to think that we we’re busy every night and that there was no room for improvisation. Google Calendar showed us that we had lots of free evenings and weekends, which has been great.

When it was time to evaluate a group chat app, I saw no reason to use HipChat, Skype or anything like that. Slack to the rescue!

Slack’s free tier gives us 10 integrations, search for the latest 10 000 messages and 5GB storage. This is plenty for a family of 4. In this blog post I’ll go through how we use it and the integrations we have made to aid us.

Screen Shot 2016-02-01 at 15.15.44

We use channels just the same way we use them at work. “fixahuset” is a channel for stuff that needs to be fixed around the house, “general” is important stuff, “handla” is for picking up milk on the way home, “mathem” is an integration i’ll get to in a bit, and “random” is the usual cat gif mayhem we’ve all learned to love/hate. “pedertest” is where i test new integrations.

Integration no 1: Where are the kids?

We, as most parents to 10yo kids, ask this question daily. Picking them up at school, but they’re at a friend’s house, etc. Gah. This is a custom Slackbot command, which calls out to my server and returns the result.

My server runs a little curl script that calls out to Find My iPhone and returns a static GoogleMap image. The kids will probably start to question this thingie eventually, but works for now.

whereis

Integration no 2: Google Calendar

Our old Google Calendar integrates very smoothly, just hook it up and let Slack know when you want the notifications.

Screen Shot 2016-02-01 at 15.27.16

Integration no 3: School information

It turns out our school is living in the future, providing a RSS-feed per child. I had no idea. RSS works very well with this setup.

Screen Shot 2016-02-01 at 15.32.12

Integration no 4: Online food shopping

In Sweden, MatHem is one of the biggest e-commerce sites for groceries. We use them for a weekly delivery, and it works great. The night before delivery we generally take 10 minutes and cram everything we can come up with into our cart, which means that we miss a lot of essentials. What if we could add uhm… juice to our cart throughout the week, the moment when someone realise that we’re out of uhm… juice (“sök” means search, “köp” means buy).

mathem-animation

This integration is not kosher at all, and I’m probably breaking some terms and conditions. But we need this, and it could be done, so hey. If you work at MatHem or is offended by this in any way – please let me know and I’ll cease and desist.

That’s all the stuff we’ve got now, but more to come. Applying tactics from work to family life may seem cold, but I see this as a way to make the most out of our time. It’s not like we’re writing Jira stories or planning our vacation in Trello. Yet.

UPDATE

Lots of people wrote and talked about this, like Qz.com, ForbesNyTeknik (Swedish) and Apparat (Russian). And on Twitter (1) (2) (3) (4), Hackernews and Fatherly.com. CBC Spark also made an interview, which was great fun.

Syncing your Korg Littlebits to external trig

Syncing your Korg Littlebits sequencer can be a bit tricky unless you have the official break-out bits, or a SQ1 sequencer too hook it up to. I multimetered the cables between the breakout bits:

Red = DC current.
Orange = trig.
White = ground.

Turns out the kit actually speaks normal trig signal, and the internal trig is about the same as the trig from a drum machine (in this case a Boss DR110). So we cut the orange and white cables going into the sequencer and joined these the wires from a cut mini jack cable. Voilá – external trig!

/Peder

 

Self-generating recursive art using Amazon Mechanical Turk

Amazon Mechanical Turk is an amazing API. It’s an API to humans, and yup that sounds super weird.

I programmatically create a HIT – a Human Intelligence Task, using their API. Typical HIT’s are “sort these files by cuteness”, “listen to these audio files for NSFW material” and other things a computer can’t do well (yet). Humans somewhere in the world will choose to do these tasks and get micro payments in return. We’ve got more posts about this coming up soon.

I wanted to see what happens when this system starts playing by itself, essentially by creating a feedback loop where a result from a HIT yields a new HIT, in an eternal loop. The outcome… is it art? A blog-series? A study in low-wage work? Who knows.

The task I created was to interpret the text phrase “I was born on Jupiter” into a 20 seconds video of containing dance. The next task will be to interpret the modern dance in a drawing. The one after that is to interpret the drawing in a text, and then it starts over.

http://interpretthis.tumblr.com/post/134926554936/hello-interpret-this-phrase-into-dance-i-was

Everything is documented on interpretthis.tumblr.com. Humans are slow, so it could take days for new posts to turn up here. I’ll keep it going as long as it’s interesting.

 

Mandatory reading for PHP devs

I just wanted to give this site I stumbled upon some credit: http://www.hackingwithphp.com/. I’ve been developing with PHP for about 15 years, but still the part about performance taught me quite a lot. isset() is apparently faster than array_key_exists() and $i++is slow compared to ++$i. These are micro-optimizations, sure, but there’s no reason to rub PHP the wrong way…

/Peder

Finding out sentiment

Say you want to find out if a user generated text is happy, sad, upbeat or hateful. Not so easy is it? We were given this task as a part of a recent project. And to make things even more challenging we needed to do this in both Swedish and English.

After a bit of research I found a very interesting API that pretty much does this – SAPLO. Using their API we can create reference groups of texts, and compare user generated texts with these groups.

Say we create two groups; Positive and Negative.
We then measure each user generated text towards these groups, and get a sentiment back. For instance:

Jag har tråkigt (I’m bored):
[Negative] => 0.14
[Positive] => 0

Fisk är gott (Fish tastes good):
[Negative] => 0.22
[Positive] => 0.28

Många tycker det är tråkigt att resa, men inte jag (Many people things that it’s tedious to travel, but I don’t):
[Negative] => 0.40
[Positive] => 0.46

SAPLO works great on both English and Swedish.

How to make a wind chime door bell

Our doorbell was already connected to the Internet via an Arduino, but we couldn’t stand the sound it made. We needed a warmer sound, a sound that didn’t make us want to kill the doorbell users (mostly clients).

Step 1:
Buy an old Wind Chime, preferably with a coconut base (because awesome).
2015-01-22 14.34.26

Step 2:
Pick up a few Littlebit modules (Cloudbit, servo motor and power supply).
2015-01-22 15.41.33

Step 3:
Drill, glue and duct tape a bambu stick to the servo motor. Hide all the crap in a classy box.
download_20150122_143926

Step 4:
Make the old Slack door bell script also make a little curl post to the Cloudbit.

<?php
$data = array(
	"percent" => "100",
	"duration_ms" => "10000"
);
$url_send = "https://api-http.littlebitscloud.cc/devices/XXX/output";
$str_data = http_build_query($data);
$ch = curl_init($url_send);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Authorization: Bearer XXX','Accept: application/vnd.littlebits.v2+json'));
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");  
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $str_data);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1); 
echo curl_exec($ch);
curl_close($ch);

Step 5:
Ring the door bell. Voila!
doorbell