js+HTML5基于过滤器从摄像头中捕获视频的方法
本文实例讲述了js+HTML5基于过滤器从摄像头中捕获视频的方法。分享给大家供大家参考。具体如下：
index.html页面：
<divclass="warning"> <h2>Nativewebcamerastreaming(getUserMedia)isnotsupportedinthisbrowser.</h2> </div> <divclass="container"> <h3>Currentfilteris:None</h3> <button>Clickheretochangevideofilter</button> <divstyle="clear:both"></div> <divclass="col"> <h2>HTML5<video>object</h2> <video></video> </div> <divclass="col"> <h2>HTML5<canvas>object</h2> <canvaswidth="600"height="450"></canvas> </div> </div>
style.css文件：
.grayscale{
-webkit-filter:grayscale(1);
-moz-filter:grayscale(1);
-o-filter:grayscale(1);
-ms-filter:grayscale(1);
filter:grayscale(1);
}
.sepia{
-webkit-filter:sepia(0.8);
-moz-filter:sepia(0.8);
-o-filter:sepia(0.8);
-ms-filter:sepia(0.8);
filter:sepia(0.8);
}
.blur{
-webkit-filter:blur(3px);
-moz-filter:blur(3px);
-o-filter:blur(3px);
-ms-filter:blur(3px);
filter:blur(3px);
}
.brightness{
-webkit-filter:brightness(0.3);
-moz-filter:brightness(0.3);
-o-filter:brightness(0.3);
-ms-filter:brightness(0.3);
filter:brightness(0.3);
}
.contrast{
-webkit-filter:contrast(0.5);
-moz-filter:contrast(0.5);
-o-filter:contrast(0.5);
-ms-filter:contrast(0.5);
filter:contrast(0.5);
}
.hue-rotate{
-webkit-filter:hue-rotate(90deg);
-moz-filter:hue-rotate(90deg);
-o-filter:hue-rotate(90deg);
-ms-filter:hue-rotate(90deg);
filter:hue-rotate(90deg);
}
.hue-rotate2{
-webkit-filter:hue-rotate(180deg);
-moz-filter:hue-rotate(180deg);
-o-filter:hue-rotate(180deg);
-ms-filter:hue-rotate(180deg);
filter:hue-rotate(180deg);
}
.hue-rotate3{
-webkit-filter:hue-rotate(270deg);
-moz-filter:hue-rotate(270deg);
-o-filter:hue-rotate(270deg);
-ms-filter:hue-rotate(270deg);
filter:hue-rotate(270deg);
}
.saturate{
-webkit-filter:saturate(10);
-moz-filter:saturate(10);
-o-filter:saturate(10);
-ms-filter:saturate(10);
filter:saturate(10);
}
.invert{
-webkit-filter:invert(1);
-moz-filter:invert(1);
-o-filter:invert(1);
-ms-filter:invert(1);
filter:invert(1);
}
script.js文件：
//Maininitialization
document.addEventListener('DOMContentLoaded',function(){
//Globalvariables
varvideo=document.querySelector('video');
varaudio,audioType;
varcanvas=document.querySelector('canvas');
varcontext=canvas.getContext('2d');
//Customvideofilters
variFilter=0;
varfilters=[
'grayscale',
'sepia',
'blur',
'brightness',
'contrast',
'hue-rotate',
'hue-rotate2',
'hue-rotate3',
'saturate',
'invert',
'none'
];
//GetthevideostreamfromthecamerawithgetUserMedia
navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||
navigator.mozGetUserMedia||navigator.msGetUserMedia;
window.URL=window.URL||window.webkitURL||window.mozURL||window.msURL;
if(navigator.getUserMedia){
//EvokegetUserMediafunction
navigator.getUserMedia({video:true,audio:true},onSuccessCallback,onErrorCallback);
functiononSuccessCallback(stream){
//Usethestreamfromthecameraasthesourceofthevideoelement
video.src=window.URL.createObjectURL(stream)||stream;
//Autoplay
video.play();
//HTML5Audio
audio=newAudio();
audioType=getAudioType(audio);
if(audioType){
audio.src='polaroid.'+audioType;
audio.play();
}
}
//Displayanerror
functiononErrorCallback(e){
varexpl='Anerroroccurred:[Reason:'+e.code+']';
console.error(expl);
alert(expl);
return;
}
}else{
document.querySelector('.container').style.visibility='hidden';
document.querySelector('.warning').style.visibility='visible';
return;
}
//Drawthevideostreamatthecanvasobject
functiondrawVideoAtCanvas(obj,context){
window.setInterval(function(){
context.drawImage(obj,0,0);
},60);
}
//ThecanPlayType()functiondoesn'treturntrueorfalse.Inrecognitionofhowcomplex
//formatsare,thefunctionreturnsastring:'probably','maybe'oranemptystring.
functiongetAudioType(element){
if(element.canPlayType){
if(element.canPlayType('audio/mp4;codecs="mp4a.40.5"')!==''){
return('aac');
}elseif(element.canPlayType('audio/ogg;codecs="vorbis"')!==''){
return("ogg");
}
}
returnfalse;
}
//Addeventlistenerforourvideo'sPlayfunctioninordertoproducevideoatthecanvas
video.addEventListener('play',function(){
drawVideoAtCanvas(this,context);
},false);
//AddeventlistenerforourButton(toswitchvideofilters)
document.querySelector('button').addEventListener('click',function(){
video.className='';
canvas.className='';
vareffect=filters[iFilter++%filters.length];//Loopthroughthefilters.
if(effect){
video.classList.add(effect);
canvas.classList.add(effect);
document.querySelector('.containerh3').innerHTML='Currentfilteris:'+effect;
}
},false);
},false);
希望本文所述对大家的javascript程序设计有所帮助。