Show HN: Hyperlax.tv – a real-time feed of Instagram's latest Hyperlapse videos

by tbird24 • 11 years ago

145 64 11 years ago

tbird2415• 11 years ago

Really excited to share a personal project I've been working on here. If you check it out, I'd love to know what you think.

Enjoy a peek into the lives of others, from locations around the world. Hyperlax is meant to be a bit of an escape, a bit voyueristic, a bit relaxing. I think it's mesmerising. Maybe you will too!

Zekio3• 11 years ago

Like it!

Though personally i would probably not have used A tag in the navigation, so you don't get the Dashed outline if you click them, since its not a new page that loads, but otherwise I really like it. Bookmarked :)

EDIT: actually the A tags could just get the css rule (Outline: none;)

tbird2415• 11 years ago

thanks for the feedback! Weird, I don't get the outline myself. I believe I did use outline:none; but I'll double check. What browser are you using?

10dpd• 11 years ago

Please don't use outline:none unless you are prepared to create your own custom outline.

braaap2• 11 years ago

I was transfixed. Really, really good. The music really makes it for me. It is interesting to try and guess where the mystery locations really are. Sometimes this information is included in the hashtags. I got a few right! :)

tbird2415• 11 years ago

Thank you so much for checking it out :)

shoq• 11 years ago

In the description meta tags you wrote peak instead of peek. Sometimes if a lot of short clips are played successively I only see compression artifacts.

Very nice idea and implementation though!

venantius• 11 years ago

This is a super cool project! Totally the sort of thing I would leave open in a window while I worked.

lostbit• 11 years ago

Nice! I will set it on my room TV as an ambient attaction while talking with friends. let's see how it goes.

This reminds me that project Hyperlapse.js on http://hyperlapse.tllabs.io/. They used to have a working site where you could make your own (quick) hyperlapse using Street View's content.

tbird2415• 11 years ago

Sweet! It works great with Chromecast and Apple TV, so have at it :)

paromi• 11 years ago

a volme control would be nice

Zekio3• 11 years ago

I was thinking that too, since its full volume / mute right now.

braaap2• 11 years ago

Interesting. You still use this feature? I always thought YouTube and the like still included it on their sites as a throwback to an earlier time, or something. I always use the software on the playback device itself to control the speakers.

marquis• 11 years ago

Volume controls are important! Some examples: you are on a VoIP call but want background music. You have to listen out for some notification and the front music can't be too loud. You work with other audio files e.g video editing but don't need to be listening actively. Any media-multi-tasking situation, really.

Kiro2• 11 years ago

I almost always play several things at once. The standard is to have Twitch or Netflix/HBO on one monitor and a game on the other. Without specific volume controls it would be a disaster.

0x02• 11 years ago

Pretty cool. Had a tough time getting it to work in Chrome with "right-click-to-play-flash", but finally got it running by whitelisting your domain. Just clicking the "run all plugins this time" didn't work.

Edit: The light-bulb icon didn't make much sense at first (fullscreen mode), looks like it's for toggling the sidebar in non-fullscreen-mode only. Maybe hide it in fullscreen?

tbird2415• 11 years ago

flash? There should be no flash on the site, it's an HTML5 video. Very strange..., never heard of this issue before. If you can provide more details that'd be great, but no worries if not.

Light bulb actually = "dark mode", it hides everything else on the page. I intentionally left it ambiguous to see if people would curiously click on it :)

Thanks for checking it out!

pki• 11 years ago

i think soundcloud requires flash for "anti piracy purposes", the page doesn't actually show the let's go button until you load flash.

0x02• 11 years ago

The webpage loads at least "http://connect.soundcloud.com/soundmanager2/soundmanager2_fl... in chrome osx, and it seems that with right-click-to-play-flash this prevents the "let's go" button from appearing, even after clicking "run all plugins this time".

pmontra• 11 years ago

The audio is flash for me too http://connect.soundcloud.com/soundmanager2/soundmanager2_fl... (Firefox Linux)

The funny thing is that the video is mp4 but on Firefox with NoScript it shows the same kind of placeholder as Flash does (when allowing instagram.com but not cdninstagram.com). My first reaction was "wow, Flash?!" And I missed the flash in the audio player.

janfoeh2• 11 years ago

Very nice! A minor niggle: the map in the sidebar doesn't react when the window is being resized.

Edit: also, the map seems to get stuck: http://i.imgur.com/YOVzJwz.jpg

