-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
187 lines (141 loc) · 10 KB
/
index.html
File metadata and controls
187 lines (141 loc) · 10 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html>
<head>
<title>Green screening with WebRTC</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>Hollywood and Green Screening</h1>
<div class="impact">
<p>Question: Why green screening?</p>
<p>Answer: to make movies like Hollywood!</p>
<p>(And much much more!!!)</p>
</div>
<p><a href="https://vimeo.com/70304814">Hollywood's History of Faking It | The Evolution of Greenscreen Compositing</a><br/>from <a href="https://vimeo.com/filmmakeriq">FilmmakerIQ.com</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
<iframe class="hollywood" src="https://player.vimeo.com/video/70304814" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>Wikipedia calls it <a href="https://en.wikipedia.org/wiki/Chroma_key">Chroma Key</a></p>
<h2>Green Screen: Before and After</h2>
<p>Source from <a href="www.complex.com/pop-culture/2015/04/green-screen-scenes-in-famous-movies-and-tv-shows/">Complex.com</a></p>
<h3>The Hobbit</h3>
<img src="img/hobbit.jpg">
<h3>The Avengers</h3>
<img src="img/avengers.jpg">
<h3>Life of Pi</h3>
<img src="img/life-of-pi.jpg">
<h1>Open Standards Web Technologies: video, canvas, webrtc</h1>
<p>Hollywood invested millions of dollars to produce green screening technologies. Now with open web standards like HTML5 video, HTML5 canvas and WebRTC, you can do it at home at a much steeper discount.</p>
<h2>Real-time video processing using HTML5 <video> and <canvas></h2>
<p>
Adobe Flash has been the standard for streaming video content to the browser. However, since the popularization of Apple products like the iphone and ipad, Flash has been out of favor. HTML5 video offers an open standard alternative to Flash with far richer web interactive experiences. Back in the good old days of Ajaxian, I used to follow some fun examples using <a href="http://ajaxian.com/by/topic/video-topic">html5 video</a>.
<ul>
<li><a href="http://www.barbafan.de/html5video?video=tron">HTML5 Tron video</a></li>
<li><a href="http://www.barbafan.de/html5video">Old Spice</a></li>
<li><a href="http://media.chikuyonok.ru/ambilight/">Ambilight</a></li>
<li><a href="http://craftymind.com/factory/html5video/CanvasVideo.html">Blow up</a></li>
<li><a href="http://seriouslyjs.com/">Seriously.js</a></li>
</ul>
</p>
<p>Ambilight was inspired by <a href="http://www.ambilightplayer.philips.com/">Philips's ambilight player</a>. Chikuyonok has a <a href="http://chikuyonok.ru/2010/03/ambilight-video/">blog post in Russian</a></p>
<p>Craftymind has a blog post describing the <a href="http://www.craftymind.com/blowing-up-html5-video-and-mapping-it-into-3d-space/">Blow Up</a></p>
<h2>Real-time video processing: How it works</h2>
<img src="video-processing.jpg">
<ul>
<li>
When playing a video using the HTML5 <video> tag, we grab a video frame every 33 milliseconds (so that we can grab 30 frames per second) as described in <a href="http://www.html5rocks.com/en/tutorials/video/basics/">HTML5rocks</a>
</li>
<li>
We pass the video frame content to an intermediate HTML5 canvas for further image processing (similar canvas filters like <a href="http://joelb.me/jsmanipulate/">JSManipulate</a>)
</li>
<li>
Then we output the intermediate canvas to the final output canvas, which is the only element that's visible to the user (the original video source and the intermediate canvas are not visible to the user)
</li>
<li>
Most of the examples are very dated and use a setTimeout() at 33 milliseconds. SeriouslyJS is the only one using the more modern requestAnimationFrame(). The recommended way is to use requestAnimationFrame() or <a href="http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/">Paul Irish's shim</a>.
</li>
</ul>
<p>
All the examples are using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">canvas 2D</a> with the exception of Seriously, which is using the <a href="https://dev.opera.com/articles/introduction-to-webgl-part-1/">3D/WebGL</a> 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.
</p>
<h2>WebRTC: Media Capture API - getUserMedia()</h2>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a> 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></p>
<p>Mozilla has a great <a href="http://mdn-samples.mozilla.org/s/webrtc-capturestill/">example on how to capture still photos</a></p>
<p>The same code has been copied to a <a href="http://jsfiddle.net/ggmc9xz7/">jsfiddle</a> and
<a href="http://jsfiddle.net/sztbLqsz/">refactored</a> a reusable <a href="https://github.com/pedroha/seriously-camera/blob/master/js/camera.js">initCamera()</a></p>
<h2>Green Screening using WebRTC</h2>
<p>
Combining <a href="https://github.com/brianchirls/Seriously.js">Seriously</a>'s Green Screening and video capture using WebRTC, we get:
</p>
<p>
<a href="http://pedroha.github.io/seriously-camera/">http://pedroha.github.io/seriously-camera/</a>
</p>
<p>
All we need is to hijack the source of the <video> tag to the web camera using initCamera()
</p>
<h1>How to setup Green Screening on the cheap</h1>
<p>
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:
<ul>
<li>
$20 <a href="http://www.amazon.com/gp/product/B004EKAJ1M">Prism Backdrops 6x10' Chromakey Green Muslin Photo Video Backdrop Background</a>
</li>
<li>
$40 <a href="http://www.amazon.com/gp/product/B00L5TGT82">StudioPRO SPK10-051 Product Photography Table Top Photo Studio Lighting Kit (Black)</a>
</li>
</ul>
</p>
<p>
The setup with the green backdrop and one source of light worked very well at the Hack & Tell meetup, where we had a dark room with a projector screen on the wall. However, this setup didn't work that well at the New York Times Open Source Science Fair. In this context, we had a large exhibition space with normal lights. The green backdrop wasn't captured very well. In this case, we used a large bright green paper on top of the green backdrop. This produced a much better contrast and helped with a better defined green screen effect.
</p>
<p>
If I had to repeat the same demo in a public context, I'd use multiple bright green sheets. They don't need as much lightning as the darker green backdrop. The one I used came as part of a multiple large colored sheets at a Staples. Wallmart seems to have specific sheets of neon green but I'm not near any Wallmart. With some bright green tape, it will be easier to setup larger backgrounds in open spaces where we don't have much control of the lightning conditions.
</p>
<p>Checkout the following useful tips for setting up a great physical environment for green screening. The real key is in the lightning (and avoidance of shadows)</p>
<h3>How to make a Really Cheap Green Screen</h3>
<iframe width="420" height="315" src="https://www.youtube.com/embed/h8fE_1SpEWY" frameborder="0" allowfullscreen></iframe>
<h3>How to Make a Green Screen Video</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Nvq6KoMCUo8" frameborder="0" allowfullscreen></iframe>
<h3>Green Screen Basics</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/oxjlKc8ms1c" frameborder="0" allowfullscreen></iframe>
<h1>Keep hacking HTML5 videos</h1>
<p>You can reuse the <a href="camera.js">camera.js</a> (initCamera) on the corresponding pages</p>
<ul>
<li>Tron: initCamera('#barbapapa');</li>
<li>Ambilight: initCamera('#example');</li>
<li>Blow up: initCamera('#sourcevid');</li>
<li>Seriously: initCamera('#video');</li>
</ul>
<h1>About this project</h1>
<p>
My name is Pedro Ha. I've been living in JS-land and front-end for the last 6 years. I worked on large-scale websites like bn.com and cnbc.com and lately on responsive mobile site, <a href="http://neighborhoodsquare.com">neighborhoodquare</a>. I enjoy exploring with generative art, animation effects, and immersive experiences. I have taught programming at <a href="http://www.scps.nyu.edu/">NYU</a>, <a href="http://www.fitnyc.edu/">FIT</a>, <a href="http://iridescentlearning.org/">Iridescent</a>, the <a href="http://www.theknowledgehouse.org/">Knowledge House</a>,
<a href="http://coderdojonyc.org">Coderdojo NYC</a>, and <a href="https://vimeo.com/122119110">Nano Hacker Squad</a> with great support from <a href="http://www.thoughtworks.com/">Thoughtworks</a>.
</p>
<p>
The bulk of the work for green screening is provided by the library <a href="http://seriouslyjs.com/">Seriously.js</a> by <a href="http://chirls.com/">Brian Chirls</a>. My contribution is mostly exposing the possibilities of this library for personal green screening by hacking with WebRTC. It was initially presented at my favorite meetup: <a href="http://www.meetup.com/hack-and-tell/">Hack & Tell meetup</a>. Later on, as I looked into Seriously.js, I found out that it supports web camera as well.
</p>
<p>
The project is hosted (for free!) using surge: <a href="http://greenscreen.surge.sh">http://greenscreen.surge.sh</a> and the source is at <a href="https://github.com/pedroha/greenscreen">github</a>
</p>
<p>
Green screening is dedicated to the loving memory of Susanita, Angelica and Michelle, who passed away in a car tragedy.
</p>
<p>
Contact: ph at educreational.com
</p>
<br/>
<br/>
<br/>
<br/>
</div> <!-- .container -->
<script>
var openLinksInASeparateWindow = function() {
// $('a[href]').attr('target', '_blank');
var anchors = document.getElementsByTagName('a');
for (var i = 0; i < anchors.length; i++) {
anchors[i].setAttribute('target', '_blank');
}
};
openLinksInASeparateWindow();
</script>
</body>
</html>