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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 Javascript
js实现圆形菜单选择器
Dec 03 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
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
jquery获取input表单值的代码
2010/04/19 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
了解AppleTalk协议吗
2014/04/01 面试题
怎么样写好简历中的自我评价
2013/10/25 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
离婚协议书范本2014
2014/10/27 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
旷工检讨书1000字
2015/01/01 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python