13 ms·

Seriously.js

643 points by Aissen 13y ago

oneye 13y ago
> A real-time, node-based video effects compositor for the web built with HTML5, Javascript and WebGL I for one am really impressed. While I'm not up to date with node.js, WebGL (or even HTML5 tbh), the boundaries that people keep pushing with web technologies is pretty wild. EDIT: Reading more, I'm not sure if I am proud or embarrassed about my narrow focus over the last few years. I'm proud that I'm making a good living due to it, but disappointed that I haven't been able play with these things. Reading about WebGL [1], I feel like there is a new world to explore (for web programming). [1] http://en.wikipedia.org/wiki/Webgl http://en.wikipedia.org/wiki/Webgl
- Cyranix 13y ago
  Also note that "node-based" does not refer to node.js as per the FAQ: https://github.com/brianchirls/Seriously.js/wiki/Frequently-Asked-Questions#does-this-have-anything-to-do-with-nodejs https://github.com/brianchirls/Seriously.js/wiki/Frequently-...
  - oneye 13y ago
    I completely missed that. Thank you!
gopalv 13y ago
You know it's Serious when "TV Glitch" is available as a feature.
- brianchirls 13y ago
  "TV Glitch" is the Page Curl of the 2010's
whadar 13y ago
Now that's cool! Closest thing I've ever seen to fulfill the "instagram for video" prophecy
- ErikAugust 13y ago
  :::Takes week off to spin up an Instavideo demo:::
- beggi 13y ago
  Isn't the green screen kind of required?
  - epoxyhockey 13y ago
    Perhaps something like this could be done: http://clippingmagic.com/ http://clippingmagic.com/ (discussion: https://news.ycombinator.com/item?id=5682831 https://news.ycombinator.com/item?id=5682831)
    - brianchirls 13y ago
      Something similar to that is possible for video. For example: http://www.youtube.com/watch?v=rGMqXBvYxog http://www.youtube.com/watch?v=rGMqXBvYxog I'm working on porting this over to Seriously.js so it should run in the GPU, hopefully pretty fast. The first crack at it was not so good, and now I'm experimenting with some new features that are only in Chrome nightly builds at the moment (and buggy at that). So look for this in the next 3-6 months.
  - evan_ 13y ago
    the real-time-filtering would still be cool without replacing the background.
mshron 13y ago
Finally a demo that doesn't make me think "Wow, the web has really caught up to the 1995 desktop!" Maybe if you're already an after-effects wiz this doesn't seem as magical, but it certainly felt like magic to me.
- tyleregeto 13y ago
  I've clocked many hours into After Effects, but seeing this in a browser and _interactive_ is amazing. Never would I have thought that JS and browsers would progress so much in such a short period of time.
  - smackfu 13y ago
    OTOH, it's mainly possible because computers are faster so Javascript isn't a slow language anymore, and the document model is just getting out of the way and letting you manipulate pixels directly.
    - kmm 13y ago
      This isn't manipulating the pixels directly. Javascript is still way too slow to do that, and I don't think that will ever change. The real work is done by the graphics card. The Javascript only uploads a frame to the graphics card, makes it run a shader and then displays the adapted frame.
  - kaffiene 13y ago
    WebGL is doing the heavy lifting.
  - DanielRibeiro 13y ago
    People have been doing some pretty amazing things with WebGL lately: http://metaphysicaldeveloper.wordpress.com/2013/04/23/webgl-breaking-into-the-real-world/ http://metaphysicaldeveloper.wordpress.com/2013/04/23/webgl-...
- garysweaver 13y ago
  The best part to me was that it was actually a pretty good music video, and the interactivity adds to it.
michaelmior 13y ago
Seriously did nothing for me. Uncaught Not a valid HTML element: EMBED (must be img, video or canvas)
- hayksaakian 13y ago
  same here, I just heard some audio Uncaught Unknown source type seriously.js:2727
- krapp 13y ago
  me either, except the music played, that's it. i assume since no one else has mentioned this that it's just me: http://i.imgur.com/TdQCpsR.jpg http://i.imgur.com/TdQCpsR.jpg
