windows mediasoup-demo 公網部署 解決部署后無法看到對方的視頻


環境

  • Windows10 操作系統
  • node -v
    • v14.17.6(官網要求 >= v8.6.0)
  • npm -v
    • 7.22.0
  • git --version
    • git version 2.29.2.windows.2
  • python -V
    • Python 2.7.18(-V大寫,試了 python3 不行,不清楚什么原因。)
  • visual studio v2017 及以上(官網要求 2015 以上),我使用了 VS2017。(Visual Studio 不是 Visual Studio Code)

ps: mediasoup的流媒體服務是C++編寫的,編譯需要依賴visual studio。

其他設置

  1. 將 VS2017 的 MSBuild.exe 加入到 Path 中。類似:C:\somepath\Microsoft Visual Studio\2019\somepath\MSBuild\Current\Bin,並不絕對相同,需要找一找 MSBuild 目錄下面...bin下面會有 MSBuild.exe。
    1. 完整路徑例子:C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\MSBuild\15.0\Bin
  2. 新建環境變量 GYP_MSVS_VERSION ,值為 visual studio 的版本。如果使用的是 VS2017 就寫 2017。
  3. node-gyp: https://github.com/nodejs/node-gyp#on-windows
npm install -g node-gyp

 server編譯時可能會遇到的錯誤:

gyp ERR! find VS msvs_version not set from command line or npm config
gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
gyp ERR! find VS checking VS2017 (15.9.28307.1622) found at:
gyp ERR! find VS "C:\Program Files (x86)\Microsoft Visual Studio\2017\Community"
gyp ERR! find VS - "Visual Studio C++ core features" missing
gyp ERR! find VS could not find a version of Visual Studio 2017 or newer to use
gyp ERR! find VS looking for Visual Studio 2015
gyp ERR! find VS - not found
gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
gyp ERR! find VS
gyp ERR! find VS **************************************************************
gyp ERR! find VS You need to install the latest version of Visual Studio
gyp ERR! find VS including the "Desktop development with C++" workload.
gyp ERR! find VS For more information consult the documentation at:
gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
gyp ERR! find VS **************************************************************
gyp ERR! find VS

按要求安裝visual studio(不報上面的錯就無所謂,本地多半以前安裝過,但是服務器上可能需要安裝。):

Install tools and configuration manually:
- Install Visual C++ Build Environment: Visual Studio Build Tools (using "Visual C++ build tools" workload) or Visual Studio Community (using the "**Desktop development with C++**" workload)
- Launch cmd, **npm config set msvs_version 2017**
Visual Studio Build Tools 版本的vs需要Visual C++ build tools模塊,Community 版本的需要**Desktop development with C++**模塊,通過 Visual Studio Installer 配置。

 

下載項目

// npm config set registry https://registry.npm.taobao.org
git clone https://github.com/versatica/mediasoup-demo.git
//注意:cnpm 如果出錯 就用 npm

 

或許需要
cd mediasoup-demo
git checkout v3

切換到 v3。目前應該默認就是 v3 版本,如果更新就需要切換。

github 比較難以訪問,可以使用 gitee 中已經同步過的項目,項目地址為: https://gitee.com/xunxinyuan/mediasoup-demo.git
 
修改包

進入 server 文件夾,打開 package.json 文件。修改第 22 行,為 ,(app 里面相應的也可以改)

// "mediasoup": "github:versatica/mediasoup#v3",
"mediasoup": "^3.6.16"
如果不修改此行,會從 github 中下載 mediasoup-v3 版本的依賴,可能會超級慢。修改后會直接從 npm 的鏡像源中下載。

 

服務端下載依賴、編譯

cd server
npm install

 

