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/server 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-chrome1, // 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
参考资料