- brianchirls 13y ago
  It sounds like you may have a browser addon that's creating an EMBED element as a fallback because the browser can't play the video itself. If that's not the case, do you mind writing a bug issue on github with your browser details? https://github.com/brianchirls/Seriously.js/issues https://github.com/brianchirls/Seriously.js/issues Thanks
  - skeletonjelly 13y ago
    @michaelmior you can use this to help identify your browser: https://aboutmybrowser.com/ https://aboutmybrowser.com/
  - michaelmior 13y ago
    Running the latest Chrome on Mac OS X. (btw, realized my initial comment probably came off a little snarky. My apologies. From the sounds of the other comments, it's something incredibly cool!)
    - brianchirls 13y ago
      That's pretty weird. Is it possible you have a browser extension that's replacing the video tag with an EMBED?
lewisflude 13y ago
Is that OK GO?
- underwater 13y ago
  It's the raw video from http://www.youtube.com/watch?v=12zJw9varYE http://www.youtube.com/watch?v=12zJw9varYE. The real film clip features a really neat Windows 98-like green screen effect.
deleted 13y ago
[deleted]
saejox 13y ago
TypeError: video is null @ http://seriouslyjs.org/js/script.js:226 http://seriouslyjs.org/js/script.js:226 Firefox 21.0
- graue 13y ago
  Yeah, I got the same. Do you have Flashblock? Try whitelisting seriouslyjs.org and reloading. Fixed it for me on Fx 23.0a2. (Note: This comment was originally complaining that the link didn't work in Firefox; edited when I found the cause.)
  - corin_ 13y ago
    Not for me, but given it has a Mozilla logo and credits them for "support" I would assume it does for some.
fowkswe 13y ago
What's the awesome song?
- brianchirls 13y ago
  This is "WTF" by OK Go. Back in 2010 they posted the raw greenscreen footage for people to remix. http://okgo.net/2010/01/20/wtf-video-remix-project/ http://okgo.net/2010/01/20/wtf-video-remix-project/
hawkharris 13y ago
This is incredible.
pacomerh 13y ago
Nice song also.
wwweston 13y ago
OK, but I think they should have written it in Go.
- Vecrios 13y ago
  Curious, why would you think so?
  - Timothee 13y ago
    The video is of the band OK Go.
    - Vecrios 13y ago
      You never know.
- vanderZwan 13y ago
  For a second I thought you were being snarky about Go. Then the penny dropped.
- benihana 13y ago
  I see what you did there.
hidden-markov 13y ago
Seriously? That's just wow.
randall 13y ago
This is the sort of thing we're working on at Vidpresso. If this impresses you, and you want to build stuff like this... we should be friends. Contact info is in my profile.
- aantix 13y ago
  We should be friends. Love the concept of Vidpresso; I woud have liked to try a demo but it required me filling out a form. :(
  - randall 13y ago
    That's what I'm coding right now! :) We're reworking our marketing site.
- kingkool68 13y ago
  We're already friends. Hi Randall!
  - randall 13y ago
    Yo RH! :) So do you do rails or still just frontend stuff? And do you do like angular / other JS frameworks?
    - kingkool68 13y ago
      I'm a full-stack developer doing HTML/CSS/JavaScript/jQuery/PHP/WordPress/MySQL/Sysadmin stuff for pewresearch.org
beggi 13y ago
IN JS? This is so cool. Also: fun to compare the raw video to the original: http://www.youtube.com/watch?v=12zJw9varYE http://www.youtube.com/watch?v=12zJw9varYE :)
- aantix 13y ago
  How are they changing out the backgrounds in the tech demo? I was expecting the original to be a green screen background...
  - zlapper 13y ago
    Click in the Raw button, you will see the green background :)
  - deleted 13y ago
    [deleted]
  - BHSPitMonkey 13y ago
    "Original" meaning the original finished released music video from 2009. The band released the raw green-screen footage later for remixing.
    - lessnonymous 13y ago
      Respect for OK Go videos just went up a level. What an awesome idea!
- moskie 13y ago
  Would also be interesting to see if they could recreate the effect of the original video in JS also.
  - JimJames 13y ago
    Isn't the algorithm just, filter out the greenscreen, for each remaining pixel draw it to the buffer, draw the buffer to the screen? That doesn't seem more complicated than the examples they showed.
crabasa 13y ago
This is pretty awesome, but it seems like OK Go has cornered the market on "cool web tech" demo music videos. Doesn't anybody remember their collaboration with Google? http://allisnotlo.st http://allisnotlo.st I fully expect them to do something with Microsoft for IE11 to complete the cycle.
- abstractbill 13y ago
  OK Go has cornered the market on "cool web tech" demo music videos. Actually there have been some other very nice ones recently: http://donottouch.org/ http://donottouch.org/ http://lights.elliegoulding.com/ http://lights.elliegoulding.com/
- krrrh 13y ago
  Don't forget about Yung Jake! http://e.m-bed.de/ http://e.m-bed.de/ (seems to work best in Safari for me ymmv)
- alanh 13y ago
  Don’t forget the Arcade Fire! http://www.chromeexperiments.com/arcadefire/ http://www.chromeexperiments.com/arcadefire/
Tomdarkness 13y ago
I'm confused, is the green screen suppose to be intentionally bad? It not only removes the background but most of the people as well. Edit: Here is what it looks like for me: http://i.imgur.com/8wflg8Q.jpg http://i.imgur.com/8wflg8Q.jpg in both Firefox 21 and Chrome 29+27
- brianchirls 13y ago
  No, it is definitely not supposed to look like that. Here's what it looks like for me: https://s3.amazonaws.com/uploads.hipchat.com/23744/150541/nkgq5tafynykawi/upload.png https://s3.amazonaws.com/uploads.hipchat.com/23744/150541/nk... Do you mind sharing your video card info and operating system? It will be hard to debug remotely, but I'll see what I can dig up. Please post it here or on github: https://github.com/brianchirls/Seriously.js/issues https://github.com/brianchirls/Seriously.js/issues Thanks
- lnanek2 13y ago
  Working fine on 27.0.1453.93 on OSX here. Although the pictures seem to have been changed. There's only one person's face on the left on mine.
  - graywh 13y ago
    Picture? It's a video.
joezydeco 13y ago
Wow, I've never seen all 4 cores in my machine simultaneously spin up to 90% before. Nice trick.
- atwebb 13y ago
  You must be a better programmer than me.
  - chacham15 13y ago
    If you write single threaded applications you cant go above 1 core and so will never hit this mark :)
    - astrodust 13y ago
      fork disagrees.
      - gnaritas 13y ago
        As does pipe.
        knome 13y ago
        Rapidly cycling the processor affinity tries its best.
        gnaritas 13y ago
        Say what?
    - atwebb 13y ago
      It was weird timing because I was working on a multi-threaded application that was murdering my server (expected) when I made the comment.
