一, 前言
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. 示例 1 - 打开摄像头
这就是照像的核心功能, 以后可以用来化妆, 挤痘痘, 整理发型
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 打开摄像头
- </title>
- </head>
- <body>
- <h1>
- 打开摄像头
- </h1>
- <video autoplay playsinline>
- </video>
- </body>
- </HTML>
- <script>
- const mediaStreamContrains = {
- video: {
- frameRate: {min: 20},
- width: {min: 640, ideal: 1280},
- height: {min: 360, ideal: 720},
- aspectRatio: 16 / 9
- },
- audio: {
- echoCancellation: true,
- noiseSuppression: true,
- autoGainControl: true
- }
- };
- const localVideo = document.querySelector('video');
- function gotLocalMediaStream(mediaStream) {
- localVideo.srcObject = mediaStream;
- }
- function handleLocalMediaStreamError(error) {
- console.log('navigator.getUserMedia error:', error);
- }
- navigator.mediaDevices.getUserMedia(mediaStreamContrains).then(
- gotLocalMediaStream
- ).catch(
- handleLocalMediaStreamError
- );
- </script>
运行结果如下
示例 2 - 拍照保存
这里展示了两个按钮, 拍照和保存, yes, 就是自拍的核心功能!
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title > 拍照一分钟, P 图两小时</title>
- </head>
- <body>
- <section>
- <div>
- <video autoplay playsinline id="player"></video>
- </div>
- </section>
- <section>
- <div>
- <button id="snapshot">拍照</button>
- <button id="download">下载</button>
- </div>
- <div>
- <canvas id="picture"></canvas>
- </div>
- </section>
- </body>
- </HTML>
- <script>
- 'use strict';
- var videoplay = document.querySelector('video#player');
- function gotMediaStream(stream) {
- Windows.stream = stream;
- videoplay.srcObject = stream;
- }
- function handleError(err) {
- console.log('getUserMedia error:', err);
- }
- function start() {
- var constraints = {
- video: {
- width: 1280,
- height: 720,
- frameRate: 15,
- facingMode: 'enviroment'
- },
- audio: false
- }
- navigator.mediaDevices.getUserMedia(constraints)
- .then(gotMediaStream)
- .catch(handleError);
- }
- // 拍照
- var snapshot = document.querySelector('button#snapshot');
- snapshot.onclick = function () {
- var picture = document.querySelector('canvas#picture');
- picture.width = 1280;
- picture.height = 720;
- picture.getContext('2d').drawImage(videoplay, 0, 0, picture.width, picture.height);
- };
- // 下载
- function downLoad(url) {
- var oA = document.createElement("a");
- oA.download = 'photo';// 设置下载的文件名, 默认是'下载'
- oA.href = url;
- document.body.appendChild(oA);
- oA.click();
- oA.remove(); // 下载之后把创建的元素删除
- }
- document.querySelector("button#download").onclick = function () {
- downLoad(picture.toDataURL("image/jpeg"));
- };
- start();
- </script>
运行结果如下
就是这么简单!
重点方法和参数解释
1. 方法: avigator.mediaDevices.getUserMedia(constraints);
返回一个 promise 对象, 调用成功, 可以通过 promise 对象获取 MediaStream 对象,
2. 参数: mediaStreamContrains
传入的 constraints 参数类型为 MediaStreamConstraints, 可以指定 MediaStream 中包含哪些类型的媒体轨(音频轨, 视频轨), 并且可为这些媒体轨设置一些限制.
视频的帧率最小 20 帧每秒;
宽度最小是 640, 理想的宽度是 1280;
高度最小是 360, 最理想高度是 720;
宽高比是 16:9;
对于音频则是开启回音消除, 降噪以及自动增益功能.
来源: https://www.cnblogs.com/chenqionghe/p/11935903.html