欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js+HTML5基于過濾器從攝像頭中捕獲視頻的方法

 更新時(shí)間:2015年06月16日 14:48:18   作者:紅薯  
這篇文章主要介紹了js+HTML5基于過濾器從攝像頭中捕獲視頻的方法,涉及javascript基于html5元素操作多媒體的使用技巧,需要的朋友可以參考下

本文實(shí)例講述了js+HTML5基于過濾器從攝像頭中捕獲視頻的方法。分享給大家供大家參考。具體如下:

index.html頁面:

<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 &lt;video&gt; object</h2>
    <video></video>
  </div>
  <div class="col">
    <h2>HTML5 &lt;canvas&gt; object</h2>
    <canvas width="600" height="450"></canvas>
  </div>
</div>

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);

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • 基于JavaScript實(shí)現(xiàn)熔巖燈效果導(dǎo)航菜單

    基于JavaScript實(shí)現(xiàn)熔巖燈效果導(dǎo)航菜單

    這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)熔巖燈效果導(dǎo)航菜單,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • JavaScript定時(shí)器類型總結(jié)

    JavaScript定時(shí)器類型總結(jié)

    這篇文章主要分享了JavaScript定時(shí)器類型總結(jié),文章圍繞JavaScript定時(shí)器類型的相關(guān)資料展開全文詳細(xì)內(nèi)容,需要的小伙伴可以參考一下,希望對你有所幫助
    2021-12-12
  • javascript:google 向上向下滾動(dòng)特效,兼容IE6,7,8,FF

    javascript:google 向上向下滾動(dòng)特效,兼容IE6,7,8,FF

    這個(gè)代碼是我之前帶網(wǎng)上找的,因?yàn)榻裉煸俅斡玫?,所以記錄下來,免得以后都找不到,我現(xiàn)在想去搜它的說明文檔都搜不到!
    2010-08-08
  • 理解JavaScript中的Proxy 與 Reflection API

    理解JavaScript中的Proxy 與 Reflection API

    這篇文章主要介紹了JavaScript中的Proxy 與 Reflection API的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下
    2020-09-09
  • 如何使用Javascript正則表達(dá)式來格式化XML內(nèi)容

    如何使用Javascript正則表達(dá)式來格式化XML內(nèi)容

    本篇文章是對使用Javascript正則表達(dá)式來格式化XML內(nèi)容的方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以參考下
    2013-07-07
  • JavaScript函數(shù)、方法、對象代碼

    JavaScript函數(shù)、方法、對象代碼

    函數(shù)定義可以嵌套在其他函數(shù)中,常用作子函數(shù)。但不能出現(xiàn)在循環(huán)或條件語句中。
    2008-10-10
  • js實(shí)現(xiàn)非常棒的彈出div

    js實(shí)現(xiàn)非常棒的彈出div

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)非常棒的彈出div,具有一定的參考價(jià)值,感興趣的朋友可以參考一下
    2016-10-10
  • 網(wǎng)頁上的Javascript編輯器和代碼格式化

    網(wǎng)頁上的Javascript編輯器和代碼格式化

    因?yàn)槲覀兊捻?xiàng)目可以通過編寫腳本(javascript)進(jìn)行功能擴(kuò)展,所以為了方便現(xiàn)場實(shí)施人員,所以突發(fā)奇想想在網(wǎng)頁上(系統(tǒng)是B/S的)提供一個(gè)javascript的編輯器。
    2010-04-04
  • 一文詳解如何根據(jù)后端返回的url下載json文件

    一文詳解如何根據(jù)后端返回的url下載json文件

    前后端分離的項(xiàng)目中,前端工作人員會(huì)要求后端返回指定格式的JSON數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于如何根據(jù)后端返回的url下載json文件的相關(guān)資料,需要的朋友可以參考下
    2022-05-05
  • Vue項(xiàng)目中關(guān)于全局css的處理

    Vue項(xiàng)目中關(guān)于全局css的處理

    我們在寫CSS的時(shí)候,會(huì)遇到大量相同的屬性(比如:margin-top:10px)這種屬性幾乎每個(gè)vue頁面都有。這個(gè)時(shí)候,我們可以把css掛載到全局上,供所有vue頁面使用,同時(shí)也方便修改。感興趣的同學(xué)可以參考一下
    2023-04-04

最新評論