- Tomdarkness 13y ago
danielweber 13y ago
"Sadly, we are unable to get Seriously.js to work on your computer. Sometimes WebGL gets a bit weird with certain graphics hardware and drivers. Please have a look here for more information."
- fierycatnet 13y ago
  Same here. Could it be because I am running Linux?
  - matchu 13y ago
    I got it working in Linux on Firefox. Chrome didn't work, though.
  - WatchDog 13y ago
    Working on Ubuntu 12.04 Firefox 21 and Chrome 27, AMD drivers.
  - aceperry 13y ago
    Works for me on Ubuntu 13.04, Chrome 28(beta), Firefox 21, using Nvidia drivers.
  - thefreeman 13y ago
    you just need to enable it. it is disabled by default for most Linux OS / video card combos
- Flimm 13y ago
  It failed here, but without an error message. I can only see the first frame.
- mindcrime 13y ago
  "Sadly, we are unable to get Seriously.js to work on your computer. Sometimes WebGL gets a bit weird with certain graphics hardware and drivers. Please have a look here for more information." Yeah, same here, running Ubuntu on a Dell Precision laptop. Guess WebGL doesn't like my setup.
sublimit 13y ago
Whoa, this caused the second BSOD I've seen since Windows 98. When I started messing with the options, the windows just flashed wildly for a while, some popup about ATI Radeon driver errors was struggling to spring to existence, and then everything froze.
suyash 13y ago
End of TV!
gersonaya 13y ago
Damn nice.
brianchirls 13y ago
Hi, I'm the person responsible for/guilty of this. Thanks for the comments, everyone. My sympathies for the BSOD. Please keep the bug reports and questions coming. I'll try to fix/answer what I can.
- johncoogan 13y ago
  This is awesome! I can't wait to see the mashups that spring forth from this (and hopefully make one or two myself). There will definitely be something really creative soon. Thanks for doing so much legwork on this.
- gojomo 13y ago
  Does it now or might it soon work with live video from the local camera?
  - brianchirls 13y ago
    Yup. You can see a live video demo with a sample of some of the effects: http://brianchirls.github.io/Seriously.js/ http://brianchirls.github.io/Seriously.js/ Although, both Firefox and Chrome have been a bit buggy for me with getUserMedia. Try the Ascii Text effect.
    - gojomo 13y ago
      Cool, thanks! Couldn't get it to work in FF (Mac/22.0) - it asked for camera permission, camera activity light went on, but no images and constant re-prompts for permission. But, worked quite well in Chrome (Mac/27.0.1453.93).
- aceperry 13y ago
  You... you're the one! :-) Nice work. I'm curious about where you got the video, was that something you recorded, or got from somewhere? I don't really work with video, but I'm sure I can find something useful for it in the future.
  - 13y ago
deleted 13y ago
[deleted]
itmard 13y ago
awesome , my standard of thinking about web has really changed!
aristus 13y ago
Did you know your library name is an adjective?
- _pius 13y ago
  Seriously? It's an adverb.
beatak 13y ago
Isn't this an old news? I feel like I saw this page in last year?
KerrickStaley 13y ago
Please cite the song on the page.
thebadplus 13y ago
badass code. badass music.
imsky 13y ago
This is more than a year old. It was featured on Badass JS in January 2012. http://badassjs.com/post/16583192105/seriously-js-a-realtime-node-based-video-compositor http://badassjs.com/post/16583192105/seriously-js-a-realtime...
devongovett 13y ago
Article about this on badass javascript from over a year ago http://badassjs.com/post/16583192105/seriously-js-a-realtime-node-based-video-compositor http://badassjs.com/post/16583192105/seriously-js-a-realtime...
sirn 13y ago
This even works smoothly on my HTC One X (International) running Firefox Aurora with only occasional frame drop. Amazing.
kmm 13y ago
Impressive! It's really amazing to see how OpenGL can enrich the web if it's used right. A few years ago I'd never have guessed shaders could be used in a browser. I have little experience with Javascript projects, so can I ask why the name Seriously? Wouldn't a more descriptive name cover the contents? Also, why is the main source file 4K lines long? That's a little off-putting.
- brianchirls 13y ago
  Good questions. It's called Seriously for two reasons: 1) At some point, I had this idea that I would make all my Javascript libraries references to Homestar Runner. http://www.hrwiki.org/wiki/Seriously http://www.hrwiki.org/wiki/Seriously 2) "You can do that in a browser? Seriously?!" As for the file size, yeah you're right it's too big. I'm working on a grunt.js build script, and when that's done, I'll break the main file into smaller pieces so you can pick and choose which utilities and things you need to load. Right now, it has the color lookup table and noise shaders, among other things, which are not necessary for everybody.
  - hexasquid 13y ago
    I'm going to think of it whenever I see something like "You can't do anything serious with JavaScript"
    - kmm 13y ago
      To be honest, the real work is done on the graphics card.
notdrunkatall 13y ago
Cool stuff. Good song too.
blindhippo 13y ago
Doesn't work with Ghostery enabled. Don't see why it shouldn't work with twitter/google analytics blocked...
- joshschreuder 13y ago
  It works for me with Ghostery enabled (and blocking both the Twitter and Google Analytics). I'd say there's something else at play.