可能編譯挺長時間,會下載、生成使用C++編寫的 mediasoup 底層流媒體服務。*/server/node_modules/mediasoup 這個目錄,這個項目下的 worker目錄下就是 c++ 源碼,后續自己有修改后直接make就可以?。
“E:\yttx_meeting\server\node_modules\mediasoup\worker\mediasoup-worker.sln”(默認目標) (1) ->
“E:\yttx_meeting\server\node_modules\mediasoup\worker\deps\openssl\openssl.vcxproj”(默認目標) (8) ->
(Lib 目標) ->
  rand_egd.obj : warning LNK4221: 此對象文件未定義任何之前未定義的公共符號,因此任何耗用此庫的鏈接操作都不會使用此文件 [E:\yttx_meeting\server\node_modules\mediasoup\worker\deps\openssl\openssl.vcxproj]
  ecp_nistputil.obj : warning LNK4221: 此對象文件未定義任何之前未定義的公共符號,因此任何耗用此庫的鏈接操作都不會使用此文件 [E:\yttx_meeting\server\node_modules\mediasoup\worker\deps\openssl\openssl.vcxp
roj]
  ecp_nistp521.obj : warning LNK4221: 此對象文件未定義任何之前未定義的公共符號,因此任何耗用此庫的鏈接操作都不會使用此文件 [E:\yttx_meeting\server\node_modules\mediasoup\worker\deps\openssl\openssl.vcxpr
oj]
  ecp_nistp256.obj : warning LNK4221: 此對象文件未定義任何之前未定義的公共符號,因此任何耗用此庫的鏈接操作都不會使用此文件 [E:\yttx_meeting\server\node_modules\mediasoup\worker\deps\openssl\openssl.vcxpr
oj]
  ecp_nistp224.obj : warning LNK4221: 此對象文件未定義任何之前未定義的公共符號,因此任何耗用此庫的鏈接操作都不會使用此文件 [E:\yttx_meeting\server\node_modules\mediasoup\worker\deps\openssl\openssl.vcxpr
oj]
  ebcdic.obj : warning LNK4221: 此對象文件未定義任何之前未定義的公共符號,因此任何耗用此庫的鏈接操作都不會使用此文件 [E:\yttx_meeting\server\node_modules\mediasoup\worker\deps\openssl\openssl.vcxproj]


    16 個警告
    0 個錯誤


已用時間 00:07:56.51
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})


added 792 packages from 415 contributors and audited 793 packages in 508.401s


26 packages are looking for funding
  run `npm fund` for details


