webrtc-mediasoup 学习-ubuntu20.04 搭建 mediasoup-demo-3（一）

官方文档

v3 Documentation

工程相关

开发组件

1. .ts 文件： typescript 语法
2. c++ 底层

模块组件

mediasoup-3           // 工程源码   
mediasoup-demo-3      // WebRTC demo 演示例子：信令协议协议实现的示例
mediasoup-client-3    //客户端 JavaScript 库
libmediasoupclient-3  //基于 google libwebrtc 的 C++ 库,保持了和 mediaclient 一样的接口
aiortc                //是Python中用于WebReal-Time通信（WebRTC）和对象Real-Time通信（ORTC）的库。它构建在asyncio（Python的标准异步I/O框架）之上。

ubuntu20.04 安装部署 mediasoup-demo-3

工具

找一个好的 T 子

npm 安装依赖

1. server

brody@brody:~/workspace/software/mediasoup-demo/server$ npm install
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 855 packages in 20m

1 package is looking for funding
  run `npm fund` for details

2. app

rody@brody:~/workspace/software/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:
npm ERR!     /home/brody/.npm/_logs/2023-02-07T17_00_21_486Z-debug-0.log
brody@brody:~/workspace/software/mediasoup-demo/app$ npm install --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 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 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.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
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

added 1247 packages in 2m

1 package is looking for funding
  run `npm fund` for details
  
rody@brody:~/workspace/software/mediasoup-demo/app$ sudo npm install -g gulp-cli
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
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 source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated

added 267 packages in 13s
npm notice 
npm notice New major version of npm available! 8.19.2 -> 9.4.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.4.2
npm notice Run npm install -g npm@9.4.2 to update!
npm notice 

安装证书和私钥

具体生成过程见参考文献 https双向认证:

• 生成私钥和公钥

brody@brody:~/workspace/software/mediasoup-demo/server$ cd certs/
brody@brody:~/workspace/software/mediasoup-demo/server/certs$ ls
brody@brody:~/workspace/software/mediasoup-demo/server/certs$ openssl genrsa -out server.key 2048
Generating RSA private key, 2048 bit long modulus (2 primes)
...........................................................................................................................................+++++
...........+++++
e is 65537 (0x010001)
brody@brody:~/workspace/software/mediasoup-demo/server/certs$ openssl rsa -in server.key -pubout -out server.pem
writing RSA key
brody@brody:~/workspace/software/mediasoup-demo/server/certs$ ls
server.key  server.pem
brody@brody:~/workspace/software/mediasoup-demo/server/certs$ openssl genrsa -out client.key 2048
Generating RSA private key, 2048 bit long modulus (2 primes)
....................................+++++
............................................................................+++++
e is 65537 (0x010001)
brody@brody:~/workspace/software/mediasoup-demo/server/certs$ openssl rsa -in client.key -pubout -out client.pem
writing RSA key

• 生成CA机构密钥

brody@brody:~/workspace/software/mediasoup-demo/server/certs$ openssl genrsa -out ca.key 2048
Generating RSA private key, 2048 bit long modulus (2 primes)
.....................................................................+++++
....................................+++++
e is 65537 (0x010001)

// X.509证书签署请求管理
brody@brody:~/workspace/software/mediasoup-demo/server/certs$ openssl req -new -key ca.key -out ca.csr 
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [AU]:CN
State or Province Name (full name) [Some-State]:jiangsu
Locality Name (eg, city) []:nanjing
Organization Name (eg, company) [Internet Widgits Pty Ltd]:brody
Organizational Unit Name (eg, section) []:search
Common Name (e.g. server FQDN or YOUR name) []:127.0.0.1                
Email Address []:brody@qq.com

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:mediasoup
An optional company name []:

// X.509证书数据管理
brody@brody:~/workspace/software/mediasoup-demo/server/certs$ openssl x509 -req -in ca.csr -signkey ca.key -out ca.crt -days 36500
Signature ok
subject=C = CN, ST = jiangsu, L = nanjing, O = brody, OU = search, CN = 127.0.0.1, emailAddress = brody@qq.com
Getting Private key

3. 颁发服务端证书

// 服务器端需要向 CA 机构申请签名证书
brody@brody:~/workspace/software/mediasoup-demo/server/certs$ openssl req -new -key server.key -out server.csr
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [AU]:CN
State or Province Name (full name) [Some-State]:jiangsu
Locality Name (eg, city) []:nanjing
Organization Name (eg, company) [Internet Widgits Pty Ltd]:brody
Organizational Unit Name (eg, section) []:search
Common Name (e.g. server FQDN or YOUR name) []:127.0.0.1
Email Address []:server@qq.com

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:mediasoup
An optional company name []:

//向 CA 机构申请证书，签名过程需要 CA 的证书和私钥参与，最终颁发一个带有 CA 签名的证书
rody@brody:~/workspace/software/mediasoup-demo/server/certs$ openssl x509 -req -CA ca.crt -CAkey ca.key -CAcreateserial -in server.csr -out server.crt -days 36500
Signature ok
subject=C = CN, ST = jiangsu, L = nanjing, O = brody, OU = search, CN = 127.0.0.1, emailAddress = server@qq.com
Getting CA Private Key

server.key //服务器端私钥
server.pem //服务器端公钥

client.key //客户端私钥
client.pem //客户端公钥

ca.key     //CA 私钥
server.csr //X.509证书请求文件
ca.crt     //X.509自签名证书
ca.csr     //X.509证书请求文件

server.crt //生成证书
ca.srl

brody@brody:~/workspace/software/mediasoup-demo/server/certs$ cp server.crt fullchain.pem
brody@brody:~/workspace/software/mediasoup-demo/server/certs$ cp server.key privkey.pem

错误解决

1. 58:21 error Unexpected use of file extension “json” for “./package.json”

/home/brody/workspace/software/mediasoup-demo/app/gulpfile.js
  58:21  error  Unexpected use of file extension "json" for "./package.json"  import/extensions

Replace line 58 with this
// const PKG = require('./package.json');
const PKG = JSON.parse(fs.readFileSync('./package.json'));

2. 455:6 error Invalid property ‘playsInline’ found on tag ‘audio’

/home/brody/workspace/software/mediasoup-demo/app/lib/components/PeerView.jsx
  455:6  error  Invalid property 'playsInline' found on tag 'audio', but it is only allowed on: video  react/no-unknown-property

✖ 2 problems (2 errors, 0 warnings)


删除 playsInline

3. webcom 摄像头无法打开

webcom 摄像头无法打开
在虚拟机菜单栏中选择“虚拟机（M）”->选择“可移动设备”->选择“xxxx

Camera”->选择“连接（断开与主机连接）”，设置完这项之后，虚拟机接管了笔记本摄像头

虚拟机->设置->USB控制器->USB兼容性->选择USB3.1