- brianchirls 13y ago
  Is there a console error?
  - blindhippo 13y ago
    "Uncaught Unknown source type seriously.js:2727" Soon as I turn Ghostery off it works fine. This is in Chrome 27.0.1453.110
    - brianchirls 13y ago
      Works fine for me with Ghostery. For some reason, it looks like videojs is falling back to EMBED tag for some people. Will investigate.
Groxx 13y ago
Note that this has been around since 2011, though with changes (still seriously cool, of course): http://web.archive.org/web/20111112185437/http://seriouslyjs.org/ http://web.archive.org/web/20111112185437/http://seriouslyjs... Seriously. JS has been this amazing for a while. See also this demo from 2010: http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/ http://www.craftymind.com/2010/04/20/blowing-up-html5-video-...
nsxwolf 13y ago
What am I missing? I saw a music video.
- xauronx 13y ago
  What kind of person sees buttons and doesn't click them? You monster ;)
mmcclure 13y ago
Is it just me, or is this the perfect use case for Insert Me Anywhere? http://insertmeanywhere.biz/#/home http://insertmeanywhere.biz/#/home
tqs 13y ago
The technology used here to do the image processing is GLSL, in particular fragment shaders (aka pixel shaders). GLSL is a very small C-like language that's become a standard for GPUs. GLSL code gets sent (as a string) to the GPU by javascript via the WebGL API. Seriously is a JS library for handling the boilerplate of WebGL, composing and compositing multiple shaders in a pipeline/graph, and adjusting their parameters. In addition it comes with a bunch of pre-written shaders. Shaders themselves are a lot of fun to write, IMO. A pixel shader is just a function that computes a color given an input pixel location. (A shader can also take in additional input such as "textures" to sample from, e.g. a video frame.) The shader is run with massive parallelization in the GPU. In theory every pixel can be processed simultaneously. This is how these effects can run in real time. Here are some more examples of what you can do with pixel shaders (including sampling from the webcam in the browser -- should work in Chrome and FF), http://pixelshaders.com/examples/ http://pixelshaders.com/examples/ I'm in the process of writing an interactive book about pixel shaders, http://pixelshaders.com/ http://pixelshaders.com/
- spyder 13y ago
  https://www.shadertoy.com/browse https://www.shadertoy.com/browse (WARNING: it can freeze your browser)
  - BHSPitMonkey 13y ago
    Whose idea was it to actually run all those shaders at once? I guess someone just didn't want to store and host some thumbnails?
olalonde 13y ago
I know next to nothing about graphics programming but how does this work? I don't suppose there is a Javascript loop that goes through all the pixels on each frame...
- brianchirls 13y ago
  Nope. That would be too slow. I tried that a couple years ago before writing Seriously.js, and the big problem was copying around the memory. You have to first draw the video to a canvas, then you have to extract the pixel array from the canvas, loop through all the pixels and then draw the pixels back to the canvas. Now, for a high-definition video at 4 bytes per pixel (RGBA), you're looking at about 3.5MB of memory for each copy. And on top of that, it has to allocate and garbage collect that 3.5M pixel array for every frame, because it doesn't let you copy into an existing array. If you look at the first video-processing canvas demos, they tend to be pretty small, and this is why. Instead, this uses WebGL/OpenGL. So the pixels are copied once from the video directly into the GPU memory, and they are processed in parallel there before going straight to your screen. Much, MUCH faster.
  - olalonde 13y ago
    Sorry for the dumb question but how does the GPU execute Javascript? Or is it done in a declarative language specific to the GPU?
    - slackito 13y ago
      The GPU doesn't execute Javascript. It runs small programs called "shaders", written in GLSL (the OpenGL shading language), which are compiled on the fly by the graphics driver to something that can be actually executed on the GPU.
  - franze 13y ago
    for small videos it's fast enough http://www.barbafan.de/html5video?video=tron http://www.barbafan.de/html5video?video=tron
  - 13y ago
dripton 13y ago
Doesn't work at all for me in Firefox 21.0 on amd64 Linux. Works in Chromium 25 on the same box. This is particularly disappointing because there's a Mozilla logo on the page.
- shardling 13y ago
  It works fine in FF 24 on a mac.
  - dripton 13y ago
    That makes me happy; it means it'll probably work on my box too if I upgrade Firefox. (I'm using Ubuntu 12.04's default apt repository.)
brickmort 13y ago
this is AWESOME!
deepGem 13y ago
First thing in the morning, I wake up to see this. Made my day :). Awesome job.
cnlwsu 13y ago
Didn't really know what was I was looking at. Clicked a button. wtf-in-js-mind-blown Great job!
Sami_Lehtinen 13y ago
Crashes my browser in seconds. Nice exploit.
Pherdnut 13y ago
If only we had static types, we could do something like this with JavaScript.
o0-0o 13y ago
Anyone want to take a stab at overlaying youtube vids with this?
rilut 13y ago
What is the name of this song? What a good song
franze 13y ago
i did something like this (ok, not as smooth but it goes in the same direction) in 2010 with canvas/video/css http://www.barbafan.de/html5video?video=tron http://www.barbafan.de/html5video?video=tron (was covered by boingboing at that time, lots of traffic, some partnership opportunities (mostly from p_rn sites), some job offers, non any interesting)) cool that somebody now packs a similar idea into a lib, will definitely check it out.
riffraff 13y ago
FYI, I get nothing cool other than a blank area, and I see this in the console logs: Uncaught Not a valid HTML element: EMBED (must be img, video or canvas) seriously.js:2634 Chrome on osx: https://aboutmybrowser.com/T1fotBeR https://aboutmybrowser.com/T1fotBeR
aaren 13y ago
'by the sea' crashed my x server! CentOS 5.9 / Firefox 17.0.6
pagekicker 13y ago
What is the point of this?