found 11 vulnerabilities (7 low, 2 moderate, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details

 

客戶端下載依賴、編譯

進入 mediasoup-demo/app 文件夾,(可以修改 .eslintrc.js 文件中 linebreak-style 配置項,原先為 unix(對應linux),修改為 windows)

依次運行以下命令:
npm install -g gulp-cli
npm install

 

如果報錯:
npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name ">=^16.0.0": Tags may not have any characters that encodeURIComponent encodes.

運行:

npm install --legacy-peer-deps

 

修改配置文件

客戶端和服務端在一個項目里,配置是相互的。客戶端(app)也使用的 /server/ 里面的 config.js 配置,客戶端編譯會把靜態文件輸出到 ./server/public 目錄,本地服務也是監聽的 ./server/public 。

 
復制 server 文件夾下的 config.example.js,修改為 config.js ,按照自己的情況修改。

簽名證書和https信令監聽端口

在 server 文件夾下新增 certs 文件夾,將自己的公鑰證書和私鑰證書放進去。修改 config.js 的配置。cert 為公有證書,key 為私有證書。
可以參考這個鏈接生成證書:https://www.chinassl.net/ssltools/free-ssl.html
https  : {
        listenIp   : '0.0.0.0',
        // NOTE: Don't change listenPort (client app assumes 4443).
        listenPort : process.env.PROTOO_LISTEN_PORT || 4443,
        // NOTE: Set your own valid certificate files.
        tls        : {
            cert : process.env.HTTPS_CERT_FULLCHAIN || `${__dirname}/certs/www.*****.com.pem`,
            key  : process.env.HTTPS_CERT_PRIVKEY || `${__dirname}/certs/www.*****.com.key`
        }
    },
這里的 4443 端口,對應app建立wss的端口,文件為app/lib/urlFactory.js
let protooPort = 4443;

if (window.location.hostname === 'test.mediasoup.org')
    protooPort = 4444;

export function getProtooUrl({ roomId, peerId })
{
    const hostname = window.location.hostname;

    return `wss://${hostname}:${protooPort}/?roomId=${roomId}&peerId=${peerId}`;
}

如果要改端口,兩個一起改。

 

webRtcTransportOptions 和 plainTransportOptions 的 listenIps

ip配置我用'0.0.0.0'也能使用,有的資料顯示配置成本機的內網IP也可以正常運行,看情況,如果有問題都可以試一下。建議先使用 0.0.0.0 試一下。

announcedIP 使用內網測試沒問題,服務器部署就設置為公網IP。

listenIps : [
                {
                    ip          : process.env.MEDIASOUP_LISTEN_IP || '0.0.0.0',
                    announcedIp : 'XXX.XXX.XXX.XXX'
                }
            ],

 

 

運行

進入 server 文件夾,運行命令行設置臨時環境變量
set DEBUG=${DEBUG:="*mediasoup* *INFO* *WARN* *ERROR*"} INTERACTIVE=${INTERACTIVE:="true"}
運行服務端:
node server.js

 

 也可以不設置環境變量,直接運行 node server.js ,主要是設置  INTERACTIVE ,server.js 有一項通過這個參數開啟:

run();

async function run()
{
    // Open the interactive server.
    await interactiveServer();

    // Open the interactive client.
    if (process.env.INTERACTIVE === 'true' || process.env.INTERACTIVE === '1')
        await interactiveClient();

    // Run a mediasoup Worker.
    await runMediasoupWorkers();

    // Create Express app.
    await createExpressApp();

    // Run HTTPS server.
    await runHttpsServer();

    // Run a protoo WebSocketServer.
    await runProtooWebSocketServer();

    // Log rooms status every X seconds.
    setInterval(() =>
    {
        for (const room of rooms.values())
        {
            room.logStatus();
        }
    }, 120000);
}

 

 運行客戶端

 進入 app 文件夾,運行命令行窗口

gulp live

可以在 app/gulpfile.js 中看到配置:

gulp.task('live', gulp.series(
    'browser:base',
    (done) =>
    {
        const config = require('../server/config');

        browserSync(
            {
                open      : 'external',
                host      : config.domain,
                startPath : '/?info=true',
                server    :
                {
                    baseDir : OUTPUT_DIR
                },
                https     : config.https.tls,
                ghostMode : false,
                files     : path.join(OUTPUT_DIR, '**', '*')
            });

        done();
    }
));

這個命令會打包輸出到 server/public ,並以此提供靜態文件服務。

會自動打開瀏覽器,或者瀏覽器中輸入 https://locahost:3000/ 也可以。可以在 browserSync 參數對象中添加 port 參數指定端口,默認不添加,指定的 3000。

 如果是要部署到服務器,單獨運行打包命令:

gulp dist

 

 

部署(服務器也需要上面的環境)

將整個 server 文件夾上傳到服務器,並使用 Web 服務器(Apache、Nginx 、IIS、node koa 等)公開該 server/public 文件夾,也可以復制走,放到其他位置。

再根據服務器配置 server/config.js 。

運行!

如果希望將它作為守護進程/服務運行,可以使用 pm2 進程管理器。或者可以在其他選項中將其 dockerize。

 

部署后無法看到對方的視頻

首先,前面設置過的 ip 可以嘗試更換一下,可能和內網、公網IP可能不一致有關。

然后有一個最重要的地方(config.js):

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

服務器需要單獨設置開放  rtcMinPort 和 rtcMaxPort 這個范圍端口的公網 UDP 訪問權限。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM