HowTo文档

如何在 XSwitch 中使用 WebRTC

XSwitch 中支持 WebRTC。WebRTC 是一种实时通信协议，可以用于音视频通话、视频会议等。

WebRTC 是一个媒体层的协议，因而，在实际使用时，还需要一个信令层的协议，XSwitch 支持以下协议：

  • SIP over WebSocket
  • Verto （@xswitch/rtc）
  • WHIP/WHAP/WHXP

前置条件

WebRTC 在最初就把安全性作为一个重要的设计目标，WebRTC 在现在浏览器上，要求必须有一个安全的源（Origin）才可以启用。

所谓 Origin，其实就是承载 WebRTC 的网页。一般来说，有以下安全的源：

  • https:// 地址
  • http://localhost
  • file://

简言之，在生产环境中，网页必须使用 HTTPS 协议才可以启用 WebRTC。但有时候为了开发调试方便，使用 HTTP 协议时，允许在localhost网址上的网页启用 WebRTC，有时候本地file://地址也可以。

在 macOS 等平台上，在第一次使用时还需要浏览器向系统申请打开这些音视频输入设备的权限，以及共享桌面的权限等。

除此之外，有些版本的 Chrome 浏览器还有个命令行参数，可以允许在任何网址上启用 WebRTC：

chrome --unsafely-treat-insecure-origin-as-secure="http://ip:port" --user-data-dir=本地目录

其中，ip:port是你的 HTML 网页地址，本地目录是一个本地目录，用于存储浏览器的配置信息。

此外，Chrome 中有一个参数，打开 chrome://flags 界面，搜索unsafe，可以找到unsafely-treat-insecure-origin-as-secure，将该参数启用，它会将不安全的源视为安全的源。

一般来说，信令是基于 Websocket 实现的，同样，在http://地址上，使用ws://协议，而在https://网址上，则使用wss://协议，不能混用。

启用 WebRTC

在安全的连接上，基于 Verto 的 WebRTC 会自动启用，在 Web 管理界面右下角会出现一个【电话】按钮。

如果您的产品中有基于 WebRTC 的视频会议等相关的功能，则也可以直接使用。

除此之外，你也可以尝试 XSwitch 云上的相关 Demo。我们有一个基于 xTalk 的 WebRTC Demo 页面，可以通过关注“小樱桃科技”微信公众号，输入demo获取相应的登录信息。

在 Demo 页面上，开放了以下端口可以测试 WebRTC 功能：

  • 10160：SIP 端口，UDP、TCP
  • 10161：SIP 端口，TLS
  • 10180：SIP 端口，UDP、TCP
  • 10179：SIP 端口，TLS
  • 10181：Verto 端口，HTTP、WS
  • 10182：Verto 端口，HTTPS、WSS
  • 10183：SIP 端口，WS
  • 10184：SIP 端口，WSS
  • 443：Nginx 端口http://demo.xswitch.cn
    • 通过wss://demo.xswitch.cn/ws代理到10181
    • 通过wss://demo.xswitch.cn/sip代理到10183
    • 通过wss://demo.xswitch.cn/sips代理到10184
  • SBC：通过sbc.xswitch.cn代理 SIP
    • 1001：SIP，UDP、TCP、WS，转发到相应的 SIP 端口
    • 1002：SIP，TLS、WSS，转发到相应的 SIP 端口

Verto 协议

XSwitch 支持 FreeSWITCH 原生的 Verto 协议，Verto 协议是基于 Websocket 的，在上面又通过 JSON-RPC 进行了一层封装，有以下与 SIP 类似的方法：

  • verto.login 登录
  • verto.invite 发起呼叫
  • verto.answer 应答
  • verto.bye 挂断
  • verto.info 发送信息，如 DTMF、Chat 等

XSwitch 默认即支持 Verto。事实上，XSwitch 的 HTTP 也是基于 Verto 模块实现的。

XSwitch 默认使用的端口是8081，对应ws，而8082对应wss。在使用wss时，需要设置证书，wss.pem。

大多数时候，在生产环境，可以直接在 Nginx 中配置相应的 HTTPS 证书，使用proxy_pass转给后端的ws或wss端口。示例 Nginx 配置如下（其中...代表省略）：

upstream xswitch {
	server 10.10.10.10:8081;
}

server {
    ...

    location /ws { # websocket
            proxy_connect_timeout 7d;
            proxy_send_timeout 7d;
            proxy_read_timeout 7d;
            proxy_pass http://xswitch;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
    }

    location /api/ { # API请求
		proxy_set_header Host $http_host;
        proxy_pass http://xswitch;
    }

    ...
}

Nginx 可以完美代理 Verto 协议。

示例和代码：

SIP over WebSocket

SIP over Websocket 默认不启用。可以按以下步骤启用。

  • 在 SIP Profile 中启用ws-binding参数
  • 在 SIP Profile 中启用wss-binding参数，同时设置好证书，参见TLS。

当然，也可以完全在 XSwitch 中不启用基于 Websocket 的 SIP 协议，而是在前面放一个 Nginx 或 Kamailio，再代理到对应的 SIP 端口（由于 WebRTC 相关的 SIP 包通常比较大，如果 UDP 包无法承载，可以尝试 TCP）。

示例和代码：

WHIP/WHAP/WHXP

WHIP的全称是 WebRTC-HTTP ingestion protocol，在浏览器中直接使用 HTTP 收发 SDP 进行协商，以启用简单的 WebRTC 推流。

WHIP 是单向的（在 Web 端是sendonly）推流协议，与之相对有一个单向的 WHAP 协议，实现了recvonly。XSwitch 中将两种协议结合，实现了sendrecv，即双向推拉流。详见示例代码。

小结

WebRTC 简化了音视频的开发与应用，但它总归是要处理音视频和网络等各种情况，所以还是非常复杂的，XSwitch 也仅在商业版本中支持 WebRTC 使用与开发。如果你在使用时有任何问题，请联系我们的技术支持。

如何在XSwitch中使用JWT
如何在XSwitch中使用ASR及TTS(二)