js和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 initialization
document.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);