643 points by Aissen 13y ago

oneye 13y ago

> A real-time, node-based video effects compositor for the web built with HTML5, Javascript and WebGL I for one am really impressed. While I'm not up to date with node.js, WebGL (or even HTML5 tbh), the boundaries that people keep pushing with web technologies is pretty wild. EDIT: Reading more, I'm not sure if I am proud or embarrassed about my narrow focus over the last few years. I'm proud that I'm making a good living due to it, but disappointed that I haven't been able play with these things. Reading about WebGL [1], I feel like there is a new world to explore (for web programming). [1] http://en.wikipedia.org/wiki/Webgl http://en.wikipedia.org/wiki/Webgl

Cyranix 13y ago
Also note that "node-based" does not refer to node.js as per the FAQ: https://github.com/brianchirls/Seriously.js/wiki/Frequently-Asked-Questions#does-this-have-anything-to-do-with-nodejs https://github.com/brianchirls/Seriously.js/wiki/Frequently-...
- oneye 13y ago
  I completely missed that. Thank you!

gopalv 13y ago

You know it's Serious when "TV Glitch" is available as a feature.

brianchirls 13y ago
"TV Glitch" is the Page Curl of the 2010's

whadar 13y ago

Now that's cool! Closest thing I've ever seen to fulfill the "instagram for video" prophecy

ErikAugust 13y ago
:::Takes week off to spin up an Instavideo demo:::
beggi 13y ago
Isn't the green screen kind of required?
- epoxyhockey 13y ago
  Perhaps something like this could be done: http://clippingmagic.com/ http://clippingmagic.com/ (discussion: https://news.ycombinator.com/item?id=5682831 https://news.ycombinator.com/item?id=5682831)
  - brianchirls 13y ago
    Something similar to that is possible for video. For example: http://www.youtube.com/watch?v=rGMqXBvYxog http://www.youtube.com/watch?v=rGMqXBvYxog I'm working on porting this over to Seriously.js so it should run in the GPU, hopefully pretty fast. The first crack at it was not so good, and now I'm experimenting with some new features that are only in Chrome nightly builds at the moment (and buggy at that). So look for this in the next 3-6 months.
- evan_ 13y ago
  the real-time-filtering would still be cool without replacing the background.

mshron 13y ago

Finally a demo that doesn't make me think "Wow, the web has really caught up to the 1995 desktop!" Maybe if you're already an after-effects wiz this doesn't seem as magical, but it certainly felt like magic to me.

tyleregeto 13y ago
I've clocked many hours into After Effects, but seeing this in a browser and _interactive_ is amazing. Never would I have thought that JS and browsers would progress so much in such a short period of time.
- smackfu 13y ago
  OTOH, it's mainly possible because computers are faster so Javascript isn't a slow language anymore, and the document model is just getting out of the way and letting you manipulate pixels directly.
  - kmm 13y ago
    This isn't manipulating the pixels directly. Javascript is still way too slow to do that, and I don't think that will ever change. The real work is done by the graphics card. The Javascript only uploads a frame to the graphics card, makes it run a shader and then displays the adapted frame.
- kaffiene 13y ago
  WebGL is doing the heavy lifting.
- DanielRibeiro 13y ago
  People have been doing some pretty amazing things with WebGL lately: http://metaphysicaldeveloper.wordpress.com/2013/04/23/webgl-breaking-into-the-real-world/ http://metaphysicaldeveloper.wordpress.com/2013/04/23/webgl-...
garysweaver 13y ago
The best part to me was that it was actually a pretty good music video, and the interactivity adds to it.

michaelmior 13y ago

Seriously did nothing for me. Uncaught Not a valid HTML element: EMBED (must be img, video or canvas)

hayksaakian 13y ago
same here, I just heard some audio Uncaught Unknown source type seriously.js:2727
krapp 13y ago
me either, except the music played, that's it. i assume since no one else has mentioned this that it's just me: http://i.imgur.com/TdQCpsR.jpg http://i.imgur.com/TdQCpsR.jpg
brianchirls 13y ago
It sounds like you may have a browser addon that's creating an EMBED element as a fallback because the browser can't play the video itself. If that's not the case, do you mind writing a bug issue on github with your browser details? https://github.com/brianchirls/Seriously.js/issues https://github.com/brianchirls/Seriously.js/issues Thanks
- skeletonjelly 13y ago
  @michaelmior you can use this to help identify your browser: https://aboutmybrowser.com/ https://aboutmybrowser.com/
