一、前言

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；
    對於音頻則是開啟迴音消除、降噪以及自動增益功能。

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】

※高價收購3C產品,價格不怕你比較

※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!!

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※3c收購,鏡頭收購有可能以全新價回收嗎?

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!