Latest update for NYT Open Source Fair 3.0 (July 2015)
HTML5 <video> is the standard HTML5 tag for videos. The great majority of current web video is based on Flash players; however, Flash is not supported on iphones and ipads. The Flash players use the <embed> tag instead.
HTML <canvas> supports drawing operations in 2D and 3D/WebGL
Using HTML5 <video>, <canvas> and Javascript is possible to do real-time video processing.
All the examples actually use 2 <canvas> elements: one for intermediate pixel processing and one for the final output. These are all pretty 'dated' examples and came before requestAnimationFrame came out. They are all based on setTimeout() to every 33 milliseconds to achieve 30 frames per second. It would be make more sense to use requestAnimationFrame() nowadays or Paul Irish's shim
Ambilight was inspired by Philips's ambilight player. Chikuyonok has a blog post in Russian
Craftymind has a blog post describing the Blow Up
All the examples are using canvas 2D with the exception of Seriously, which is using the WebGL context from the <canvas> element to use WebGL shaders for the many different effects. Seriously is based on real-time green screening and using many different filters with a different image background.
WebRTC is a family of technologies to enable audio/video peer to peer direct communication through browsers. One of the related API's is the Media Capture API. Through the HTML5 <video> tag, it's possible to attach the web camera as the source of the <video>
Mozilla has a great example on how to capture still photos
The same code has been copied to a jsfiddle and refactored a reusable initCamera()
Combining Seriously's Green Screening and video capture using WebRTC, we get:
http://pedroha.github.io/seriously-camera/
All we need is to hijack the source of the <video> tag to the web camera using initCamera()
These are some great short informational videos to get green screening on the cheap (or go for the more professional approach at a reasonable price)
How to make green screen on the cheap
<iframe width="420" height="315" src="https://www.youtube.com/embed/h8fE_1SpEWY" frameborder="0" allowfullscreen></iframe>How to Make Green Screen Video
<iframe width="560" height="315" src="https://www.youtube.com/embed/Nvq6KoMCUo8" frameborder="0" allowfullscreen></iframe> <iframe width="560" height="315" src="https://www.youtube.com/embed/oxjlKc8ms1c" frameborder="0" allowfullscreen></iframe>In the past, I tried with flat green paper and it worked very well; though I wasn't able to cover all the background for a realistic compositing. This time, I wanted to try a little more professional setup, so I ordered by Amazon:
-
$20 Prism Backdrops 6x10' Chromakey Green Muslin Photo Video Backdrop Background
-
$40 StudioPRO SPK10-051 Product Photography Table Top Photo Studio Lighting Kit (Black)
Hollywood's History of Faking It | The Evolution of Greenscreen Compositing from FilmmakerIQ.com on Vimeo.
References:
- https://vimeo.com/70304814
- https://www.youtube.com/watch?v=H8aoUXjSfsI
- https://vimeo.com/filmmakeriq
- http://filmmakeriq.com/
We have a reusable initCamera() [Hint: use the web console]
- Tron: initCamera('#barbapapa')
- Ambilight: initCamera('#example');
- Blow up: initCamera('#sourcevid');
- Seriously: initCamera('#video');
Article on a simpler technique for green screening and webrtc https://timtaubert.de/blog/2012/10/building-a-live-green-screen-with-getusermedia-and-mediastreams/