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


Posted in Javascript onJune 16, 2015

本文实例讲述了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 <video> object</h2>
    <video></video>
  </div>
  <div class="col">
    <h2>HTML5 <canvas> 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程序设计有所帮助。

Javascript 相关文章推荐
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
js的三种继承方式详解
Jan 21 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
详解JavaScript的变量
Apr 04 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
js实现开关灯效果
Mar 30 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 Javascript
动态加载jQuery的方法
Jun 16 #Javascript
详解AngularJS中的表格使用
Jun 16 #Javascript
js+HTML5实现视频截图的方法
Jun 16 #Javascript
AngularJS中的过滤器使用详解
Jun 16 #Javascript
简述AngularJS的控制器的使用
Jun 16 #Javascript
详解AngularJS中的表达式使用
Jun 16 #Javascript
整理AngularJS中的一些常用指令
Jun 16 #Javascript
You might like
20个PHP常用类库小结
2011/09/11 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
常用PHP框架功能对照表
2014/10/23 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
php中__toString()方法用法示例
2016/12/07 PHP
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
python获取本机外网ip的方法
2015/04/15 Python
Python代码实现KNN算法
2017/12/20 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
python实现剪切功能
2019/01/23 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
Python range与enumerate函数区别解析
2020/02/28 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
小学校长汇报材料
2014/08/20 职场文书
2014年工程部工作总结
2014/11/25 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
土建施工员岗位职责
2015/04/11 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android