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 个月。
mediasoup-demo 实践_第1张图片
如果不想申请证书需要自己签发一个证书,不过这样的缺点是浏览器会有安全提醒,自己签发证书请参考 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解析-客户端

你可能感兴趣的:(RTC)