css filter和getUserMedia的联合使用

CSS filter 是一种很常用的前端技术，通过调整不同的滤镜参数，可以让图片、视频等多媒体元素变得更加生动、丰富。getUserMedia则是一个 JavaScript API，可以用来访问电脑或移动设备上的摄像头和麦克风，让网页可以进行实时的视频/音频播放、录制、推流等操作。css filter和getUserMedia的联合使用则让开发者可以更加灵活地对音视频流进行处理，例如实时添加滤镜、特效等。

以下为css filter和getUserMedia的联合使用的攻略：

步骤1：获取摄像头数据

使用 getUserMedia API 获取设备的摄像头数据，这个 API 用于访问用户的媒体设备，包括摄像头和麦克风。我们需要调用其中的 navigator.mediaDevices.getUserMedia() 方法来获取视频流数据，并挂载到 video 元素上。

const video = document.querySelector('video');
navigator.mediaDevices.getUserMedia({video: true})
  .then(stream => {
      video.srcObject = stream;
      video.play();
  })
  .catch(err => console.log('error:', err));

这段代码会自动打开用户的摄像头，将视频流挂载到页面上的 video 元素上面，让用户可以看到自己的摄像头画面。

步骤2：添加滤镜效果

在 video 元素上添加 css filter 滤镜，可以使用 CSS 的 filter 属性来实现，例如：

video {
  filter: grayscale(100%);
}

这样就会将摄像头的视频变成灰色。

我们还可以通过多个 filter 命令来组合使用不同的效果，例如：

video {
  filter: grayscale(100%) sepia(100%);
}

这里的 sepia 是一种颜色滤镜，可以让摄像头画面变成褐色调。

步骤3：使用 Canvas 对视频流进行处理

我们可以通过使用 Canvas 来对 video 元素上的即时视频流进行处理。可以将 video 元素隐藏，然后将视频流绘制在 Canvas 上，之后对 Canvas 进行像素级处理。

const video = document.querySelector('video');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
navigator.mediaDevices.getUserMedia({video: true})
  .then(stream => {
      video.srcObject = stream;
      video.play();
  })
  .catch(err => console.log('error:', err));

function render() {
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  requestAnimationFrame(render);
}
render();

在上面的代码中，我们将 video 元素渲染到 canvas 画布中，然后使用 requestAnimationFrame() 递归地进行像素级处理。

例如我们想要使画面变更柔和，可以使用以下代码：

const gamma = 0.5;
ctx.filter = `gamma(${gamma})`;

这里的gamma()用于调整图片的亮度，0到1之间的值会使其变暗，而1以上的值会使其变亮。

总的来说，联合使用 css filter 和 getUserMedia 可以使开发者更加灵活地对音视频流进行处理，并进行实时添加滤镜、特效等。