mediasoup-demo 实践

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

1 准备环境

1. 准备 MacOS 或者 Linux 系统环境，安装 npm 环境

2. 更新 npm 环境

   npm install -g npm
   

3. 下载 mediasoup-demo

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

4. 编译 mediasoup-demo

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

5. 初始化配置文件
   在 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 在浏览器内部的工作流程，这里提供两种调试分析的方法：

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

5 常见问题

1. 浏览器无法获取摄像头和麦克风设备
   Chrome等浏览器为了增加安全性，如果是 http 方式或者证书配置不当将禁止当前页面获取摄像头和麦克风的资源访问，所以当出现这种情况时应检查 https 的配置是否正确。

2. 可以建立连接和进入房间但无法看到对方视频
   通常为 MEDIASOUP_ANNOUNCED_IP 如果配置为 0.0.0.0 将服务建立媒体传输连接。所以应检查 MEDIASOUP_ANNOUNCED_IP 是否配置正确

3. 浏览器返回 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
   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
   139,     // netbios
   143,     // imap2
   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)
   556,     // remotefs
   563,     // nntp+ssl
   587,     // stmp?
   601,     // ??
   636,     // ldap+ssl
   993,     // ldap+ssl
   995,     // pop3+ssl
   2049,    // nfs
   3659,    // apple-sasl / PasswordServer
   4045,    // lockd
   6000,    // X11
   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
   

参考资料

1. https://mediasoup.org/
2. https://webrtcglossary.com/
3. https://github.com/versatica/mediasoup-demo/blob/v3/README.md
4. mediasoup-demo解析-服务端
   
5. mediasoup-demo解析-客户端