如何用WebRTC实现拍照，并实现滤镜

在开始拍照之前我们先要学习一点知识，非编码帧、编码帧。

基础知识

非编码帧

首先我们要知道视频是有帧率这个概念的，常见的电影电视是24帧，大家打游戏也会说多少帧，播放视频也是如此。 当你要播放视频的时候，播放器就会按照一定的时间不断从视频文件中获取帧，这个帧就是非编码帧，也叫解码帧，比如20帧视频，就每隔50ms获取一帧，这样看起来就连贯了。播放摄像头的视频也是如此，只不过摄像头的帧都是解码帧，无需再次解码。

编码帧

关于编码帧，顾名思义就是经过编码器（如 H264/H265、VP8/VP9）压缩后的帧称为编码帧， 在H264中，三种类型的帧数据分别为I 帧，P 帧，B 帧

• I 帧：关键帧。压缩率低，可以单独解码成一幅完整的图像。
• P 帧：参考帧。压缩率较高，解码时依赖于前面已解码的数据。
• B 帧：前后参考帧。压缩率最高，解码时不光依赖前面已经解码的帧，而且还依赖它后面的 P 帧。要解码B帧，不仅要取得之前的缓存画面，还要解码之后的画面，通过前后画面的与本帧数据的叠加取得最终的画面。B帧压缩率高，但是解码时CPU的负荷会比较大。

获取媒体视频流

首先我们要利用之前文章学过的API来获取视频，并在video元素中播放，以下是vue3相关的代码

<script setup lang="ts">
import { ref } from 'vue';

const videos = ref<HTMLVideoElement>();
const getVideo = async () => {
  videos.value!.srcObject = await navigator.mediaDevices.getUserMedia({
    // 采用默认的设备进行采集,并限制最小分辨率为360p，理想为720p
    video: {
      width: { min: 640, ideal: 1280 },
      height: { min: 360, ideal: 720 },
    }
  });
}
</script>

<template>
  <div>
    <video ref="videos" width="300" style="aspect-ratio: 16 / 9;" muted autoplay playsinline></video>
    <button @click="getVideo">获取视频</button>
  </div>
</template>

通过上述的代码就能成功的获取视频流，并播放出来，接下来我们如何进行截图呢？之前我们利用canvas获取了视频流，其实我们可以用canvas的drawImage进行绘制视频帧。

canvas绘制画面（拍照）

首先我们先添加一个canvas和一个拍照的按钮

const canvas1 = ref<HTMLCanvasElement>();
let ctx = ref<CanvasRenderingContext2D>()
const takePhoto = async () => {
  ctx.value = canvas1.value?.getContext('2d')!;
  ctx.value?.drawImage(videos.value!, 0, 0, 640, 360)
}
    
<div>
  <button @click="takePhoto">拍照</button>
  <canvas ref="canvas1" width="640" height="360"></canvas>
</div>

不清楚drawImage的api可以查看文档，我们只需要将video元素传入drawImage API的第一个参数里面，绘制出来即可。

怎么实现滤镜呢

首先我们要知道css有一个filter属性，这个是可以添加一个滤镜属性的。我们首先定义一些css的滤镜样式

<style>
.none {
  filter: none;
}
/** 模糊度 */
.blur {
  filter: blur(5px);
}
/** 对比度 */
.contrast {
  filter: contrast(2);
}
/** 亮度 */
.brightness {
  filter: brightness(2);
}
/** 灰度 */
.grayscale {
  filter: grayscale(1);
}
/** 颜色反转 */
.invert {
  filter: invert(1);
}
</style>

接下来再做一个选择框，让用户可以选择。

<div>
  <select @change="handleSelectFilter">
    <option value="none">None</option>
    <option value="blur">Blur</option>
    <option value="contrast">Contrast</option>
    <option value="brightness">Brightness</option>
    <option value="grayscale">Grayscale</option>
    <option value="invert">Invert</option>
  </select>
</div>

let canvasFilter = ref('none');
const handleSelectFilter = (value: Event) => {
  canvasFilter.value = (value.target as HTMLOptionElement).value;
}

是不是很轻松。当然你如果想要把这些样式叠加也是可以的，而且你也可以做一个数值选项从而更精确的控制每个属性。这里就不再举例了。我们拍好了照，也调整了颜色，但是怎么保存到本地或者上传到服务器呢

获取图片数据（下载）

可以通过canvas的toBlob方法获取blob，或者通过toDataURL获取dataURL。然后通过a链接下载或者上传到服务器。

// 保存
const save = () => {
  // 方法一
  canvas1.value?.toBlob((blob) => {
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob!);
    a.download = '图片';
    a.click();
    a.remove();
  })

  // 方法二
  const a = document.createElement('a');
  a.href = canvas1.value?.toDataURL()!;
  a.download = '图片';
  a.click();
  a.remove();
}

我们会发现我们设置的滤镜并没有生效，那是因为这个滤镜是用css来实现的。如果需要对下载的图片产生滤镜效果，需要对图片的RGB进行转换，这个就不在这里展开了，有兴趣的可以自行寻找。下面附上完整的代码