WebRTC進階流媒體服務器開發（二）Mediasoup環境配置

回顧Mediasoup架構

（一）架構服務分析

服務端提供3個服務：

1.www服務，瀏覽器通過訪問服務器目錄獲取客戶端代碼，通過V8引擎，啟動底層WebRTC

2.nodejs提供websocket服務和http服務，用於信令交互

3.Mediasoup C++提供的流媒體服務，用於音視頻的分享與抓取

（二）信靈服務和流媒體服務-----Server目錄

通過啟動server.js,會啟動信令服務與C++的音視頻媒體流服務

（三）WWW服務----在nodejs啟動的https服務下

而啟動客戶端所需要的WWW服務，實際是放在另外目錄下，這里放在下面的目錄中，使用server.js啟動https服務，public目錄中存放需要的靜態文件

（四）Mediasoup特性

 

STCP：對於DataChannel使用了SCTP協議（流控傳輸協議） 會話層,傳輸非音視頻數據

一：Mediasoup環境安裝

（一）安裝NodeJs環境

見：https://www.cnblogs.com/ssyfj/p/14781982.html

（二）下載Mediasoup-demo源碼

git clone https://github.com/versatica/mediasoup-demo.git

app：應用目錄，可以提供www服務，下發客戶端代碼，當mediasoup環境搭建完成后，瀏覽器去app目錄中獲取客戶端代碼（通過npm去按照package.json文件獲取）

package.json文件如下：

{
  "name": "mediasoup-demo-app",
  "version": "3.0.0",
  "private": true,
  "description": "mediasoup demo app",
  "author": "Iñaki Baz Castillo <[e-mail]>",
  "license": "All Rights Reserved",
  "main": "lib/index.jsx",
  "scripts": {
    "lint": "eslint -c .eslintrc.js --ext .js,.jsx gulpfile.js lib",
    "start": "gulp live"
  },
  "dependencies": {
    "@babel/runtime": "^7.8.4",
    "bowser": "^2.11.0",
    "classnames": "^2.2.6",
    "clipboard-copy": "^3.1.0",
    "debug": "^4.3.1",
    "domready": "^1.0.8",
    "face-api.js": "^0.21.0",
    "hark": "^1.2.3",
    "js-cookie": "^2.2.1",
    "mediasoup-client": "github:versatica/mediasoup-client#v3",　　//客戶端與流媒體服務器通訊，使用的是mediasoup-client庫。將文件下載到流媒體服務器，之后客戶端瀏覽器去app文件下獲取即可 "pokemon": "^2.0.2",
    "prop-types": "^15.7.2",
    "protoo-client": "^4.0.5",
    "random-string": "^0.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-draggable": "^3.3.2",
    "react-dropzone": "^10.2.1",
    "react-redux": "^7.2.0",
    "react-spinner": "^0.2.7",
    "react-tooltip": "^3.11.1",
    "react-transition-group": "^4.3.0",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "riek": "^1.1.0",
    "url-parse": "^1.4.7"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "babel-plugin-jsx-control-statements": "^4.0.0",
    "babelify": "^10.0.0",
    "browser-sync": "^2.26.7",
    "browserify": "^16.5.0",
    "del": "^5.1.0",
    "envify": "^4.1.0",
    "eslint": "^6.8.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-control-statements": "^2.2.1",
    "eslint-plugin-react": "^7.18.3",
    "gulp": "^4.0.2",
    "gulp-css-base64": "^1.3.4",
    "gulp-eslint": "^6.0.0",
    "gulp-header": "^2.0.9",
    "gulp-if": "^3.0.0",
    "gulp-plumber": "^1.2.1",
    "gulp-rename": "^1.4.0",
    "gulp-stylus": "^2.7.0",
    "gulp-touch-cmd": "0.0.1",
    "gulp-uglify-es": "^2.0.0",
    "gulp-util": "^3.0.8",
    "mkdirp": "^0.5.1",
    "ncp": "^2.0.0",
    "nib": "^1.1.2",
    "supports-color": "^7.1.0",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0",
    "watchify": "^3.11.1"
  }
}

broadcasters：用於推流的模塊

server：信令服務和媒體流服務，兩者通過管道通信。下面目錄中只有js代碼，C++代碼是nodejs的依賴庫，通過package.json去下載運行

package.json文件：

{
  "name": "mediasoup-demo-server",
  "version": "3.0.0",
  "private": true,
  "description": "mediasoup demo server",
  "author": "Iñaki Baz Castillo <[e-mail]>",
  "license": "All Rights Reserved",
  "main": "lib/index.js",
  "scripts": {
    "lint": "eslint -c .eslintrc.js server.js lib connect.js",
    "start": "DEBUG=${DEBUG:='*mediasoup* *INFO* *WARN* *ERROR*'} INTERACTIVE=${INTERACTIVE:='true'} node server.js",
    "connect": "node connect.js"
  },
  "dependencies": {
    "@sitespeed.io/throttle": "^0.5.4",
    "awaitqueue": "^2.3.3",
    "body-parser": "^1.19.0",
    "colors": "^1.4.0",
    "debug": "^4.3.1",
    "express": "^4.17.1",
    "heapdump": "^0.3.15",
    "mediasoup": "github:versatica/mediasoup#v3", "pidusage": "^2.0.21",
    "protoo-server": "^4.0.5"
  },
  "devDependencies": {
    "eslint": "^6.8.0",
    "gulp": "^4.0.2",
    "gulp-eslint": "^6.0.0",
    "gulp-plumber": "^1.2.1"
  }
}

