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下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
jquery实现下载图片功能
Jul 18 jQuery
js将URL网址转为16进制加密与解密函数
Mar 04 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下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
django批量导入xml数据
2016/10/16 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
详解Python if-elif-else知识点
2018/06/11 Python
详解Python用户登录接口的方法
2019/04/17 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
Python 在局部变量域中执行代码
2020/08/07 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
Python实现疫情地图可视化
2021/02/05 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
关于是否需要写商业计划书
2014/02/07 职场文书
成人继续教育实施方案
2014/03/01 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL