Please keep the bug reports and questions coming. I'll try to fix/answer what I can.
Although, both Firefox and Chrome have been a bit buggy for me with getUserMedia.
Try the Ascii Text effect.
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).
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.
I kinda wish it was at a higher bit-rate. There are some jaggies at the edges of the hair and stuff that I had to cover up by tinting the color of the video.
Maybe if you're already an after-effects wiz this doesn't seem as magical, but it certainly felt like magic to me.
It was filmed on a green screen for a different effect: Frame layering.
They're famous for quirky video clips (original for this song is at http://youtu.be/12zJw9varYE). You should watch http://youtu.be/qybUFnY7Y8w . You'll like it. Trust me.
Incidentally, you really aught to see how they make music with a car... http://www.youtube.com/watch?v=MejbOFk7H6c
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),
I'm in the process of writing an interactive book about pixel shaders,
That doesn't seem more complicated than the examples they showed.
"Would also be interesting" and "fun to compare" give no implication of relative difficulty. I would like to see the algorithm though so please post the code if you get it working in JS! That would be awesome!
It's full of lots of (mostly green) noise because the demo's chroma key algorithm/parameters aren't that good, but it was fun to do!
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 , I feel like there is a new world to explore (for web programming).
Yeah, same here, running Ubuntu on a Dell Precision laptop. Guess WebGL doesn't like my setup.
(or something like that)
You should see some lines that start with "Exec" where you can add that parameter to the end.
override software rendering list
1. Visiting chrome://flags
2. Scrolling down to Disable WebGL, hitting "Enable", and then "Relaunch now"
3. Repeating steps 1 and 2, but hitting "Disable" rather than "Enable".
It's called Seriously for two reasons:
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.
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-...
Core 2 Quad Q9950 and an nVidia Geforce 8800 GT 512MB.
After the peaks when it is flat at around 3% is when it is playing.
As for 80%, umm... video driver issues? :-(
Interestingly, just switching from the demo tab to this HN tab (FF 21 on Ubuntu) drops the cores to the 10% range. They jump again when I switch back.
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.
I fully expect them to do something with Microsoft for IE11 to complete the cycle.
Actually there have been some other very nice ones recently:
Uncaught Not a valid HTML element: EMBED (must be img, video or canvas)
If that's not the case, do you mind writing a bug issue on github with your browser details?
i assume since no one else has mentioned this that it's just me: http://i.imgur.com/TdQCpsR.jpg
Uncaught Unknown source type seriously.js:2727
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.
Edit: Here is what it looks like for me: http://i.imgur.com/8wflg8Q.jpg in both Firefox 21 and Chrome 29+27
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
Uncaught Not a valid HTML element: EMBED (must be img, video or canvas) seriously.js:2634
Chrome on osx: https://aboutmybrowser.com/T1fotBeR
cool that somebody now packs a similar idea into a lib, will definitely check it out.
(Note: This comment was originally complaining that the link didn't work in Firefox; edited when I found the cause.)
Soon as I turn Ghostery off it works fine. This is in Chrome 27.0.1453.110
CentOS 5.9 / Firefox 17.0.6