（三）配置服務端

1.進入服務端目錄

cd server

2.安裝server端所需要的所有第三方庫，包括前面提及的C++代碼

npm install

其中多了一個node_modules目錄就是安裝的依賴庫

3.修改配置文件

cp config.example.js config.js

const os = require('os');

module.exports =
{
    domain : process.env.DOMAIN || 'localhost',
 https :　　//https配置
    {
        listenIp   : '0.0.0.0',
        listenPort : process.env.PROTOO_LISTEN_PORT || 4443,
        tls        :　　//安全機制，配置密鑰
        {
            cert : process.env.HTTPS_CERT_FULLCHAIN || `${__dirname}/certs/fullchain.pem`,　　
            key  : process.env.HTTPS_CERT_PRIVKEY || `${__dirname}/certs/privkey.pem`
        }
    },
    // mediasoup settings.
 mediasoup :
    {
        numWorkers     : Object.keys(os.cpus()).length,　　//配置進程數量，默認按照CPU數量
        workerSettings :
        {
            logLevel : 'warn',　　//日志級別
            logTags  :
            [
                'info',
                'ice',
                'dtls',
                'rtp',
                'srtp',
                'rtcp',
                'rtx',
                'bwe',
                'score',
                'simulcast',
                'svc',
                'sctp'
            ],
            rtcMinPort : process.env.MEDIASOUP_MIN_PORT || 40000,　　//端口信息，流媒體服務器服務很多個客戶端，所以需要一個端口池（最小，最大），每個客戶端對應一個端口
            rtcMaxPort : process.env.MEDIASOUP_MAX_PORT || 49999
        },
 routerOptions :　　//room
        {
            mediaCodecs :
            [
                {
                    kind      : 'audio',
                    mimeType  : 'audio/opus',
                    clockRate : 48000,
                    channels  : 2
                },
                {
                    kind       : 'video',
                    mimeType   : 'video/VP8',
                    clockRate  : 90000,
                    parameters :
                    {
                        'x-google-start-bitrate' : 1000
                    }
                },
                {
                    kind       : 'video',
                    mimeType   : 'video/VP9',
                    clockRate  : 90000,
                    parameters :
                    {
                        'profile-id'             : 2,
                        'x-google-start-bitrate' : 1000
                    }
                },
                {
                    kind       : 'video',
                    mimeType   : 'video/h264',
                    clockRate  : 90000,
                    parameters :
                    {
                        'packetization-mode'      : 1,
                        'profile-level-id'        : '4d0032',
                        'level-asymmetry-allowed' : 1,
                        'x-google-start-bitrate'  : 1000
                    }
                },
                {
                    kind       : 'video',
                    mimeType   : 'video/h264',
                    clockRate  : 90000,
                    parameters :
                    {
                        'packetization-mode'      : 1,
                        'profile-level-id'        : '42e01f',
                        'level-asymmetry-allowed' : 1,
                        'x-google-start-bitrate'  : 1000
                    }
                }
            ]
        },
 webRtcTransportOptions :　　//webrtc傳輸選項---瀏覽器傳輸協議
        {
            listenIps :
            [
                {
                    ip          : process.env.MEDIASOUP_LISTEN_IP || '127.0.0.1',　　//寫為本機iP（服務器中可以寫為0.0.0.0或者服務器IP任何一個網卡都可以接受推流）
                    announcedIp : process.env.MEDIASOUP_ANNOUNCED_IP
                }
            ],
            initialAvailableOutgoingBitrate : 1000000,
            minimumAvailableOutgoingBitrate : 600000,
            maxSctpMessageSize              : 262144,
            maxIncomingBitrate              : 1500000
        },
 plainTransportOptions :　　//非瀏覽器---普通RTP傳輸協議
        {
            listenIp :
            {
                ip          : process.env.MEDIASOUP_LISTEN_IP || '127.0.0.1',　　　　//同上
                announcedIp : process.env.MEDIASOUP_ANNOUNCED_IP
            },
            maxSctpMessageSize : 262144
        }
    }
};

4.配置密鑰，現在安裝部署基本完成，由於V3版本必須要密鑰，現生成密鑰：

在server目錄下創建certs目錄

mkdir certs

在server/certs下執行：

openssl genrsa > privkey.pem
openssl req -new -x509 -key privkey.pem > fullchain.pem

 

