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 相关文章推荐
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
JS三级联动代码格式实例详解
Dec 30 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 Javascript
详解TypeScript的基础类型
Feb 18 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
mysql中存储过程、函数的一些问题
2007/02/14 PHP
PHP Session机制简介及用法
2014/08/19 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
Python的设计模式编程入门指南
2015/04/02 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
收银员岗位职责
2014/02/07 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
创业计划书之农家乐
2019/10/09 职场文书
Python类方法总结讲解
2021/07/26 Python