设置媒体约束

1.该constraints参数允许您指定要获取的媒体。在此示例中，仅限视频，因为默认情况下禁用音频：

const constraints = {
      video: true,
      audio:true,
    };

这样将打开音频，但是会产生回音，例如：两个人用手机qq语音，距离太近了会有相同的效果。

2.也可以使用约束来满足其他要求，例如视频分辨率：

const constraints = {
  video: {
    width: {
      max: 320
    },
    height: {
      max: 240
    }
  }
}

3.尝试将css过滤器添加到视频元素。例如：

<style>
    video {
      filter: blur(4px) invert(1) opacity(1);
    }
</style>

4.视频拍照

<canvas id="photo"></canvas>

//拍照
const photo = document.getElementById('photo');
const photoContext = photo.getContext('2d');
function snapPhoto() {
    photoContext.drawImage(video, 0, 0, photo.width, photo.height);
}