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

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

1、基础知识

1.1 非编码帧

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

1.2 编码帧

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

• I 帧：关键帧。压缩率低，可以单独解码成一幅完整的图像。

• P 帧：参考帧。压缩率较高，解码时依赖于前面已解码的数据。

• B 帧：前后参考帧。压缩率最高，解码时不光依赖前面已经解码的帧，而且还依赖它后面的 P 帧。要解码B帧，不仅要取得之前的缓存画面，还要解码之后的画面，通过前后画面的与本帧数据的叠加取得最终的画面。B帧压缩率高，但是解码时CPU的负荷会比较大。

2、获取媒体视频流

首先我们要利用之前文章学过的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>