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

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

hyperlax.tv

145 pointstbird2464 comments

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.

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!

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.

Awesome job! Very impressive for a first project

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!

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...

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 :)

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.

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!

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;)

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?

It could be my browser, since i am using Firefox developer edition 40.0a2

Edit: btw, thanks for sharing site, its awesome watching people race down the highway and changing lanes in hyperlapse to relaxing music :)

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

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! :)

Thank you so much for checking it out :)

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!

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

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

You're not.

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!

you nailed it. This is boards of canada!

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

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.

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!

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

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

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.

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

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?

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!

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

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".

Hhmm, thanks a ton for that info. Not sure yet if there's anything I can do about this, but I will definitely look into it.

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.

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.

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

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

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.

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

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.

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 :)

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.

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.

For point 2, try pressing:

SHIFT + OPTION + VOLUMEDOWN

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

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

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.

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.

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

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

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

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.

Ah, there isn't, but that's a good idea. Is there a playlist in particular you wanted a link to, I can pull it up for you.

The chillout one is excellent. Not sure how much revenue opportunity there is, but redesigning that sound player and curating the music with affiliate links might cover some of the hosting bill.

Out of curiosity, can you speak to your hosting situation and costs as related to getting hit with this news?

I'm a novice coder, but I'm trying to learn about the sysadmin side of things too and wondering how one might take a site like this and avoid massive bills.

I was also curious to find the chill out set so I looked in the source of app.js to find the playlist id and fetch the response:

`curl http://api.soundcloud.com/playlists/9875415.json?client_id=0...

http://soundcloud.com/chillcall/sets/chill

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

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.

a volme control would be nice

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

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.

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.

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.

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

This is really amazing, thank you for sharing.

Mind blown! Awesome work.

Reply on news.ycombinator.com