首页 / 脚本样式 / JavaScript / js+HTML5基于过滤器从摄像头中捕获视频的方法

<div class="warning"><h2>Native web camera streaming （getUserMedia） is not supported in this browser.</h2></div><div class="container"><h3>Current filter is: None</h3><button>Click here to change video filter</button><div style="clear:both"></div><div class="col"><h2>HTML5 <video> object</h2><video></video></div><div class="col"><h2>HTML5 <canvas> object</h2><canvas width="600" height="450"></canvas></div></div>

.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）;}

// Main initializationdocument.addEventListener（"DOMContentLoaded", function（） {// Global variablesvar video = document.querySelector（"video"）;var audio, audioType;var canvas = document.querySelector（"canvas"）;var context = canvas.getContext（"2d"）;// Custom video filtersvar 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 getUserMedianavigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||navigator.mozGetUserMedia || navigator.msGetUserMedia;window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;if （navigator.getUserMedia） {// Evoke getUserMedia functionnavigator.getUserMedia（{video: true, audio: true}, onSuccessCallback, onErrorCallback）;function onSuccessCallback（stream） {// Use the stream from the camera as the source of the video elementvideo.src = window.URL.createObjectURL（stream） || stream;// Autoplayvideo.play（）;// HTML5 Audioaudio = new Audio（）;audioType = getAudioType（audio）;if （audioType） {audio.src = "polaroid." + audioType;audio.play（）;}}// Display an errorfunction 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 objectfunction 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 canvasvideo.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）;