这篇文章主要介绍了js+html5基于过滤器从摄像头中捕获视频的方法,涉及javascript基于html5元素操作多媒体的使用技巧,需要的朋友可以参考下
本文实例讲述了js+html5基于过滤器从摄像头中捕获视频的方法。分享给大家供大家参考。具体如下：
index.html页面：
<p class="warning"><h2>native web camera streaming (getusermedia) is not supported in this browser.</h2></p><p class="container"> <h3>current filter is: none</h3> <button>click here to change video filter</button> <p style="clear:both"></p> <p class="col"> <h2>html5 <video> object</h2> <video></video> </p> <p class="col"> <h2>html5 <canvas> object</h2> <canvas width="600" height="450"></canvas> </p></p>
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 文件：
// main initializationdocument.addeventlistener('domcontentloaded', function() { // global variables var video = document.queryselector('video'); var audio, audiotype; var canvas = document.queryselector('canvas'); var context = canvas.getcontext('2d'); // custom video filters var ifilter = 0; var filters = [ 'grayscale', 'sepia', 'blur', 'brightness', 'contrast', 'hue-rotate', 'hue-rotate2', 'hue-rotate3', 'saturate', 'invert', 'none' ]; // get the video stream from the camera with getusermedia navigator.getusermedia = navigator.getusermedia || navigator.webkitgetusermedia || navigator.mozgetusermedia || navigator.msgetusermedia; window.url = window.url || window.webkiturl || window.mozurl || window.msurl; if (navigator.getusermedia) { // evoke getusermedia function navigator.getusermedia({video: true, audio: true}, onsuccesscallback, onerrorcallback); function onsuccesscallback(stream) { // use the stream from the camera as the source of the video element video.src = window.url.createobjecturl(stream) || stream; // autoplay video.play(); // html5 audio audio = new audio(); audiotype = getaudiotype(audio); if (audiotype) { audio.src = 'polaroid.' + audiotype; audio.play(); } } // display an error function onerrorcallback(e) { var expl = 'an error occurred: [reason: ' + e.code + ']'; console.error(expl); alert(expl); return; } } else { document.queryselector('.container').style.visibility = 'hidden'; document.queryselector('.warning').style.visibility = 'visible'; return; } // draw the video stream at the canvas object function drawvideoatcanvas(obj, context) { window.setinterval(function() { context.drawimage(obj, 0, 0); }, 60); } // the canplaytype() function doesn't return true or false. in recognition of how complex // formats are, the function returns a string: 'probably', 'maybe' or an empty string. function getaudiotype(element) { if (element.canplaytype) { if (element.canplaytype('audio/mp4; codecs="mp4a.40.5"') !== '') { return('aac'); } else if (element.canplaytype('audio/ogg; codecs="vorbis"') !== '') { return("ogg"); } } return false; } // add event listener for our video's play function in order to produce video at the canvas video.addeventlistener('play', function() { drawvideoatcanvas(this, context); }, false); // add event listener for our button (to switch video filters) document.queryselector('button').addeventlistener('click', function() { video.classname = ''; canvas.classname = ''; var effect = filters[ifilter++ % filters.length]; // loop through the filters. if (effect) { video.classlist.add(effect); canvas.classlist.add(effect); document.queryselector('.container h3').innerhtml = 'current filter is: ' + effect; } }, false);}, false);
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
如何解决html5 虚拟键盘出现挡住输入框的问题
html5 plus 实现手机app拍照或相册选择图片上传的功能
以上就是js和html5基于过滤器从摄像头中捕获视频的方法的详细内容。