js和HTML5基于过滤器从摄像头中捕获视频的方法-

本文实例讲述了js+HTML5基于过滤器从摄像头中捕获视频的方法。分享给大家供大家参考。具体如下：

index.html页面：

Native web camera streaming (getUserMedia) is not supported in this browser.


  
Current filter is: None
  Click here to change video filter
  

  

    
HTML5 
    
  

  

    
HTML5  object
    
  

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(&＃39;DOMContentLoaded&＃39;, function() {
  // Global variables
  var video = document.querySelector(&＃39;video&＃39;);
  var audio, audioType;
  var canvas = document.querySelector(&＃39;canvas&＃39;);
  var cOntext= canvas.getContext(&＃39;2d&＃39;);
  // Custom video filters
  var iFilter = 0;
  var filters = [
    &＃39;grayscale&＃39;,
    &＃39;sepia&＃39;,
    &＃39;blur&＃39;,
    &＃39;brightness&＃39;,
    &＃39;contrast&＃39;,
    &＃39;hue-rotate&＃39;,
    &＃39;hue-rotate2&＃39;,
    &＃39;hue-rotate3&＃39;,
    &＃39;saturate&＃39;,
    &＃39;invert&＃39;,
    &＃39;none&＃39;
  ];
  // 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 = &＃39;polaroid.&＃39; + audioType;
        audio.play();
      }
    }
    // Display an error
    function onErrorCallback(e) {
      var expl = &＃39;An error occurred: [Reason: &＃39; + e.code + &＃39;]&＃39;;
      console.error(expl);
      alert(expl);
      return;
    }
  } else {
    document.querySelector(&＃39;.container&＃39;).style.visibility = &＃39;hidden&＃39;;
    document.querySelector(&＃39;.warning&＃39;).style.visibility = &＃39;visible&＃39;;
    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&＃39;t return true or false. In recognition of how complex
  // formats are, the function returns a string: &＃39;probably&＃39;, &＃39;maybe&＃39; or an empty string.
  function getAudioType(element) {
    if (element.canPlayType) {
      if (element.canPlayType(&＃39;audio/mp4; codecs="mp4a.40.5"&＃39;) !== &＃39;&＃39;) {
        return(&＃39;aac&＃39;);
      } else if (element.canPlayType(&＃39;audio/ogg; codecs="vorbis"&＃39;) !== &＃39;&＃39;) {
        return("ogg");
      }
    }
    return false;
  }
  // Add event listener for our video&＃39;s Play function in order to produce video at the canvas
  video.addEventListener(&＃39;play&＃39;, function() {
    drawVideoAtCanvas(this, context);
  }, false);
  // Add event listener for our Button (to switch video filters)
  document.querySelector(&＃39;button&＃39;).addEventListener(&＃39;click&＃39;, function() {
    video.className = &＃39;&＃39;;
    canvas.className = &＃39;&＃39;;
    var effect = filters[iFilter++ % filters.length]; // Loop through the filters.
    if (effect) {
      video.classList.add(effect);
      canvas.classList.add(effect);
      document.querySelector(&＃39;.container h3&＃39;).innerHTML = &＃39;Current filter is: &＃39; + effect;
    }
  }, false);
}, false);

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！