- michaelmior 13y ago
  Running the latest Chrome on Mac OS X. (btw, realized my initial comment probably came off a little snarky. My apologies. From the sounds of the other comments, it's something incredibly cool!)
  - brianchirls 13y ago
    That's pretty weird. Is it possible you have a browser extension that's replacing the video tag with an EMBED?

lewisflude 13y ago

Is that OK GO?

underwater 13y ago
It's the raw video from http://www.youtube.com/watch?v=12zJw9varYE http://www.youtube.com/watch?v=12zJw9varYE. The real film clip features a really neat Windows 98-like green screen effect.

deleted 13y ago

[deleted]

saejox 13y ago

TypeError: video is null @ http://seriouslyjs.org/js/script.js:226 http://seriouslyjs.org/js/script.js:226 Firefox 21.0

graue 13y ago
Yeah, I got the same. Do you have Flashblock? Try whitelisting seriouslyjs.org and reloading. Fixed it for me on Fx 23.0a2. (Note: This comment was originally complaining that the link didn't work in Firefox; edited when I found the cause.)
- corin_ 13y ago
  Not for me, but given it has a Mozilla logo and credits them for "support" I would assume it does for some.

fowkswe 13y ago

What's the awesome song?

brianchirls 13y ago
This is "WTF" by OK Go. Back in 2010 they posted the raw greenscreen footage for people to remix. http://okgo.net/2010/01/20/wtf-video-remix-project/ http://okgo.net/2010/01/20/wtf-video-remix-project/

hawkharris 13y ago

This is incredible.

pacomerh 13y ago

Nice song also.

wwweston 13y ago

OK, but I think they should have written it in Go.

Vecrios 13y ago
Curious, why would you think so?
- Timothee 13y ago
  The video is of the band OK Go.
  - Vecrios 13y ago
    You never know.
vanderZwan 13y ago
For a second I thought you were being snarky about Go. Then the penny dropped.
benihana 13y ago
I see what you did there.

hidden-markov 13y ago

Seriously? That's just wow.

randall 13y ago

This is the sort of thing we're working on at Vidpresso. If this impresses you, and you want to build stuff like this... we should be friends. Contact info is in my profile.

aantix 13y ago
We should be friends. Love the concept of Vidpresso; I woud have liked to try a demo but it required me filling out a form. :(
- randall 13y ago
  That's what I'm coding right now! :) We're reworking our marketing site.
kingkool68 13y ago
We're already friends. Hi Randall!
- randall 13y ago
  Yo RH! :) So do you do rails or still just frontend stuff? And do you do like angular / other JS frameworks?
  - kingkool68 13y ago
    I'm a full-stack developer doing HTML/CSS/JavaScript/jQuery/PHP/WordPress/MySQL/Sysadmin stuff for pewresearch.org

beggi 13y ago

IN JS? This is so cool. Also: fun to compare the raw video to the original: http://www.youtube.com/watch?v=12zJw9varYE http://www.youtube.com/watch?v=12zJw9varYE :)

aantix 13y ago
How are they changing out the backgrounds in the tech demo? I was expecting the original to be a green screen background...
- zlapper 13y ago
  Click in the Raw button, you will see the green background :)
- deleted 13y ago
  [deleted]
- BHSPitMonkey 13y ago
  "Original" meaning the original finished released music video from 2009. The band released the raw green-screen footage later for remixing.
  - lessnonymous 13y ago
    Respect for OK Go videos just went up a level. What an awesome idea!
moskie 13y ago
Would also be interesting to see if they could recreate the effect of the original video in JS also.
- JimJames 13y ago
  Isn't the algorithm just, filter out the greenscreen, for each remaining pixel draw it to the buffer, draw the buffer to the screen? That doesn't seem more complicated than the examples they showed.

crabasa 13y ago

This is pretty awesome, but it seems like OK Go has cornered the market on "cool web tech" demo music videos. Doesn't anybody remember their collaboration with Google? http://allisnotlo.st http://allisnotlo.st I fully expect them to do something with Microsoft for IE11 to complete the cycle.

abstractbill 13y ago
OK Go has cornered the market on "cool web tech" demo music videos. Actually there have been some other very nice ones recently: http://donottouch.org/ http://donottouch.org/ http://lights.elliegoulding.com/ http://lights.elliegoulding.com/
krrrh 13y ago
Don't forget about Yung Jake! http://e.m-bed.de/ http://e.m-bed.de/ (seems to work best in Safari for me ymmv)
alanh 13y ago
Don’t forget the Arcade Fire! http://www.chromeexperiments.com/arcadefire/ http://www.chromeexperiments.com/arcadefire/

Tomdarkness 13y ago

I'm confused, is the green screen suppose to be intentionally bad? It not only removes the background but most of the people as well. Edit: Here is what it looks like for me: http://i.imgur.com/8wflg8Q.jpg http://i.imgur.com/8wflg8Q.jpg in both Firefox 21 and Chrome 29+27

brianchirls 13y ago
No, it is definitely not supposed to look like that. Here's what it looks like for me: https://s3.amazonaws.com/uploads.hipchat.com/23744/150541/nkgq5tafynykawi/upload.png https://s3.amazonaws.com/uploads.hipchat.com/23744/150541/nk... Do you mind sharing your video card info and operating system? It will be hard to debug remotely, but I'll see what I can dig up. Please post it here or on github: https://github.com/brianchirls/Seriously.js/issues https://github.com/brianchirls/Seriously.js/issues Thanks
lnanek2 13y ago
Working fine on 27.0.1453.93 on OSX here. Although the pictures seem to have been changed. There's only one person's face on the left on mine.
- graywh 13y ago
  Picture? It's a video.

joezydeco 13y ago

Wow, I've never seen all 4 cores in my machine simultaneously spin up to 90% before. Nice trick.

atwebb 13y ago
You must be a better programmer than me.
- chacham15 13y ago
  If you write single threaded applications you cant go above 1 core and so will never hit this mark :)
  - astrodust 13y ago
    fork disagrees.
    - gnaritas 13y ago
      As does pipe.
      - knome 13y ago
        Rapidly cycling the processor affinity tries its best.
        gnaritas 13y ago
        Say what?
  - atwebb 13y ago
    It was weird timing because I was working on a multi-threaded application that was murdering my server (expected) when I made the comment.
