I. Introduction
1. Core Technology
- Web Real-Time Communication: web instant messaging, enables real-time voice or video conversation in the browser API
- Canvas: HTML5 new element that can be used to draw graphics, icons, and any other visual image
Basic concepts in audio capture
- Camera: for capturing images and video
- Microphone: collect audio data
- Frame rate: a second image acquisition times. The higher the frame rate, the more smooth and fluid
- Rail: The concept of reference multimedia, data are independent of each track, such as MP4 audio tracks, video tracks, are respectively stored
- Flow: it can be understood as a container. In WebRTC, the media stream may be divided into stream (MediaStream) and data streams (DataStream).
- Resolution: 2K, 1080P, 720P and other, more clear, more bandwidth
3. The basic principles of audio and video equipment
-
Audio device
nature audio input device is acquired mainly voice data, and the data acquisition is an analog audio signal into a digital signal,
the data collected quantized, coded, and ultimately open into a digital signal, which audio device is work to be done.
Frequency range of human hearing is between 20Hz ~ 20kHz, 8kHz daily voice communication on the duo.
In order to pursue high-quality, high-fidelity, audio input device needs to set the sampling rate to the original signal intact in the 40kHz -
Video devices
when the physical light camera through the lens, it will pass analog to digital conversion of video equipment (A / D) modules, i.e. the optical sensor, the light is converted into a digital signal, i.e., RGB data is obtained RGB data, and then through the DSP optimization processing, such as automatic enhancement, white balance, color saturation, etc., until the 24-bit true color image
Analog to digital conversion using the collection called the Nyquist theorem Theorem:
The conversion process of performing analog / digital signal, when the sampling rate is greater than twice the highest frequency in the signal, a digital signal after sampling to retain the integrity of the information in the original signal.
talk is cheap, the code that runs when the following example will request the camera permission, consent to, the next step is to witness the miracle of the moment!
Second, the example
1. Example 1 - turning on the camera
This is the core function of photography, can later be used to make-up, squeeze acne, hair finishing
<!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>Results are as follows
示例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 中包含哪些类型的媒体轨（音频轨、视频轨），并且可为这些媒体轨设置一些限制。