靚仔靚女如何用瀏覽器自拍和儲存
阿新 • • 發佈：2019-11-26
一、前言
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 中包含哪些型別的媒體軌（音訊軌、視訊軌），並且可為這些媒體軌設定一些限制。
視訊的幀率最小 20 幀每秒；
寬度最小是 640，理想的寬度是 1280；
高度最小是 360，最理想高度是 720；
寬高比是 16:9；
對於音訊則是開啟迴音消除、降噪以及自動增益功能。