mediasoup-demo 적용

 

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

GitHub - versatica/mediasoup-demo: mediasoup official demo application

\\

$ git clone https://github.com/versatica/mediasoup-demo.git
$ cd mediasoup-demo
$ git checkout v3

$ cd server
$ sudo npm install

$ cp config.example.js config.js

 

$ cd app
# For node 16
$ sudo npm install
# For node 18, use legacy peer dependencies
$ sudo npm install --legacy-peer-deps

$ cd server
$ npm start

$ npm install -g gulp-cli

$ cd app
$ gulp dist

 

 

 

skpark@skpark-ThinkPad-Edge-E430:~$ cd git
skpark@skpark-ThinkPad-Edge-E430:~/git$ cd mediasoup/mediasoup-demo/
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo$ cd app
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ npm start

> mediasoup-demo-app@3.0.0 start
> gulp live

sh: 1: gulp: not found
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ npm install gulp
npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name ">=^16.0.0" of package "react@>=^16.0.0": Tags may not have any characters that encodeURIComponent encodes.

npm ERR! A complete log of this run can be found in: /home/skpark/.npm/_logs/2024-03-08T12_42_24_683Z-debug-0.log
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ sudo npm install gulp
[sudo] skpark 암호: 
npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name ">=^16.0.0" of package "react@>=^16.0.0": Tags may not have any characters that encodeURIComponent encodes.

npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2024-03-08T12_42_37_163Z-debug-0.log
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ npm install gulp -g
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/lib/node_modules/gulp
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/lib/node_modules/gulp'
npm ERR!  [Error: EACCES: permission denied, mkdir '/usr/lib/node_modules/gulp'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'mkdir',
npm ERR!   path: '/usr/lib/node_modules/gulp'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in: /home/skpark/.npm/_logs/2024-03-08T12_43_06_549Z-debug-0.log
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ 
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ 
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ sudo npm install gulp -g
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies

added 335 packages in 23s

17 packages are looking for funding
  run `npm fund` for details
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ sudo npm install gulp-util -g
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

added 59 packages in 3s

1 package is looking for funding
  run `npm fund` for details
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ sudo npm install -g gulp-cli
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm ERR! code EEXIST
npm ERR! path /usr/bin/gulp
npm ERR! EEXIST: file already exists
npm ERR! File exists: /usr/bin/gulp
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2024-03-08T12_44_28_799Z-debug-0.log
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ npm install gulp -g
npm ERR! code EACCES
npm ERR! syscall rename
npm ERR! path /usr/lib/node_modules/gulp
npm ERR! dest /usr/lib/node_modules/.gulp-P2cCRbnI
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, rename '/usr/lib/node_modules/gulp' -> '/usr/lib/node_modules/.gulp-P2cCRbnI'
npm ERR!  [Error: EACCES: permission denied, rename '/usr/lib/node_modules/gulp' -> '/usr/lib/node_modules/.gulp-P2cCRbnI'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'rename',
npm ERR!   path: '/usr/lib/node_modules/gulp',
npm ERR!   dest: '/usr/lib/node_modules/.gulp-P2cCRbnI'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in: /home/skpark/.npm/_logs/2024-03-08T12_45_08_159Z-debug-0.log
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ npm install
npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name ">=^16.0.0" of package "react@>=^16.0.0": Tags may not have any characters that encodeURIComponent encodes.

npm ERR! A complete log of this run can be found in: /home/skpark/.npm/_logs/2024-03-08T12_45_20_509Z-debug-0.log
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ 
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ 
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ 
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ 
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ 
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ 
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ 
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ 
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ 
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ npm start

> mediasoup-demo-app@3.0.0 start
> gulp live

[21:45:31] Local modules not found in ~/git/mediasoup/mediasoup-demo/app
[21:45:31] Try running: npm install
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ sudo npm install
npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name ">=^16.0.0" of package "react@>=^16.0.0": Tags may not have any characters that encodeURIComponent encodes.

npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2024-03-08T12_45_42_886Z-debug-0.log
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ 
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ 
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ 
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ npm i --legacy-peer-deps
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated @babel/plugin-proposal-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

added 1272 packages, and audited 1273 packages in 3m

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

20 vulnerabilities (6 moderate, 14 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
skpark@skpark-ThinkPad-Edge-E430:~/git/mediasoup/mediasoup-demo/app$ npm start

> mediasoup-demo-app@3.0.0 start
> gulp live

[21:49:56] NODE_ENV: development
[21:49:56] Using gulpfile ~/git/mediasoup/mediasoup-demo/app/gulpfile.js
[21:49:56] Starting 'live'...
[21:49:56] Starting 'browser:base'...
[21:49:56] Starting 'clean'...
[21:49:56] Finished 'clean' after 14 ms
[21:49:56] Starting 'lint'...
[21:49:59] Finished 'lint' after 3.69 s
[21:49:59] Starting 'bundle:watch'...
[21:50:12] Finished 'bundle:watch' after 13 s
[21:50:12] Starting 'html'...
[21:50:12] Finished 'html' after 8.29 ms
[21:50:12] Starting 'css'...
[21:50:13] Finished 'css' after 1.03 s
[21:50:13] Starting 'resources'...
[21:50:14] Finished 'resources' after 192 ms
[21:50:14] Starting 'watch'...
[21:50:14] Finished 'watch' after 21 ms
[21:50:14] Finished 'browser:base' after 18 s
[21:50:14] Starting '<anonymous>'...
[21:50:14] Finished '<anonymous>' after 55 ms
[21:50:14] Finished 'live' after 18 s
[Browsersync] Access URLs:
 ----------------------------------------------------
       Local: https://localhost:3000/?info=true
    External: https://192.168.200.152:3000/?info=true
 ----------------------------------------------------
          UI: http://localhost:3002
 UI External: http://localhost:3002
 ----------------------------------------------------
[Browsersync] Serving files from: ../server/public
[Browsersync] Watching files...
  

 

마지막으로 4443 포트를 포워딩 해줘야함

 

 

 

server 쪽 config.js 포트 포워딩 수정

 

/**

* IMPORTANT (PLEASE READ THIS):

*

* This is not the "configuration file" of mediasoup. This is the configuration

* file of the mediasoup-demo app. mediasoup itself is a server-side library, it

* does not read any "configuration file". Instead it exposes an API. This demo

* application just reads settings from this file (once copied to config.js) and

* calls the mediasoup API with those settings when appropriate.

*/

const os = require('os');

module.exports =

{

// Listening hostname (just for `gulp live` task).

domain : process.env.DOMAIN || 'localhost', //수정할 필요없음

// Signaling settings (protoo WebSocket server and HTTP API server).

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/fullchain.pem`,

key : process.env.HTTPS_CERT_PRIVKEY || `${__dirname}/certs/privkey.pem`

}

},

// mediasoup settings.

mediasoup :

{

// Number of mediasoup workers to launch.

numWorkers : Object.keys(os.cpus()).length,

// mediasoup WorkerSettings.

// See https://mediasoup.org/documentation/v3/mediasoup/api/#WorkerSettings

workerSettings :

{

dtlsCertificateFile : process.env.WORKER_CERT_FULLCHAIN,

dtlsPrivateKeyFile : process.env.WORKER_CERT_PRIVKEY,

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 || 40100 //완료포트 ( 포트포워딩)

},

// mediasoup Router options.

// See https://mediasoup.org/documentation/v3/mediasoup/api/#RouterOptions

routerOptions :

{

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

}

}

]

},

// mediasoup WebRtcServer options for WebRTC endpoints (mediasoup-client,

// libmediasoupclient).

// See https://mediasoup.org/documentation/v3/mediasoup/api/#WebRtcServerOptions

// NOTE: mediasoup-demo/server/lib/Room.js will increase this port for

// each mediasoup Worker since each Worker is a separate process.

webRtcServerOptions :

{

listenInfos :

[

{

protocol : 'udp',

ip : process.env.MEDIASOUP_LISTEN_IP || '0.0.0.0',

announcedAddress : process.env.MEDIASOUP_ANNOUNCED_IP|| '125.100.100.111',

port : 44444  // 포트 포워딩 필요 

},

{

protocol : 'tcp',

ip : process.env.MEDIASOUP_LISTEN_IP || '0.0.0.0',

announcedAddress : process.env.MEDIASOUP_ANNOUNCED_IP|| '125.100.100.111',

port : 44444

}

]

},

// mediasoup WebRtcTransport options for WebRTC endpoints (mediasoup-client,

// libmediasoupclient).

// See https://mediasoup.org/documentation/v3/mediasoup/api/#WebRtcTransportOptions

webRtcTransportOptions :

{

// listenInfos is not needed since webRtcServer is used.

// However passing MEDIASOUP_USE_WEBRTC_SERVER=false will change it.

listenInfos :

[

{

protocol : 'udp',

ip : process.env.MEDIASOUP_LISTEN_IP || '0.0.0.0',

announcedAddress : process.env.MEDIASOUP_ANNOUNCED_IP || "125.176.147.175"

},

{

protocol : 'tcp',

ip : process.env.MEDIASOUP_LISTEN_IP || '0.0.0.0',

announcedAddress : process.env.MEDIASOUP_ANNOUNCED_IP ||'125.100.100.111'

}

],

initialAvailableOutgoingBitrate : 1000000,

minimumAvailableOutgoingBitrate : 600000,

maxSctpMessageSize : 262144,

// Additional options that are not part of WebRtcTransportOptions.

maxIncomingBitrate : 1500000

},

// mediasoup PlainTransport options for legacy RTP endpoints (FFmpeg,

// GStreamer).

// See https://mediasoup.org/documentation/v3/mediasoup/api/#PlainTransportOptions

plainTransportOptions :

{

listenInfo :

{

protocol : 'udp',

ip : process.env.MEDIASOUP_LISTEN_IP || '0.0.0.0',

announcedAddress : process.env.MEDIASOUP_ANNOUNCED_IP || '125.100.100.111'

},

maxSctpMessageSize : 262144

}

}

};