Tomdarkness 13y ago

danielweber 13y ago

"Sadly, we are unable to get Seriously.js to work on your computer. Sometimes WebGL gets a bit weird with certain graphics hardware and drivers. Please have a look here for more information."

fierycatnet 13y ago
Same here. Could it be because I am running Linux?
- matchu 13y ago
  I got it working in Linux on Firefox. Chrome didn't work, though.
- WatchDog 13y ago
  Working on Ubuntu 12.04 Firefox 21 and Chrome 27, AMD drivers.
- aceperry 13y ago
  Works for me on Ubuntu 13.04, Chrome 28(beta), Firefox 21, using Nvidia drivers.
- thefreeman 13y ago
  you just need to enable it. it is disabled by default for most Linux OS / video card combos
Flimm 13y ago
It failed here, but without an error message. I can only see the first frame.
mindcrime 13y ago
"Sadly, we are unable to get Seriously.js to work on your computer. Sometimes WebGL gets a bit weird with certain graphics hardware and drivers. Please have a look here for more information." Yeah, same here, running Ubuntu on a Dell Precision laptop. Guess WebGL doesn't like my setup.

sublimit 13y ago

Whoa, this caused the second BSOD I've seen since Windows 98. When I started messing with the options, the windows just flashed wildly for a while, some popup about ATI Radeon driver errors was struggling to spring to existence, and then everything froze.

suyash 13y ago

End of TV!

gersonaya 13y ago

Damn nice.

brianchirls 13y ago

Hi, I'm the person responsible for/guilty of this. Thanks for the comments, everyone. My sympathies for the BSOD. Please keep the bug reports and questions coming. I'll try to fix/answer what I can.

johncoogan 13y ago
This is awesome! I can't wait to see the mashups that spring forth from this (and hopefully make one or two myself). There will definitely be something really creative soon. Thanks for doing so much legwork on this.
gojomo 13y ago
Does it now or might it soon work with live video from the local camera?
- brianchirls 13y ago
  Yup. You can see a live video demo with a sample of some of the effects: http://brianchirls.github.io/Seriously.js/ http://brianchirls.github.io/Seriously.js/ Although, both Firefox and Chrome have been a bit buggy for me with getUserMedia. Try the Ascii Text effect.
  - gojomo 13y ago
    Cool, thanks! Couldn't get it to work in FF (Mac/22.0) - it asked for camera permission, camera activity light went on, but no images and constant re-prompts for permission. But, worked quite well in Chrome (Mac/27.0.1453.93).
aceperry 13y ago
You... you're the one! :-) Nice work. I'm curious about where you got the video, was that something you recorded, or got from somewhere? I don't really work with video, but I'm sure I can find something useful for it in the future.
- 13y ago

deleted 13y ago

[deleted]

itmard 13y ago

awesome , my standard of thinking about web has really changed!

aristus 13y ago

Did you know your library name is an adjective?

_pius 13y ago
Seriously? It's an adverb.

beatak 13y ago

Isn't this an old news? I feel like I saw this page in last year?

KerrickStaley 13y ago

Please cite the song on the page.

thebadplus 13y ago

badass code. badass music.

imsky 13y ago

This is more than a year old. It was featured on Badass JS in January 2012. http://badassjs.com/post/16583192105/seriously-js-a-realtime-node-based-video-compositor http://badassjs.com/post/16583192105/seriously-js-a-realtime...

devongovett 13y ago

Article about this on badass javascript from over a year ago http://badassjs.com/post/16583192105/seriously-js-a-realtime-node-based-video-compositor http://badassjs.com/post/16583192105/seriously-js-a-realtime...

sirn 13y ago

This even works smoothly on my HTC One X (International) running Firefox Aurora with only occasional frame drop. Amazing.

kmm 13y ago

Impressive! It's really amazing to see how OpenGL can enrich the web if it's used right. A few years ago I'd never have guessed shaders could be used in a browser. I have little experience with Javascript projects, so can I ask why the name Seriously? Wouldn't a more descriptive name cover the contents? Also, why is the main source file 4K lines long? That's a little off-putting.

brianchirls 13y ago
Good questions. It's called Seriously for two reasons: 1) At some point, I had this idea that I would make all my Javascript libraries references to Homestar Runner. http://www.hrwiki.org/wiki/Seriously http://www.hrwiki.org/wiki/Seriously 2) "You can do that in a browser? Seriously?!" As for the file size, yeah you're right it's too big. I'm working on a grunt.js build script, and when that's done, I'll break the main file into smaller pieces so you can pick and choose which utilities and things you need to load. Right now, it has the color lookup table and noise shaders, among other things, which are not necessary for everybody.
- hexasquid 13y ago
  I'm going to think of it whenever I see something like "You can't do anything serious with JavaScript"
  - kmm 13y ago
    To be honest, the real work is done on the graphics card.

notdrunkatall 13y ago

Cool stuff. Good song too.

blindhippo 13y ago

Doesn't work with Ghostery enabled. Don't see why it shouldn't work with twitter/google analytics blocked...

joshschreuder 13y ago
It works for me with Ghostery enabled (and blocking both the Twitter and Google Analytics). I'd say there's something else at play.
brianchirls 13y ago
Is there a console error?
- blindhippo 13y ago
  "Uncaught Unknown source type seriously.js:2727" Soon as I turn Ghostery off it works fine. This is in Chrome 27.0.1453.110
  - brianchirls 13y ago
    Works fine for me with Ghostery. For some reason, it looks like videojs is falling back to EMBED tag for some people. Will investigate.

