SHARE TWEET CSS/JS/HTML5 Webcam Effects SRC V6 Coded By BrU

<center>
<video id="video" width="640" height="440"autoplay></video><br>
CSS Webcam Filter Effects:<p>
<button onclick="script:
fillType=1;
var slider=document.getElementById('range');
var sheet = document.createElement('style')
sheet.innerHTML = 'video{ filter: invert(0%);}';
document.body.appendChild(sheet);">Standard</button>
<button onclick="script:
fillType=2;
var slider=document.getElementById('range');
var sheet = document.createElement('style')
sheet.innerHTML = 'video{ filter: invert('+slider.value+'%);}';
document.body.appendChild(sheet);">Invert</button>
<button onclick="script:
fillType=3;
var slider=document.getElementById('range');
var sheet = document.createElement('style')
sheet.innerHTML = 'video{ filter: sepia('+slider.value+'%);}';
document.body.appendChild(sheet);">Sepia</button>
<button onclick="script:
fillType=4;
var slider=document.getElementById('range');
var sheet = document.createElement('style')
sheet.innerHTML = 'video{ filter: grayscale('+slider.value+'%);}';
document.body.appendChild(sheet);">Grayscale</button>
<button onclick="script:
fillType=5;
var slider=document.getElementById('range');
var sheet = document.createElement('style')
sheet.innerHTML = 'video{ filter: contrast('+slider.value*4+'%);}';
document.body.appendChild(sheet);">Contrast</button>
<button onclick="script:
fillType=6;
var slider=document.getElementById('range');
var sheet = document.createElement('style')
sheet.innerHTML = 'video{ filter: saturate('+slider.value*4+'%);}';
document.body.appendChild(sheet);">Saturate</button>
<button onclick="script:
fillType=7;
var slider=document.getElementById('range');
var sheet = document.createElement('style')
sheet.innerHTML = 'video{ filter: brightness('+slider.value+'%);}';
document.body.appendChild(sheet);">Brightness</button>
<button onclick="script:
fillType=8;
var slider=document.getElementById('range');
var sheet = document.createElement('style')
sheet.innerHTML = 'video{ filter: blur('+slider.value/8+'px);}';
document.body.appendChild(sheet);">Blur</button>
<button onclick="script:
fillType=9;
var slider=document.getElementById('range');
var sheet = document.createElement('style')
sheet.innerHTML = 'video{ filter: hue-rotate('+slider.value+'deg);}';
document.body.appendChild(sheet);">Hue-rotate</button>
<p>
Filter Value:<p>
 <input type="range" id="range" min="1" max="10000" value="300" onchange="script:
 if(fillType==9){var slider=document.getElementById('range');
var sheet = document.createElement('style')
sheet.innerHTML = 'video{ filter: hue-rotate('+slider.value+'deg);}';
document.body.appendChild(sheet);}
 if(fillType==8){var slider=document.getElementById('range');
var sheet = document.createElement('style')
sheet.innerHTML = 'video{filter: blur('+slider.value/8+'px);}';
document.body.appendChild(sheet);}
 if(fillType==7){var slider=document.getElementById('range');
var sheet = document.createElement('style')
sheet.innerHTML = 'video{filter: brightness('+slider.value+'%);}';
document.body.appendChild(sheet);}
 if(fillType==6){var slider=document.getElementById('range');
var sheet = document.createElement('style')
sheet.innerHTML = 'video{filter: saturate('+slider.value*4+'%);}';
document.body.appendChild(sheet);}
 if(fillType==5){var slider=document.getElementById('range');
var sheet = document.createElement('style')
sheet.innerHTML = 'video{filter: contrast('+slider.value*4+'%);}';
document.body.appendChild(sheet);}
 if(fillType==4){var slider=document.getElementById('range');
var sheet = document.createElement('style')
sheet.innerHTML = 'video{filter: grayscale('+slider.value+'%);}';
document.body.appendChild(sheet);}
 if(fillType==3){var slider=document.getElementById('range');
var sheet = document.createElement('style')
sheet.innerHTML = 'video{filter: sepia('+slider.value+'%);}';
document.body.appendChild(sheet);}
 if(fillType==2){var slider=document.getElementById('range');
var sheet = document.createElement('style')
sheet.innerHTML = 'video{filter: invert('+slider.value+'%);}';
document.body.appendChild(sheet);}
 if(fillType==1){var slider=document.getElementById('range');
var sheet = document.createElement('style')
sheet.innerHTML = 'video{filter: invert(0%);}';
document.body.appendChild(sheet);}"></input>
<canvas id="canvas" width="640" height="480" hidden></canvas>

<script>

var fillType=0;
window.addEventListener("DOMContentLoaded", function() {

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
var video1 = document.getElementById('video1');
var video2 = document.getElementById('video2');
var video3 = document.getElementById('video3');
var video4 = document.getElementById('video4');
var video5 = document.getElementById('video5');
var video6 = document.getElementById('video6');
var video7 = document.getElementById('video7');
var video8 = document.getElementById('video8');
var mediaConfig = { video: true };
var errBack = function(e) {
console.log('An error has occurred!', e)
};


if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {

video.srcObject = stream;
video.play();
//video1.srcObject = stream;
//video1.play();
//video2.srcObject = stream;
//video2.play();
//video3.srcObject = stream;
//video3.play();
//video4.srcObject = stream;
//video4.play();
//video5.srcObject = stream;
//video5.play();
//video6.srcObject = stream;
//video6.play();
//video7.srcObject = stream;
//video7.play();
//video8.srcObject = stream;
//video8.play();
});
}


else if(navigator.getUserMedia) {
navigator.getUserMedia(mediaConfig, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(mediaConfig, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if(navigator.mozGetUserMedia) {
navigator.mozGetUserMedia(mediaConfig, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);
</script>
</div>