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 相关文章推荐
js获取单选框或复选框值及操作
Dec 18 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
Python中bisect的使用方法
2019/12/31 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
一份创业计划书范文
2014/02/08 职场文书
新品发布会策划方案
2014/06/08 职场文书
校庆口号
2014/06/20 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
干部作风建设心得体会
2014/10/22 职场文书
工程质量保证书
2015/05/09 职场文书
孔繁森观后感
2015/06/10 职场文书
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python