Groxx 13y ago

Note that this has been around since 2011, though with changes (still seriously cool, of course): http://web.archive.org/web/20111112185437/http://seriouslyjs.org/ http://web.archive.org/web/20111112185437/http://seriouslyjs... Seriously. JS has been this amazing for a while. See also this demo from 2010: http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/ http://www.craftymind.com/2010/04/20/blowing-up-html5-video-...

nsxwolf 13y ago

What am I missing? I saw a music video.

xauronx 13y ago
What kind of person sees buttons and doesn't click them? You monster ;)

mmcclure 13y ago

Is it just me, or is this the perfect use case for Insert Me Anywhere? http://insertmeanywhere.biz/#/home http://insertmeanywhere.biz/#/home

tqs 13y ago

The technology used here to do the image processing is GLSL, in particular fragment shaders (aka pixel shaders). GLSL is a very small C-like language that's become a standard for GPUs. GLSL code gets sent (as a string) to the GPU by javascript via the WebGL API. Seriously is a JS library for handling the boilerplate of WebGL, composing and compositing multiple shaders in a pipeline/graph, and adjusting their parameters. In addition it comes with a bunch of pre-written shaders. Shaders themselves are a lot of fun to write, IMO. A pixel shader is just a function that computes a color given an input pixel location. (A shader can also take in additional input such as "textures" to sample from, e.g. a video frame.) The shader is run with massive parallelization in the GPU. In theory every pixel can be processed simultaneously. This is how these effects can run in real time. Here are some more examples of what you can do with pixel shaders (including sampling from the webcam in the browser -- should work in Chrome and FF), http://pixelshaders.com/examples/ http://pixelshaders.com/examples/ I'm in the process of writing an interactive book about pixel shaders, http://pixelshaders.com/ http://pixelshaders.com/

spyder 13y ago
https://www.shadertoy.com/browse https://www.shadertoy.com/browse (WARNING: it can freeze your browser)
- BHSPitMonkey 13y ago
  Whose idea was it to actually run all those shaders at once? I guess someone just didn't want to store and host some thumbnails?

olalonde 13y ago

I know next to nothing about graphics programming but how does this work? I don't suppose there is a Javascript loop that goes through all the pixels on each frame...

brianchirls 13y ago
Nope. That would be too slow. I tried that a couple years ago before writing Seriously.js, and the big problem was copying around the memory. You have to first draw the video to a canvas, then you have to extract the pixel array from the canvas, loop through all the pixels and then draw the pixels back to the canvas. Now, for a high-definition video at 4 bytes per pixel (RGBA), you're looking at about 3.5MB of memory for each copy. And on top of that, it has to allocate and garbage collect that 3.5M pixel array for every frame, because it doesn't let you copy into an existing array. If you look at the first video-processing canvas demos, they tend to be pretty small, and this is why. Instead, this uses WebGL/OpenGL. So the pixels are copied once from the video directly into the GPU memory, and they are processed in parallel there before going straight to your screen. Much, MUCH faster.
- olalonde 13y ago
  Sorry for the dumb question but how does the GPU execute Javascript? Or is it done in a declarative language specific to the GPU?
  - slackito 13y ago
    The GPU doesn't execute Javascript. It runs small programs called "shaders", written in GLSL (the OpenGL shading language), which are compiled on the fly by the graphics driver to something that can be actually executed on the GPU.
- franze 13y ago
  for small videos it's fast enough http://www.barbafan.de/html5video?video=tron http://www.barbafan.de/html5video?video=tron
- 13y ago

dripton 13y ago

Doesn't work at all for me in Firefox 21.0 on amd64 Linux. Works in Chromium 25 on the same box. This is particularly disappointing because there's a Mozilla logo on the page.

shardling 13y ago
It works fine in FF 24 on a mac.
- dripton 13y ago
  That makes me happy; it means it'll probably work on my box too if I upgrade Firefox. (I'm using Ubuntu 12.04's default apt repository.)

brickmort 13y ago

this is AWESOME!

deepGem 13y ago

First thing in the morning, I wake up to see this. Made my day :). Awesome job.

cnlwsu 13y ago

Didn't really know what was I was looking at. Clicked a button. wtf-in-js-mind-blown Great job!

Sami_Lehtinen 13y ago

Crashes my browser in seconds. Nice exploit.

Pherdnut 13y ago

If only we had static types, we could do something like this with JavaScript.

o0-0o 13y ago

Anyone want to take a stab at overlaying youtube vids with this?

rilut 13y ago

What is the name of this song? What a good song

franze 13y ago

i did something like this (ok, not as smooth but it goes in the same direction) in 2010 with canvas/video/css http://www.barbafan.de/html5video?video=tron http://www.barbafan.de/html5video?video=tron (was covered by boingboing at that time, lots of traffic, some partnership opportunities (mostly from p_rn sites), some job offers, non any interesting)) cool that somebody now packs a similar idea into a lib, will definitely check it out.

riffraff 13y ago

FYI, I get nothing cool other than a blank area, and I see this in the console logs: Uncaught Not a valid HTML element: EMBED (must be img, video or canvas) seriously.js:2634 Chrome on osx: https://aboutmybrowser.com/T1fotBeR https://aboutmybrowser.com/T1fotBeR

aaren 13y ago

'by the sea' crashed my x server! CentOS 5.9 / Firefox 17.0.6

pagekicker 13y ago

What is the point of this?