WebRTC系列(1)-手把手教你實現一個瀏覽器拍照室Demo

時間 2019-11-20

原文原文鏈接

1.WebRTC開發背景javascript

　　因爲業務需求，須要在項目中實現實時音視頻通話功能，以前基於瀏覽器開發的Web項目要進行音視頻通話，須要安裝flash插件才能實現或者使用C/S客戶端進行通訊。隨着互聯網技術的驅動下，在不少場景下須要進行音視頻通訊，在生活中咱們如今使用電話愈來愈少，使用微信和視頻愈來愈多。在一些行業也須要進行音視頻實時通訊，如：在線教育，遠程醫療，保險理賠等等。有了WebRTC，能夠開發一些好的網頁應用，使得音視頻通話愈來愈簡單，無需安裝任何插件，只需打開網頁，就能實現音視頻通話，方然也能實現消息收發，文件收發等等，下面，根據本身平時的項目開發與，對WebRTC就行一個簡單的理解與概述，最終實現一個簡單的拍照室Demo。html

2.WebRTC歷史和概述前端

　　WebRTC是「網絡實時通訊」（Web Real Time Communication）的縮寫。它最初是爲了解決瀏覽器上視頻通話而提出的，即兩個瀏覽器之間直接進行視頻和音頻的通訊，不通過服務器。後來發展到除了音頻和視頻，還能夠傳輸文字和其餘數據。2010年5月，Google以6820萬美圓收購VoIP軟件開發商Global IP Solutions的GIPS引擎，並改成名爲「WebRTC」。WebRTC使用GIPS引擎，實現了基於網頁的視頻會議，並支持722，PCM，ILBC，ISAC等編碼，同時使用谷歌自家的VP8視頻解碼器；同時支持RTP/SRTP傳輸等。Google是WebRTC的主要支持者和開發者，它推進了WebRTC標準的確立。java

　　WebRTC是一門年輕的技術，從2011推出到2017年，一直髮展的不溫不火。根據一段時間的開發，我的認爲主要緣由有：各個瀏覽器的支持兼容程度和在互聯網環境下點對點可以鏈接的成功率。從2017年蘋果公司宣佈iOS11的Safari瀏覽器支持WebRTC，一些雲通訊產品例如騰訊雲通訊和網易雲通訊也是基於WebRTC上進行封裝二次開發，也間接的說明了WebRTC發展會愈來愈好。web

3.基本概念的瞭解canvas

　　爲了簡化開發，WebRTC在瀏覽器中API集成了大量的技術，解決了一些繁重的問題，如捕捉攝像頭和麥克風，處理音視頻流，傳輸層等等。api

捕捉攝像頭和麥克風

　　創建通訊平臺第一步要檢測用戶設備的攝像頭和麥克風權限，先檢測設備的可用性，而後在獲取用戶受權並與設備創建鏈接，最後獲取一段數據流。瀏覽器

音頻與視頻的編解碼

　　在互聯網要發送一段音視頻數據，技術優化了網絡數據，數據尺寸也仍是很大，因此要對數據在發送端編碼，而後在接收端解碼。WebRTC內置的幾種編解碼器包括：H.264,Opcus,iSAC,VP8。做爲前端開發的我，最這些編解碼技術固然不是很瞭解。幸運的是，當兩個瀏覽器回話時，會綜合兩端狀況選擇最優的編解碼器。安全

傳輸層

　　主要處理數據丟包，數據包排序以及創建用戶之間的鏈接問題服務器

會話管理

　　一般來講就是信令（Signaling），負責在瀏覽器中創建並管理多個鏈接。

4.獲取用戶媒體

　　建立一個基於WebRTC的通訊平臺，首先要經過用戶的網絡攝像頭和麥克風獲取實時的視頻和音頻流，能夠經過調用瀏覽器的getUserMedia API來實現。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>獲取媒體流</title>
</head>
<body>
<div id="app">
  <h1>獲取媒體流</h1>
  <video autoplay></video>
