HTML5调用摄像头+视频特效+录制视频+录音+截图+变声+滤波+音频可视化

1.写在前面

根据最近的学习，写了一个demo,
可以通过navigator.mediaDevices.getUserMedia()方法调用电脑摄像头，并实现了录制音频，录制视频，对摄像头的内容进行截图下载；通过AudioContext使用web audio api处理音频信息，实现滤波以及简单变声处理。录制使用的api是MediaRecorder。整个demo没有使用其他的库，全部是原生api. 本项目代码我会上传。

2.实现过程

(1)调用摄像头
pc端大部分浏览器支持getUserMedia()方法，安卓端除了chrome for android支持的很少；同时，要注意，在本地调用这个方法被禁止，只能在在线网页使用，我的测试使用了nodejs方法，写一个简单的后台，构建一个http服务器，localhost方式访问。使用navigator.mediaDevices.getUserMedia()获取视频，返回值是一个promise类型；调用代码如下：

var video = document.querySelector('video');
var option = {
  audio:false,video:{
  width:640,height:480}};
var media = navigator.mediaDevices.getUserMedia(option);
  media.then(show).catch((error)=>{
    console.log(error)});
  function show(mediaStream){
    video.src = window.URL.createObjectURL(mediaStream);
    //将meida流转为url
    video.onloadedmetadata = function(e) {
        video.play();
  };

这段代码是调用核心，会请求用户是否打开摄像头。方法参数是设置，具体参见MDN网站接口指导。其中，URL.createObjectURL(blob)这个方法会把blob格式数据转为url，然后通过提供给audio,video等标签就可以显示，这个方法在我们的应用中很常用。
(2)视频特效
实现了简单的特效，grayscale/sepia/blur 分别是灰色画面/黄色画面特效/模糊效果等等，核心是使用css的filter去完成，<filter属性不止可以使用在图片上，也可以用在video标签上！> filter特效有很多.参考MDN.

css:
video{
      background: rgba(255,255,255,0.5);
    }
    .grayscale{
      filter: grayscale(1);
    }
    .sepia{
      filter:sepia(1);
    }
    .blur{
      filter: blur(3px);
    }
//js:
video.onclick = ()=>{
      count++;
      switch(count){
        case 1:video.className = 'grayscale';break;
        case 2:video.className = 'sepia';break;
        case 3:video.className = 'blur';break;
        case 4:video.className = '';count=0;break;
      }
    }

然后设定每次点击让video具有上面其中一个className，就可以具有不同特效了，很简单。同时要明白这只是css特效，视频本身并没有改变。截图等得到的画面不会有这些css特效，如果需要视频本身就有特效，可以被截图捕捉，可以使用canvas播放视频并处理：（我的简单尝试）

  //    var canvas = document.querySelector('canvas');
  //    var ctx = canvas.getContext('2d');
  //    setInterval(function(){
   
  //        ctx.drawImage(video,0,0,640,480);
  //        var imgdata = ctx.getImageData(0,0,640,480);
  //        //反相处理
  //        for(var i = 0; i < imgdata.height; ++i){
   
  //     for(var j = 0; j < imgdata.width; ++j){