長得好看的人如何用瀏覽器進行自拍

時間 2019-11-26

原文原文鏈接

1、前言

首先這裏核心技術是webrtc和canvas
Web Real-Time Communication：網頁即時通訊，能夠在瀏覽器進行實時語音或者視頻對話的API
Canvas：HTML5中的新元素,能夠用來來繪製圖形、圖標、以及其它任何視覺性圖像html

talk is cheap, 上代碼，如下示例運行的時候會請求攝像頭權限，贊成便可，are you ready，接下來就是見證奇蹟的時刻！web

2、示例

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-拍照保存

<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>

3、重點功能說明

1.重點方法和參數

方法：avigator.mediaDevices.getUserMedia(constraints);
返回一個promise對象，調用成功，能夠經過promise對象獲取MediaStream對象，canvas
參數：mediaStreamContrains
傳入的constraints參數類型爲 MediaStreamConstraints，能夠指定 MediaStream 中包含哪些類型的媒體軌（音頻軌、視頻軌），而且可爲這些媒體軌設置一些限制。
視頻的幀率最小 20 幀每秒；寬度最小是 640，理想的寬度是 1280；高度最小是 360，最理想高度是 720；寬高比是 16:9；對於音頻則是開啓迴音消除、降噪以及自動增益功能。promise

2.音頻採集的基本概念

攝像頭：用於採集圖像和視頻
麥克風：採集音頻數據
幀率：一秒鐘採集圖像的次數。幀率越高，越平滑流暢
軌：借鑑了多媒體的概念，每條軌數據都是獨立的，如MP4中的音頻軌、視頻軌，是分別被存儲的
流：能夠理解爲容器。在WebRTC中，流能夠分爲媒體流（MediaStream）和數據流（DataStream）。
分辨率：2K、1080P、720P等，越清晰，佔用帶寬越多

3.音視頻設備的基本原理

音頻設備
音頻輸入設備主要是採集音數據，而採集音頻數據的本質是模擬信號轉成數字信號，
採集到的數據通過量化、編碼，最終開成數字信號，這就是音頻設備要完成的工做。
人的聽覺範圍的頻率是20Hz~20kHz之間，平常語音交流8kHz就哆了。
爲了追求高品質、高保真，須要將音頻輸入設備採樣率設置在40kHz上才能完整保留原始信號瀏覽器
視頻設備
當實物光經過鏡頭進行攝像機後，它會經過視頻設備的模數轉換（A/D）模塊，即光學傳感器，將光轉換成數字信號，即RGB數據，得到RGB數據後，再經過DSP進行優化處理，如自動加強、白平衡、色彩飽和等，等到24位的真彩色圖片app

模數轉換使用的採集定理稱爲奈奎斯特定理：ide

在進行模擬 / 數字信號的轉換過程當中，當採樣率大於信號中最高頻率的 2 倍時，採樣以後的數字信號就完整地保留了原始信號中的信息。優化

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。