目录一、前言1.核心技术2.音频采集的基本概念3.音视频设备的基本原理二、示例示例1-打开摄像头示例2-拍照保存

一、前言

1.核心技术

Web Real-Time Communication：网页即时通信，可以在浏览器进行实时语音或者视频对话的API

Canvas：HTML5中的新元素,可以用来来绘制图形、图标、以及其它任何视觉性图像

2.音频采集的基本概念

摄像头：用于采集图像和视频

麦克风：采集音频数据

帧率：一秒钟采集图像的次数。帧率越高，越平滑流畅

轨：借鉴了多媒体的概念，每条轨数据都是独立的，如MP4中的音频轨、视频轨，是分别被存储的

流：可以理解为容器。在WebRTC中，流可以分为媒体流（MediaStream）和数据流（DataStream）。

分辨率：2K、1080P、720P等，越清晰，占用带宽越多

3.音视频设备的基本原理

音频设备

音频输入设备主要是采集音数据，而采集音频数据的本质是模拟信号转成数字信号，

采集到的数据经过量化、编码，最终开成数字信号，这就是音频设备要完成的工作。

人的听觉范围的频率是20Hz~20kHz之间，日常语音交流8kHz就哆了。

为了追求高品质、高保真，需要将音频输入设备采样率设置在40kHz上才能完整保留原始信号

视频设备

当实物光通过镜头进行摄像机后，它会通过视频设备的模数转换（A/D）模块，即光学传感器，将光转换成数字信号，即RGB数据，获得RGB数据后，再通过DSP进行优化处理，如自动增强、白平衡、色彩饱和等，等到24位的真彩色图片

模数转换使用的采集定理称为奈奎斯特定理：

在进行模拟 / 数字信号的转换过程中，当采样率大于信号中最高频率的 2 倍时，采样之后的数字信号就完整地保留原始信号中的信息。

talk is cheap, 上代码，以下示例运行的时候会请求摄像头权限，同意即可，接下来就是见证奇迹的时刻！

二、示例

示例1-打开摄像头

这就是照像的核心功能，以后可以用来化妆，挤痘痘，整理发型

打开摄像头

运行结果如下

示例2-拍照保存

这里展示了两个按钮，拍照和保存，yes，就是自拍的核心功能！

运行结果如下

就是这么简单！

重点方法和参数解释

1.方法：avigator.mediaDevices.getUserMedia(constraints);

返回一个promise对象，调用成功，可以通过promise对象获取MediaStream对象，

2.参数：mediaStreamContrains

传入的constraints参数类型为 MediaStreamConstraints，可以指定 MediaStream 中包含哪些类型的媒体轨（音频轨、视频轨），并且可为这些媒体轨设置一些限制。

视频的帧率最小 20 帧每秒；

宽度最小是 640，理想的宽度是 1280；

高度最小是 360，最理想高度是 720；

宽高比是 16:9；

对于音频则是开启回音消除、降噪以及自动增益功能。