（四）配置App應用端，使得客戶端可以通過WWW服務獲取客戶端應用代碼

1.進入APP應用目錄：

cd app

2.安裝app端所需要的所有第三方庫

npm install

3.全局安裝 gulp-cli 客戶端工具：

sudo npm install -g gulp-cli

（五）啟動測試

1.啟動服務端程序（server目錄）

sudo npm start  或者 sudo node server.js

2.啟動www服務，提供鏈接給客戶端程序訪問（app目錄）

sudo gulp live 

3.結果顯示

二：Nodejs服務端開發結合mediasoup

（一）Nodejs服務端開發

見：WebRTC學習（二）Web服務器搭建

'use strict'
var https = require("https");
var fs = require("fs");

var express = require("express");
var serveIndex = require("serve-index");


var app = express();                    //實例化express
app.use(serveIndex("./public"));        //設置首路徑，url會直接去訪問該目錄
app.use(express.static("./public"));    //可以訪問目錄下的所有文件
//https server
var options = {
    key : fs.readFileSync("./ca/learn.webrtc.com-key.pem"),            //同步讀取文件key
    cert: fs.readFileSync("./ca/learn.webrtc.com.pem"),                //同步讀取文件證書
};

var https_server = https.createServer(options,app);
https_server.listen(443,"0.0.0.0");

注意：使用npm安裝模塊

npm install express
npm install serve-index

注意：參考本地https快速解決方案——mkcert安裝證書

（二）整合mediasoup資源到服務端

1.從一中，我們使用sudo gulp live命令，啟動app端后，在mediasoup-demo/server目錄中生成了public資源目錄

2.我們將這個public目錄拷貝到開發的server.js文件所在目錄中

（三）結果測試

1.啟動server.js，監聽4443端口，處理websocket消息，開啟信令服務和流媒體傳輸服務

sudo node server.js

注意：必須啟動server端服務，否則會出現Websocket connection failed錯誤！！

注意：我們在server斷配置的config文件中demain域名為localhost，所以我們必須使用localhost去訪問！！！

使用sudo netstat -ntpl查看監聽端口

2.啟動https服務，使得客戶端通過瀏覽器獲取對應app代碼

3.測試結果顯示

三：mediasoup調試

（一）服務端代碼調試見：WebRTC學習（二）Web服務器搭建

（二）Demo Dump工具：獲取mediasoup房間信息、用戶信息、傳輸信息...獲取運行狀態

方法一：啟動時，設置環境變量，進入控制界面（開發調試）
方法二：正常啟動，通過node connect.js連接到服務端，可以與服務端進行交互（線上發布后使用）

方法一使用：export INTEXACTIVE=1; sudo node server.js----沒成功（使用sudo npm start可以成功）

- h,  help                    : show this message　　顯示幫助信息 - usage                       : show CPU and memory usage of the Node.js and mediasoup-worker processes　　顯示（Nodejs和mediasoup worker進程）的CPU和內存使用情況 - logLevel level              : changes logLevel in all mediasoup Workers　　顯示日志級別 - logTags [tag] [tag]         : changes logTags in all mediasoup Workers (values separated by space)　　
- dw, dumpWorkers             : dump mediasoup Workers　　打印worker進程數量 - dr, dumpRouter [id]         : dump mediasoup Router with given id (or the latest created one)　　打印Room數量
- dt, dumpTransport [id]      : dump mediasoup Transport with given id (or the latest created one)　　打印傳輸
- dp, dumpProducer [id]       : dump mediasoup Producer with given id (or the latest created one)
- dc, dumpConsumer [id]       : dump mediasoup Consumer with given id (or the latest created one)
- ddp, dumpDataProducer [id]  : dump mediasoup DataProducer with given id (or the latest created one)
- ddc, dumpDataConsumer [id]  : dump mediasoup DataConsumer with given id (or the latest created one)
- st, statsTransport [id]     : get stats for mediasoup Transport with given id (or the latest created one)
- sp, statsProducer [id]      : get stats for mediasoup Producer with given id (or the latest created one)
- sc, statsConsumer [id]      : get stats for mediasoup Consumer with given id (or the latest created one)
- sdp, statsDataProducer [id] : get stats for mediasoup DataProducer with given id (or the latest created one)
- sdc, statsDataConsumer [id] : get stats for mediasoup DataConsumer with given id (or the latest created one)
- hs, heapsnapshot            : write a heapdump snapshot to file
- t,  terminal                : open Node REPL Terminal

1.usage使用:顯示（Nodejs和mediasoup worker進程）的CPU和內存使用情況

2.dw使用:打印worker進程數量,可以從下面發現，進程中還沒有room存在！

3.t使用：進入終端,獲取對象的詳細信息（.exit推出）

方法二使用：node connect.js,注意，需要啟動server.js,使用sudo node server.js

其他參數一致！！

開啟客戶端后調試：創建房間

4.dr的使用，打印房間信息

5.dt的使用，打印傳輸通道信息

6.打印通道信息