tbird2415• 11 years ago

Gah! You are correct about the map not resizing. Has to do with the library I used, called Datamaps. I could listen for window resize events, but for the MVP I figured it wasn't worth it. Thanks for pointing it out though, I'll get to this.

What did you to do get that map stuck in your screenshot? Never seen that before.

janfoeh2• 11 years ago

I don't think I did anything - I hardly interacted with the page at all, except from skipping a Soundcloud track once and possibly resizing the page.

At one point, it switched from "world view" to "US continental view" to show a hyperlapse from Miami, and then got stuck there in perpetuity.

Edit — or maybe I had a blackout and this is resize-related as well. It would make sense if I shrank the window, so half of the map got stuck outside the window. Never mind then :)

LiquidFlux• 11 years ago

The map doesn't seem to show the icons if I load the site at a 2160p resolution, at a smaller resolution closer to 1080p it renders the icons.

e12e2• 11 years ago

Nice project! Was actually hoping for something a little different; I've thought about having 4k streams with (local) ambient audio from around the world for use as virtual "windows". Just hang a 4k tv on a wall, and play a location/timezone that suits your mood... (Perhaps with a 24h buffer, so that one could match relative sun height/light to local time if one wants to...).

Would be interesting to see an accompanying technical write-up (choice of technologies, frameworks, rationale -- what was easy, what was hard etc).

Nice use-case for soundcloud, btw.

tbird2415• 11 years ago

You and I are on the same page, I love your idea too. This is my very first project, I'm entirely new to coding, but hopefully eventually I can extend Hyperlax to what you're talking about. Appreciate you checking it out!

gvr• 11 years ago

Neat project!

Last christmas in SF I wanted to create a "winter vibe" as we were celebrating with the family, and I was looking for videos showing cozy snowfall and winter landscapes. It was surprisingly hard to find something really good. I think it'd be cool if you could select what kind of "window" you want and had a few presets like "Tropical", "Winter landscape", etc.

I personally found the mix of soothing slow music and hyper lapse videos to not be relaxing, I think I'd prefer if the videos were running at normal speed or maybe even in slow motion depending on the video.

fokinsean• 11 years ago

Awesome job! Very impressive for a first project

entelechy0• 11 years ago

Very impressive for a first project. I've been writing code for 20 years and haven't ever made anything this cool :D You're inspiring me!

vlad• 11 years ago

Nice job! I just created a video review of your project and the one you were inspired by, here. It was a great first project for me to review for the very first episode of my new site. Thanks!

http://ratemyapp.com/video/6K_HgG_Xmf8/walkthrough-two-new-a...

girvo• 11 years ago

http://expedia.com/pictures/ -- choose a location, start the music player and press the Slideshow button :)

I'm in the process of rebuilding it, it's a prototype that ended up in production and I was tasked with rebuilding it on a modern stack; the new version is a fully isomorphic React and Flux (Flummox) application.

Working on it has been great, though it's definitely fired up my imagination and made me want to plan a holiday! We have the slideshow running on a 60" LCD all day at work :)

e12e2• 11 years ago

That's nice, but not what I had in mind. I was thinking a live 4k video stream with local audio -- so an "actual" digital window.

Slideshows and stills are nice -- but they serve a different purpose. Think of it as a different kind of augmented reality -- putting a "real" window in your windowless office etc.

techaddict009• 11 years ago

Awesome work. Can you share the tech stack you used?

tbird2415• 11 years ago

Haha, I can but it will leave you unimpressed. This was my very first coding project. It's a front-end app, so good ol' fashioned HTML/CSS/Javascript. Libraries used were:

- jquery

- Datamaps (for the map)

-ElementQueries.js (to do responsive design for a given element, pretty cool, check it out)

- Bowser.js (to detect browser)

- moment.js (for the "time since")

And I think that's it. LMK if you have any other questions.

DarkTree• 11 years ago

wow, very impressive for just "learning" how to code. Great work man, I like the design a lot.

ashwinaj• 11 years ago

Mind blown! Awesome work.

lsdafjklsd• 11 years ago

This music is amazing! Is it from one playlist on soundcloud?

tbird2415• 11 years ago

The default is one playlist, yes. But if you head to the "music" tab, you can choose from a bunch more!

shostack4• 11 years ago

I might be missing it, but is there a link anywhere to the individual playlists on Soundcloud? Would love little links on the music tab to go straight to the playlist vs. just the individual song from clicking the link at the bottom right.