</div>
<script>
  function hasUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
  }

  if (hasUserMedia()) {
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    navigator.getUserMedia({video: true, audio: false}, function (stream) {
      console.log(stream);
      var video = document.querySelector('video');
      video.src=window.URL.createObjectURL(stream);
    }, function (err) {
      console.log(err);
    });
  } else {
    alert("Sorry, your browser does not support getUserMedia.");
  }
</script>
</body>
</html>

是否打開使用攝像頭權限

　　注意：打開攝像頭後獲取到的視頻流展現在Video標籤中，video標籤須要加上autoplay屬性視頻才能夠播放，在調試中能夠把getUserMedia方法參數中的audio設置爲：false，避免雜音太大，同理，把video設置爲false只能聽到本身說話而沒有畫面，能夠代替普通電話使用。

5.限制視頻流

　　咱們能夠經過設置參數來控制視頻和音頻是否使用，除此以外，咱們能夠傳入一個對象作更復雜的限制，如分辨率，視頻寬高比等等。

navigator.getUserMedia({video: {
        width: 320,
        /*height:240,*/
        aspectRatio:1.77
      }, audio: false}, function (stream) {
      console.log(stream);
      var video = document.querySelector('video');
      video.src=window.URL.createObjectURL(stream);
    }, function (err) {
      console.log(err);
    });

能夠根據本身業務需求來設置固定的寬高或分辨率等等。

6.完成一個拍照室Demo

　　經過調用攝像頭獲取到的視頻流以及H5的canvas標籤咱們能夠完成一個簡易的拍照功能。

增長一個拍照按鈕以及一個canvas,修改後的整個頁面代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>獲取媒體流</title>
</head>
<body>
<div id="app">
  <h1>獲取媒體流</h1>
  <video id="video" autoplay></video>
  <button type="button" onclick="capture()">點擊拍照</button>
  <canvas id="canvas" width="320" height="240"></canvas>
</div>
<script>
  function hasUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
  }

  if (hasUserMedia()) {
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    navigator.getUserMedia({video: {
        width: 320,
        height:240,
      }, audio: false}, function (stream) {
      console.log(stream);
      var video = document.querySelector('video');
      video.src=window.URL.createObjectURL(stream);
    }, function (err) {
      console.log(err);
    });
  } else {
    alert("Sorry, your browser does not support getUserMedia.");
  }

  function capture(){
    console.log('capture...');
    var cxt=document.getElementById('canvas').getContext('2d');
    var video=document.getElementById('video');
    cxt.drawImage(video,0,0);
  }
</script>
</body>
</html>

如今單擊一個點擊拍照按鈕，能夠捕捉視頻的某一幀並同時繪製到canvas上，加上canvas功能原本就很強大，後期對照片的旋轉，剪裁，濾鏡也都是能夠實現的。

延伸：如今不少WebApp上要實時上傳證件功能，咱們經過這種WebRTC+canvas也是能夠實現的，並且是瀏覽器直接調的硬件拍照，有沒有很溜。

7.開發中遇到的問題

　　在直接用http打開本地服務器頁面是調用不了攝像頭的，瀏覽器的限制認爲http下是不安全的，可是能夠用127.0.0.1或者localhost來代替本機ip。網頁部署到服務器時也得使用https協議來返回頁面，不然，沒法調用攝像頭。

　　以上簡單的介紹了WebRTC的發展歷史以及一些基本概念，讓你們對其有個初步的瞭解，最後經過調用攝像頭完成一個拍照室的Demo。後續文章再詳細的寫如何經過WebRTC來實現點對點通訊，相信WebRTC功能會愈來愈強大，這只是第一步。

參考資料：

《Learning WebRTC 中文版》　

《JavaScript 標準參考教程（alpha）阮一峯》

WebRTC百科

轉載請註明出處，謝謝。