mediasoup-demo 实践

mediasoup-demo 作为 WebRTC 入门的 Hello World 演示是一个非常不错的选择。下文中记录搭建 mediasoup-demo 的过程。1 准备环境准备 MacOS 或者 Linux 系统环境，安装 npm 环境更新 npm 环境npm install -g npm下载 mediasoup-demogit clone https://github...

文章共1,462字 · 阅读需要大约5分钟

一键AI生成摘要，助你高效阅读

问答

aggresss

7151人浏览 · 2020-03-14 14:08:27

aggresss · 2020-03-14 14:08:27 发布

mediasoup-demo 作为 WebRTC 入门的 Hello World 演示是一个非常不错的选择。下文中记录搭建 mediasoup-demo 的过程。

1 准备环境

准备 MacOS 或者 Linux 系统环境，安装 npm 环境
更新 npm 环境
```
npm install -g npm
```

下载 mediasoup-demo

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

编译 mediasoup-demo

cd mediasoup-demo
cd sever
npm install
cd -
cd app
npm install

初始化配置文件
在 mediasoup-demo/server 目录下有一个示例配置文件 config.example.js 复制一下即可
```
cd mediasoup-demo/server
cp config.example.js config.js
```

2 证书

从 WebRTC 的 stack 中可以发现，TLS 传输是绕不过去的，所以建议申请一个域名并且为这个域名申请一张证书，如果不是商用，个人 DV 版本的单域名 SSL 证书通常都是可以免费申请的。还有一个选择是通过 certbot 申请，不过申请的证书有效期为 3 个月。
在这里插入图片描述
如果不想申请证书需要自己签发一个证书，不过这样的缺点是浏览器会有安全提醒，自己签发证书请参考 https://github.com/aggresss/playground-cpp/blob/master/certs/autogen.sh

查看配置文件发现，modiasoup-demo 在启动时会从当前环境变量和默认的路径中去加载证书：

tls        :
{
	cert : process.env.HTTPS_CERT_FULLCHAIN || `${__dirname}/certs/fullchain.pem`,
	key  : process.env.HTTPS_CERT_PRIVKEY || `${__dirname}/certs/privkey.pem`
}

这里我们使用环境变量的方式加载证书，这样更为灵活：

export HTTPS_CERT_FULLCHAIN="XXX"
export HTTPS_CERT_PRIVKEY="YYY"

其中 XXX 为证书的路径，YYY 为对应证书密钥的路径

3 启动

启动前还需要配置一下 IP 地址，这里也使用环境变量的方式，这样比较灵活

export MEDIASOUP_LISTEN_IP="X.X.X.X"
export MEDIASOUP_ANNOUNCED_IP="Y.Y.Y.Y"

其中 X.X.X.X 为 https 服务的 IP，Y.Y.Y.Y 为媒体服务或者 ICE 服务的IP，通常情况下如果是内网测试，IP相同即可。

当 HTTPS_CERT_FULLCHAIN HTTPS_CERT_PRIVKEY MEDIASOUP_LISTEN_IP MEDIASOUP_ANNOUNCED_IP 四个环境变量都配置好以后，就可以启动服务了

打开两个 shell，分别操作：

	cd mediasoup-demo/server
	cd server
	npm start

	cd mediasoup-demo/app
	cd app
	npm start

注意：要确保启动前两个 shell 中均导入了上文中提到的四个环境变量

服务正常启动后即可通过浏览器进行视频通话。
在这里插入图片描述

4 调试

通过调试可以更加深入的理解 WebRTC 在浏览器内部的工作流程，这里提供两种调试分析的方法：

使用 Chrome 自带的 WebRTC 分析工具 chrome://webrtc-internals/，当 Chrome 当前存在 WebRTC 传输时，这个工具内会显示相关的信息；
使用 Wireshark，WebRTC 中所有的信令和媒体数据都是经过加密传输的，用 Wireshark 直接 dump 出的 pcap 文件通常不具有可读性，这时需要配置 chrome 的 SSLKEYLOGFILE 来将浏览器的 Pre-Master 信息导出，然后再导入到 Wireshark 中，具体的方法可以参考：wireshark配置解密SSL，注意：需要使用 Wireshark v3.2 以上的版本。

5 常见问题

浏览器无法获取摄像头和麦克风设备
Chrome等浏览器为了增加安全性，如果是 http 方式或者证书配置不当将禁止当前页面获取摄像头和麦克风的资源访问，所以当出现这种情况时应检查 https 的配置是否正确。
可以建立连接和进入房间但无法看到对方视频
通常为 MEDIASOUP_ANNOUNCED_IP 如果配置为 0.0.0.0 将服务建立媒体传输连接。所以应检查 MEDIASOUP_ANNOUNCED_IP 是否配置正确
浏览器返回 net::ERR_UNSAFE_PORT ，这是由于 Chrome 默认认为以下这些端口是不安全的，避免使用这些端口即可, 参考： https://superuser.com/questions/188058/which-ports-are-considered-unsafe-by-chrome

1,      // tcpmux
7,      // echo
9,      // discard
11,     // systat
13,     // daytime
15,     // netstat
17,     // qotd
19,     // chargen
20,     // ftp data
21,     // ftp access
22,     // ssh
23,     // telnet
25,     // smtp
37,     // time
42,     // name
43,     // nicname
53,     // domain
69,     // tftp
77,     // priv-rjs
79,     // finger
87,     // ttylink
95,     // supdup
101,    // hostriame
102,    // iso-tsap
103,    // gppitnp
104,    // acr-nema
109,    // pop2
110,    // pop3
111,    // sunrpc
113,    // auth
115,    // sftp
117,    // uucp-path
119,    // nntp
123,    // NTP
135,    // loc-srv /epmap
137,    // netbios
139,    // netbios
143,    // imap2
161,    // snmp
179,    // BGP
389,    // ldap
427,    // SLP (Also used by Apple Filing Protocol)
465,    // smtp+ssl
512,    // print / exec
513,    // login
514,    // shell
515,    // printer
526,    // tempo
530,    // courier
531,    // chat
532,    // netnews
540,    // uucp
548,    // AFP (Apple Filing Protocol)
554,    // rtsp
556,    // remotefs
563,    // nntp+ssl
587,    // smtp (rfc6409)
601,    // syslog-conn (rfc3195)
636,    // ldap+ssl
993,    // ldap+ssl
995,    // pop3+ssl
1719,   // h323gatestat
1720,   // h323hostcall
1723,   // pptp
2049,   // nfs
3659,   // apple-sasl / PasswordServer
4045,   // lockd
5060,   // sip
5061,   // sips
6000,   // X11
6566,   // sane-port
6665,   // Alternate IRC [Apple addition]
6666,   // Alternate IRC [Apple addition]
6667,   // Standard IRC [Apple addition]
6668,   // Alternate IRC [Apple addition]
6669,   // Alternate IRC [Apple addition]
6697,   // IRC + TLS
10080,  // Amanda