WebRTC環境搭建| 掘金技術徵文

BrigandShi發表於2019-04-14
Web

Web環境搭建

  • WebRCT在瀏覽器使用場景較多，因此基於原生的js編寫更為順手，所以使用node.js作為Web伺服器。
  • node.js版本升級迭代較為快速，版本較多，因此使用多版本管理工具nvm

安裝nvm

wget https://github.com/creationix/nvm/archive/v0.34.0.tar.gz
./install.sh //獲取安裝指令碼
source ~/.bash_profile //設定環境變數
nvm --version //檢視版本
nvm list-remote //列出所有可安裝的版本
nvm install v10.15.3 //安裝相應的版本,這裡安裝的是v10.15.3
nvm ls //檢視一下你當前已經安裝的版本
nvm use v10.15 3 //切換版本
nvm alias default //設定預設版本
複製程式碼

安裝第三模組

  • Express提供了更好的Web服務功能
mkdir web
cd web
npm install express
複製程式碼

開啟HTTPS

  • 使用WebRTC需要呼叫多媒體攝像，需要更加嚴格的傳輸，因此必須使用HTTPS

申請證書

  • 剛購買的域名會免費贈送一年https證書
    WebRTC環境搭建| 掘金技術徵文
  • 進入證書控制檯首頁
    WebRTC環境搭建| 掘金技術徵文
  • 申請驗證
    WebRTC環境搭建| 掘金技術徵文
  • 下載證書

WebRTC環境搭建| 掘金技術徵文

解析域名

  • 因為要解析IP，所以選擇A記錄型別
  • 填寫申請證書寫的二級域名
  • 記錄值為伺服器主機IP

WebRTC環境搭建| 掘金技術徵文

上傳證書

//上傳證書
scp 2060073_juejin.shuxiaoda.com_other.zip root@shuxiaoda.com:/root/web/cert/
//進入目錄
cd /root/web/cert
//安裝unzip
yum install unzip
//解壓證書
unzip 2060073_juejin.shuxiaoda.com_other.zip 
複製程式碼

開啟服務

  • 建立index.js
var https = require('https'); //https模組
var fs = require('fs'); //讀取檔案模組
var express = require('express'); //開啟web服務模組
//讀取證書
options = {
    key : fs.readFileSync('/cert/2016927_test.shuxiaoda.com.key'),
    cert : fs.readFileSync('/cert/2016927_test.shuxiaoda.com.pem')
}
var https_server = https.createServer(options,app);
https_server.listen(443,'0.0.0.0'); //監聽https預設443埠，繫結所有網路卡
複製程式碼

測試WebRTC

  • 在web目錄下建立public資料夾
  • 在public下建立index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>測試WebRTC</title>
</head>
<body>
    <script>
        //開啟音訊攝像頭許可權
       navigator.mediaDevices.getUserMedia({audio: true, video: true});
    </script>
</body>
</html>
複製程式碼
  • 返回web目錄下，啟動index.js
  • 在瀏覽器就你看到WebRTC呼叫攝像頭許可權了

WebRTC環境搭建| 掘金技術徵文

WebRTC環境搭建| 掘金技術徵文

相關文章