Skip to content

Instantly share code, notes, and snippets.

@kiub

kiub/index.html

Created June 10, 2015 13:30
Show Gist options
  • Save kiub/311fcc5a14415aa2a406 to your computer and use it in GitHub Desktop.
Save kiub/311fcc5a14415aa2a406 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/gehitu
Raw
index.html
<html>
<head>
<script src="https://rawgithub.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="unprocessed" id="AutoprefixerIn">#output {
width: 307px;
height: 250px;
background: rgba(255,255,255,0.5);
border: 1px solid #ccc;
}
#screenshot-stream {
width: initial;
height: initial;
}
#screenshot {
vertical-align: top;
}
.blur {
filter: blur(3px);
}
.brightness {
filter: brightness(5);
}
.contrast {
filter: contrast(8);
}
.hue-rotate {
filter: hue-rotate(90deg);
}
.hue-rotate2 {
filter: hue-rotate(180deg);
}
.hue-rotate3 {
filter: hue-rotate(270deg);
}
.saturate {
filter: saturate(10);
}
.grayscale {
filter: grayscale(1);
}
.sepia {
filter: sepia(1);
}
.invert {
filter: invert(1)
}</style>
<style id="AutoprefixerOut"></style>
<script>
AutoprefixerSettings = ""; //Specify here the browsers you want to target or leave empty
document.getElementById("AutoprefixerOut").innerHTML = autoprefixer(AutoprefixerSettings || null).process(document.getElementById("AutoprefixerIn").innerHTML).css;
</script>
</head>
<body >
<h1>Example of CSS effects on a live video stream</h1>
Note that we used the <a href="https://github.com/postcss/autoprefixer">autoprefixer.js library</a> that adds automatically and when needed prefixes to the CSS properties.</p>
<p>
The JavaScript code is in the JavaScript Tab, CSS code in the CSS tab.
</p>
<p>
Click on the video to toggle the different effects.</p>
<video onclick="changeFilter(this);" width=400 height=400 id="video" controls autoplay></video>
<p>
<button onclick="startWebcam();">Start WebCam</button>
<button onclick="stopWebcam();">Stop WebCam</button>
</p>
<script id="jsbin-javascript">
//--------------------
// GET USER MEDIA CODE
//--------------------
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
var video;
var webcamStream;
function startWebcam() {
if (navigator.getUserMedia) {
navigator.getUserMedia (
// constraints
{
video: true,
audio: false
},
// successCallback
function(localMediaStream) {
video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
webcamStream = localMediaStream;
},
// errorCallback
function(err) {
console.log("The following error occured: " + err);
}
);
} else {
console.log("getUserMedia not supported");
}
}
function stopWebcam() {
webcamStream.stop();
}
//------------------------------
// CODE FOR CHANGING CSS FILTERS
//------------------------------
var idx = 0;
var filters = [
'grayscale',
'sepia',
'blur',
'brightness',
'contrast',
'hue-rotate', 'hue-rotate2', 'hue-rotate3',
'saturate',
'invert',
''
];
function changeFilter(el) {
// Remove all CSS classes for element el
el.className = '';
// Choose a CSS class name
console.log("toggling effect: " + filters[idx % filters.length]);
var effect = filters[idx++ % filters.length];
if(effect) {
// html5 classlist property and
// interface. Here we add
// a CSS class to an element
el.classList.add(effect);
}
}
</script>
<script id="jsbin-source-css" type="text/css">#output {
width: 307px;
height: 250px;
background: rgba(255,255,255,0.5);
border: 1px solid #ccc;
}
#screenshot-stream {
width: initial;
height: initial;
}
#screenshot {
vertical-align: top;
}
.blur {
filter: blur(3px);
}
.brightness {
filter: brightness(5);
}
.contrast {
filter: contrast(8);
}
.hue-rotate {
filter: hue-rotate(90deg);
}
.hue-rotate2 {
filter: hue-rotate(180deg);
}
.hue-rotate3 {
filter: hue-rotate(270deg);
}
.saturate {
filter: saturate(10);
}
.grayscale {
filter: grayscale(1);
}
.sepia {
filter: sepia(1);
}
.invert {
filter: invert(1)
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">//--------------------
// GET USER MEDIA CODE
//--------------------
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
var video;
var webcamStream;
function startWebcam() {
if (navigator.getUserMedia) {
navigator.getUserMedia (
// constraints
{
video: true,
audio: false
},
// successCallback
function(localMediaStream) {
video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
webcamStream = localMediaStream;
},
// errorCallback
function(err) {
console.log("The following error occured: " + err);
}
);
} else {
console.log("getUserMedia not supported");
}
}
function stopWebcam() {
webcamStream.stop();
}
//------------------------------
// CODE FOR CHANGING CSS FILTERS
//------------------------------
var idx = 0;
var filters = [
'grayscale',
'sepia',
'blur',
'brightness',
'contrast',
'hue-rotate', 'hue-rotate2', 'hue-rotate3',
'saturate',
'invert',
''
];
function changeFilter(el) {
// Remove all CSS classes for element el
el.className = '';
// Choose a CSS class name
console.log("toggling effect: " + filters[idx % filters.length]);
var effect = filters[idx++ % filters.length];
if(effect) {
// html5 classlist property and
// interface. Here we add
// a CSS class to an element
el.classList.add(effect);
}
}
</script></body>
</html>
Raw
jsbin.gehitu.css
#output {
width: 307px;
height: 250px;
background: rgba(255,255,255,0.5);
border: 1px solid #ccc;
}
#screenshot-stream {
width: initial;
height: initial;
}
#screenshot {
vertical-align: top;
}
.blur {
filter: blur(3px);
}
.brightness {
filter: brightness(5);
}
.contrast {
filter: contrast(8);
}
.hue-rotate {
filter: hue-rotate(90deg);
}
.hue-rotate2 {
filter: hue-rotate(180deg);
}
.hue-rotate3 {
filter: hue-rotate(270deg);
}
.saturate {
filter: saturate(10);
}
.grayscale {
filter: grayscale(1);
}
.sepia {
filter: sepia(1);
}
.invert {
filter: invert(1)
}
Raw
jsbin.gehitu.js
//--------------------
// GET USER MEDIA CODE
//--------------------
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
var video;
var webcamStream;
function startWebcam() {
if (navigator.getUserMedia) {
navigator.getUserMedia (
// constraints
{
video: true,
audio: false
},
// successCallback
function(localMediaStream) {
video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
webcamStream = localMediaStream;
},
// errorCallback
function(err) {
console.log("The following error occured: " + err);
}
);
} else {
console.log("getUserMedia not supported");
}
}
function stopWebcam() {
webcamStream.stop();
}
//------------------------------
// CODE FOR CHANGING CSS FILTERS
//------------------------------
var idx = 0;
var filters = [
'grayscale',
'sepia',
'blur',
'brightness',
'contrast',
'hue-rotate', 'hue-rotate2', 'hue-rotate3',
'saturate',
'invert',
''
];
function changeFilter(el) {
// Remove all CSS classes for element el
el.className = '';
// Choose a CSS class name
console.log("toggling effect: " + filters[idx % filters.length]);
var effect = filters[idx++ % filters.length];
if(effect) {
// html5 classlist property and
// interface. Here we add
// a CSS class to an element
el.classList.add(effect);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment