在开始拍照之前我们先要学习一点知识,非编码帧、编码帧。
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>