js和HTML5基於過濾器從相機中捕捉影片的方法-H5教程-PHP中文網

首頁

web前端

H5教程

js和HTML5基於過濾器從相機中捕捉影片的方法

不言

Jul 02, 2018 am 11:56 AM

html5 js 網路攝影機影片過濾器

這篇文章主要介紹了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 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中文網！