一、前言
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) { window.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 中包含哪些类型的媒体轨(音频轨、视频轨),并且可为这些媒体轨设置一些限制。
http://market.szonline.net/amaz/26366.html
http://market.szonline.net/amaz/26365.html
http://market.szonline.net/amaz/26364.html
http://market.szonline.net/amaz/26363.html
http://market.szonline.net/amaz/26362.html