Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

adding the gum demos

commit ad6df8b6b3f421fb84182ed121fc496c5709c18a 1 parent 2d7926f
@remy authored
View
BIN  assets/remy-and-ellis2.mp4
Binary file not shown
View
BIN  assets/remy-and-ellis2.webm
Binary file not shown
View
20 demos.json
@@ -1,5 +1,25 @@
[
{
+ "desc": "Stream video and filter with canvas",
+ "url": "gum-canvas",
+ "tags": "getUserMedia canvas",
+ "support": {
+ "live": "",
+ "nightly": "chrome opera"
+ },
+ "test": "navigator.getUserMedia !== undefined"
+ },
+ {
+ "desc": "Stream video to the browser<br><small>Also works on Opera Mobile 12</small>",
+ "url": "gum",
+ "tags": "getUserMedia",
+ "support": {
+ "live": "",
+ "nightly": "chrome opera"
+ },
+ "test": "navigator.getUserMedia !== undefined"
+ },
+ {
"desc": "Drag and drop and XHR upload",
"url": "dnd-upload",
"tags": "file dnd xhr2",
View
50 demos/gum-canvas.html
@@ -1,15 +1,35 @@
<title>getUserMedia with canvas effects</title>
<style>
- #source { -webkit-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg); display: block; margin: 20px 0; max-width: 100%; }
- #strip { display: block; }
+ #gum {
+ background: #c00;
+ color: #fff;
+ padding: 10px;
+ }
+
+ /* I'm using CSS3 to translate the video on the X axis to give it a mirror effect */
+ #source {
+ display: block;
+ margin: 20px 0;
+ max-width: 100%;
+ }
+
+ .supported #source { -webkit-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg);
+ -o-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg);
+ -moz-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg);
+ -ms-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg);
+ transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg);
+ }
video, canvas { display: none; }
- input { width: 360px ;}
- output { display: inline-block; width: 16px; height: 16px; background: red; padding: 0; margin: 0;}
+ input { width: 360px; }
</style>
<article>
<label for="hue">Colour <input type="range" min="0" max="360" value="0" id="hue"></label> <output id="target"></output>
- <video autoplay></video>
+ <video id="video" muted loop autoplay>
+ <source src="/assets/remy-and-ellis2.mp4"></source>
+ <source src="/assets/remy-and-ellis2.webm"></source>
+ </video>
<canvas id="source"></canvas>
+ <p id="gum">getUserMeda either not supported or not allowed - so instead here's me and my son headbanging.</p>
</article>
<script>
var video = document.querySelector('video'),
@@ -63,11 +83,11 @@
tr = rgb[0];
tg = rgb[1];
tb = rgb[2];
- // console.log(brightness / 256);
};
function init() {
+ // from HTML5 Doctor article: http://html5doctor.com/getusermedia/
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia('video', successCallback, errorCallback);
@@ -89,12 +109,8 @@
}
video.addEventListener('loadedmetadata', function () {
- // output.canvas.width = ;
source.canvas.width = video.videoWidth;
- // output.canvas.height =
source.canvas.height = video.videoHeight;
- // source.canvas.height = height;
- // source.canvas.width = width;
draw();
});
@@ -107,18 +123,17 @@
brightness;
for (; i < pixels.data.length; i += 4) {
- // grey = r*.3 + g*.59 + b*.11;
+ // brightness code from Tab Atkins' canvas demos
brightness = ((3*pixels.data[i]+4*pixels.data[i+1]+pixels.data[i+2])>>>3) / 256;
pixels.data[i] = ((tr * brightness)+0.5)>>0;
pixels.data[i+1] = ((tg * brightness)+0.5)>>0
pixels.data[i+2] = ((tb * brightness)+0.5)>>0
- // pixels.data[i+2] = 0;
}
output.putImageData(pixels, 0, 0);
}
-// shim layer with setTimeout fallback
+// shim layer with setTimeout fallback - from Paul Irish
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
@@ -130,8 +145,15 @@
};
})();
+var article = video.parentNode,
+ gum = document.getElementById('gum');
+
+if (navigator.getUserMedia || navigator.webkitGetUserMedia) {
+ article.removeChild(gum);
+ article.className = 'supported';
+ init();
+}
-init();
</script>
</body>
</html>
View
33 demos/gum.html
@@ -1,24 +1,39 @@
-<title>getUserMedia</title>
+<title>getUserMedia streamed to a video element</title>
<style>
- video {
+ video {
+ max-width: 100%;
+ margin: 0;
+ }
+ .supported video {
+ /* I'm using CSS3 to translate the video on the X axis to give it a mirror effect */
-webkit-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg);
-o-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg);
-moz-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg);
-ms-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg);
transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg);
- max-width: 100%;
- margin: 0;
+ }
+ #gum {
+ background: #c00;
+ color: #fff;
+ padding: 10px;
}
</style>
<article>
- <video autoplay></video>
+ <video id="video" muted loop autoplay>
+ <source src="/assets/remy-and-ellis2.mp4"></source>
+ <source src="/assets/remy-and-ellis2.webm"></source>
+ </video>
+ <p id="gum">getUserMeda either not supported or not allowed - so instead here's me and my son headbanging.</p>
</article>
<script>
-var video = document.querySelector('video');
+var video = document.getElementById('video'),
+ article = video.parentNode,
+ gum = document.getElementById('gum');
function init() {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
if (navigator.getUserMedia) {
+ // NOTE: at time of writing March 26, 2012, audio isn't working in Chrome
navigator.getUserMedia('video', successCallback, errorCallback);
// Below is the latest syntax. Using the old syntax for the time being for backwards compatibility.
//navigator.getUserMedia({video: true}, successCallback, errorCallback);
@@ -37,5 +52,9 @@
}
}
-init();
+if (navigator.getUserMedia || navigator.webkitGetUserMedia) {
+ article.removeChild(gum);
+ article.className = 'supported';
+ init();
+}
</script>
View
1  demos/web-socket.html
@@ -72,7 +72,6 @@
'&' : '&amp;'
};
-
if (window.WebSocket === undefined) {
state.innerHTML = 'Sockets not supported';
state.className = 'fail';
Please sign in to comment.
Something went wrong with that request. Please try again.