diff --git a/audio-video-technology/音视频技术.md b/audio-video-technology/音视频技术.md index 1deacba..02235e9 100644 --- a/audio-video-technology/音视频技术.md +++ b/audio-video-technology/音视频技术.md @@ -338,9 +338,199 @@ navigator.mediaDevices.enumerateDevices() - 第二次，如果用户视频检测通过了，再次调用 getUserMedia API 时，则只采集音频数据。由于音频数据不能直接展示，所以需要使用 JavaScript 中的 AudioContext 对象，将采集到的音频计算后， 再将其绘制到页面上。这样，当用户看到音频数值的变化后，说明音频设备也是有效的。 +### 2.3 使用浏览器给自己拍照 +- 在正式讲解如何进行拍照之前，你需要先了解**非编码帧（解码帧）和编码帧**这两个知识点，这会有利于你对后面拍照实现内容的理解。 + +- 非编码帧 +- 当你要播放某个视频文件时，播放器会按照一定的时间间隔连续地播放从音视频文件中解码后的视频帧，这样视频就动起来了。同理，播放从摄像头获取的视频帧也是如此，只不过从摄像头获取得本来就是**非编码视频帧**，所以就不需要解码了。 +- 通过上面的描述，你应该能得到以下两点信息： + - 播放的视频帧之间的时间间隔是非常小的。如按每秒钟 20 帧的帧率计算，每帧之间的间隔是 50ms。 + - 播放器播的是**非编码帧（解码后的帧）**，这些非编码帧就是一幅幅独立的图像。 +- 从摄像头里采集的帧或通过解码器解码后的帧都是**非编码帧**。非编码帧的格式一般是 YUV 格式或是 RGB 格式。 + +- 编码帧 +- 相对于非编码帧，通过编码器（如 H264/H265、VP8/VP9）压缩后的帧称为**编码帧**。这里我们以 H264 为例，经过 H264 编码的帧包括以下三种类 型。 + - I 帧：关键帧。压缩率低，可以单独解码成一幅完整的图像。 + - P 帧：参考帧。压缩率较高，解码时依赖于前面已解码的数据。 + - B 帧：前后参考帧。压缩率最高，解码时不光依赖前面已经解码的帧，而且还依赖它后面的 P 帧。换句话说就是，**B 帧后面的 P 帧要优先于它进行解码，然后才能将 B 帧解码**。 +- 通过上面的介绍，现在你应该已经清楚地知道了：**从播放器里获取的视频帧一定是非编码帧。也就是说，拍照的过程其实是从连续播放的一幅幅画面中抽取正在显示的那张画面**。 + +- 如何获取视频流 +- 在获得照片之前，你首先要通过浏览器的 API 获取视频流，并通过 HTML5 的