前言

正文

1. 開啟攝像頭和麥克風

2. 增加播控按鈕

3. 本地預覽拍照

4. 保存預覽照片

5. 顯示貼圖效果（封面）

6. 視頻預覽特效（多種效果）

6.1 曝光效果

6.2 懸浮立體效果

6.3 磨皮效果

6.4 反色效果

結論

前言

今天這篇文章給大家介紹一款非常簡單的基于WebRTC采集端的視頻預覽播放器，

正文

我們需要做的是本地預覽的視頻播放器，那么首先肯定是要打開攝像頭，然后顯示播放器控制按鈕，最后再增加一些輔助功能，比如拍照、保存照片、貼圖、視頻特效等，接下來，我們就具體看看某個環節的操作，為了保證演示效果，建議嘗試的小伙伴使用chrome瀏覽器，

1. 開啟攝像頭和麥克風

打開攝像頭可以使用WebRTC三大介面之一的getUserMedia方法來實作，具體可以參考如下代碼：

    let getUserMedia=(navigator.getUserMedia ||navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
    getUserMedia.call(navigator,{
        video:true
    },function(localMediaStream){  
        let video =document.getElementById('video1');
        video.srcObject = localMediaStream;
    },function(e) {
        console.log("error: ",e);
    });

正常情況下，chrome瀏覽器會在左上角彈出授權提示框，讓我們選擇，此時，我們選擇“允許”，

授權后，瀏覽器就打開了我們的攝像頭，此時，我們會看到本地的視頻預覽畫面，如下圖所示：

當然，我們也可以在呼叫getUserMedia方法的時候，設定“audio=true”請求打開我們本地的麥克風，

2. 增加播控按鈕

打開攝像頭后，我們可以預覽自己的本地視頻，但是我們如何操作自己的攝像頭和揚聲器？如果我們想要控制自己的攝像頭和揚聲器，就需要設定一下 video 標簽的另外一個屬性設定：controls引數，具體使用情況可以參考如下代碼：

<video id="video1" style="width: 400px; height: 300px" autoplay controls playsinline></video>

設定好后，我們再次啟動播放器，我們就會發現視頻預覽畫面多了一些播放器的控制按鈕，如下圖所示：

通過這些控制按鈕，我們可以操作本地視頻畫面的播放和暫停，揚聲器的開關，啟動和取消全屏，以及開啟畫中畫的功能，

3. 本地預覽拍照

為了實作本地拍照功能，我們增加一個“拍照”按鈕，用來實作當前一幀視頻畫面的截取，在視頻預覽視窗的下方增加一個靜態畫面的展示視窗，具體如下圖所示，注意：上方是活動的視頻視窗，下方是顯示拍照效果的視窗，

拍斬訓面的尺寸也設定為寬400px，高300px，關鍵代碼參考如下：

let photo = document.querySelector("canvas#photo");
photo.width = 400;
photo.height = 300;

let video =document.getElementById('video1');
photo.getContext("2d").drawImage(video, 0, 0, photo.width, photo.height);

4. 保存預覽照片

為了便于觀察，我們調整一下視頻畫面和照片的顯示位置，水平排列，注意：左側是活動的視頻視窗，右側是靜止的照片視窗，增加一個保存照片的按鈕，關鍵代碼如下：

let canvas = document.querySelector("canvas");
let a = document.createElement("a");
a.download = "photo";
a.href = canvas.toDataURL("image/jpeg");
document.body.appendChild(a);
a.click();
a.remove();

點擊“保存”按鈕，我們會發現，照片被下載到了本地，找到圖片的保存路徑，打開圖片，顯示效果如下圖所示：

說明保存的照片沒有問題，完美，

5. 顯示貼圖效果（封面）

接下來，我們在視頻預覽畫面上增加貼圖效果，也就是傳說的封面，該怎樣操作呢？我們這里可以利用 video 標簽的另一個屬性 poster 來實作這個效果，我們把提前準備好的 1024.jpg 主題圖片放到指定的目錄下并使用 poster 參考即可，

具體代碼參考如下：

<video id="video1" style="width: 400px; height: 300px" autoplay controls playsinline poster="1024.jpg"></video>

貼圖的效果如下圖所示：

6. 視頻預覽特效（多種效果）

為了增加視頻特效和原視頻的對比效果，我們再在原視頻視窗增加的旁邊一個播放器預覽視窗，左邊的是原視頻視窗，右邊的是特效視頻視窗，特效的展現效果主要是通過 -webkit-filter 濾鏡實作的，具體的特效如下所示：

6.1 曝光效果

6.2 懸浮立體效果

6.3 磨皮效果

6.4 反色效果

（來個動圖吧，不然總以為在處理靜態圖片）

結論

好了，到這里我們基本上就完成了開篇講到的本地視頻預覽的播放器，是不是非常簡單，而且非常炫？好啦，太晚了，今天就到這里吧，現在都凌晨1點鐘了，我還在趕這篇文章，我晚點會在評論區放上原始碼地址，作為一個demo工程，感興趣的同學可以自己DIY一下，晚安，2020年10月24日凌晨1點， *程式員節快樂*