Show HN: Hyperlax.tv – a real-time feed of Instagram's latest Hyperlapse videos(hyperlax.tv)
hyperlax.tv
Show HN: Hyperlax.tv – a real-time feed of Instagram's latest Hyperlapse videos
http://hyperlax.tv/
20 comments
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.
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.
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://ratemyapp.com/video/6K_HgG_Xmf8/walkthrough-two-new-a...
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!
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 :)
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.
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!
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;)
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;)
Please don't use outline:none unless you are prepared to create your own custom outline.
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 :)
Edit: btw, thanks for sharing site, its awesome watching people race down the highway and changing lanes in hyperlapse to relaxing music :)
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!
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!
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 loadedReally 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
[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.
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?
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!
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!
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.
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.
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.
i think soundcloud requires flash for "anti piracy purposes", the page doesn't actually show the let's go button until you load flash.
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.
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.
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
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.
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 :)
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.
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.
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.
2. A few have asked for this, I'll have to build it. It was just an MVP issue frankly.
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.
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.
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
`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.
- 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.
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.