The playlist is great but I don't always want the video running to listen to it.

SwellJoe• 11 years ago

I can't be the only one who pronounced this in my head as "hyper laxative".

madaxe_again• 11 years ago

You're not.

lifeformed• 11 years ago

What's supposed to happen? All I see is a big photo of a kid, and a music player that isn't making any sound.

tbird2415• 11 years ago

Hhmm. Do you see a big button that says "Let's Go!"? If not, you may have flash blocked/disabled. LMK what browser you're using. Really sorry about that. Promise it's worth it!

jfoutz• 11 years ago

Chrome - had flashblock on, but after enabling flash, still won't go. (hope this helps)

    this IS supported
    2app.js:188 videos and songs not loaded
    app.js:651 Object {duration: 122208325, release_day: null, permalink_url:    "http://soundcloud.com/chillcall/sets/chill", genre: null, permalink: "chill"…}
    3app.js:188 videos and songs not loaded
    app.js:332 [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
    app.js:452 https://scontent.cdninstagram.com/hphotos-xfa1/t50.2886-16/11682449_1595073700750452_1384791478_n.mp4
    app.js:466 hidden video link: https://scontent.cdninstagram.com/hphotos-xaf1/t50.2886-16/11684410_1604272313181065_1563724192_n.mp4
    app.js:309 content initialized
    2app.js:188 videos and songs not loaded
    app.js:236 video has been paused!
    163app.js:188 videos and songs not loaded

branchless• 11 years ago

All the grainy videos with this type of music is reminiscent of a Boards of Canada video. It's cool.

edit: to add, just watching the location tab is amazing, really gives an exciting sense of the world buzzing with activity. Plus I just saw where I live and cycle most days!

sova• 11 years ago

you nailed it. This is boards of canada!

shostack4• 11 years ago

Really cool. Two suggestions:

1. Widescreen aspect ratios

2. Volume slider, not just control. I'm listening on headphones at my desk at the lowest volume on OSX and it is still too loud. If I try to go any lower the sound turns off.

tristanho• 11 years ago

For point 2, try pressing:

SHIFT + OPTION + VOLUMEDOWN

Definitely agree on the widescreen aspect ratios though, could make a really cool experience even cooler.

shostack4• 11 years ago

That helped, but definitely would have expected it to just be in the UI and not require an unfamiliar keyboard shortcut.

tbird2415• 11 years ago

Re, #1: I wish, but since these are just Instagram videos, they have to be square. I suppose I could force it to be wide-screen but that would chop off the top and bottom.

2. A few have asked for this, I'll have to build it. It was just an MVP issue frankly.

Erwin• 11 years ago

Something similar from Uniqlo (the clothing company!) with interesting Japanese scenes: http://www.uniqlo.com/calendar/

pierrec• 11 years ago

Really mesmerizing! I've actually been watching Hypermasher from time to time since it was also submitted here [1]. I like the improvements that you've made, the interface is certainly nicer, and your codebase appears to be more concise. Hypermasher could run without Flash (barring the music), but Hyperlax refuses to start without it, however that's just a nitpick (though you might be surprised at the number of people who have flash disabled by default these days.)

[1] https://news.ycombinator.com/item?id=8309848

tbird2415• 11 years ago

Thank you!

Regarding the flash issue, you're right, I'm noticing this too. Completely didn't think about that. The "let's go" button waits for the sound to finish loading, but if it never does, you can't start it :/.

I'll look into this, hopefully not too many people are affected.

mortenjorck• 11 years ago

Wow, have you patched out Flash dependance already? I'm running on a Flash-free Safari and it looks and sounds great.

grizzles• 11 years ago

I'm trying to figure out why I like this so much... Nice job.

Kiro2• 11 years ago

Why was the title changed? It's not about the Instagram videos only. That would be a useless service. It's about the whole concept, which the old title much better represented.

tbird2415• 11 years ago

Huh. Disappointed they changed it, would have thought I have the right to describe my own site! Oh well.

siegecraft• 11 years ago

This is really amazing, thank you for sharing.

t-mw• 11 years ago

Good job! I think it would suit being played on a big screen at events/cafés. Will new videos be played as they're posted, or will it continue moving back in history?

Edit: Answered my own question I think, it just returned to play a video from a few minutes ago.

Show HN: Hyperlax.tv – a real-time feed of Instagram's latest Hyperlapse videos

Related Stories