如何为基于 CPaaS 的 WebRTC 应用程序建立与外部电话的定制集成

WebRTC 所实现的浏览器到浏览器的无缝实时音频和视频通信由复杂的基础架构提供支持。不熟悉 WebRTC 栈复杂性的普通开发团队很难维护信令、NAT 穿越和编解码器优化等功能。CPaaS 提供商将这种复杂性封装起来，并提供易于使用的应用编程接口 (API)，您只需花最少的精力就能将其集成到您的应用程序中。

促进 WebRTC 应用程序与公共交换电话网络 (PSTN) 和外部网络电话 (VoIP) 系统之间的通信是多个行业的共同要求。会话发起协议（SIP）允许不同通信系统之间实现这种互操作性，但需要在 WebRTC 和 SIP 实体之间 “转换 “通信的桥接器或网关服务器。

许多 CPaaS 提供商都提供这种功能，并通过 API 来设置和管理网关服务器，就像提供其他实时通信功能一样。对于大多数情况来说，这就足够了。不过，在某些情况下，您需要的不仅仅是一个 API 来正确管理通信。在这种情况下，就需要定制 SIP 集成。

在本篇文章中，我们将首先介绍为什么需要在基于 CPaaS 的 WebRTC 应用程序中为外部电话系统建立自定义 SIP 集成。然后，我们将向您展示架构以及如何使用 WebCodecs API 和开源解决方案 Puppeteer 和 Janus WebRTC Server 构建集成。

当需要定制 SIP 集成时

使用 CPaaS 可以带来极大的便利。这只是为自己的应用程序选择 CPaaS 的众多原因之一。然而，这样做的代价是降低了对底层基础设施的控制。如何实现 SIP 集成就是一个很好的例子，因为唯一的选择就是通过 API。

在某些情况下，需要的不仅仅是一个 API 来正确管理通信。例如：

• 想要支持CPaaS实施不支持的媒体时，即它只支持语音，但您还想进行视频通信。
• 正试图连接不支持当前编解码器的传统 VoIP 系统，因此希望自行对媒体进行转码。
• 正在连接一个 VoIP 系统，该系统在单个视频轨道中发送多个通话参与者的视频，但您希望在应用程序中分别管理它们。

总之，任何需要您的应用程序执行 CPaaS 提供商未提供的额外步骤的情况，都是实施自定义 SIP 集成的理想场景。

定制 SIP 集成架构

定制 SIP 集成架构的核心是在呼叫中增加一个额外的 “参与者”。 这个参与者不是人类用户，而是一个软件实体，它通过 “headless browse”（无头浏览器，没有任何图形界面的网络浏览器）运行，由 Puppeteer 或 Selenium 等自动化工具控制。

该参与者使用 CPaaS 提供商的应用程序接口，以与普通用户相同的方式加入呼叫，因此可以访问所有参与者的音频和视频流。有了这种访问权限，它就可以使用专门的浏览器功能（如 WebCodecs API）直接操作媒体流，根据需要调整或处理数据，还可以向呼叫发送媒体。

同样，额外的参与者也连接到WebRTC-SIP网关。连接后，它能够向两个系统发送和接收音频和视频流，从而允许网络会议的参与者与外部 SIP 系统上的参与者进行通信，而不会出现明显的障碍。

使用 Puppeteer 运行无头浏览器

第一步是赋予额外参与者生命。为此，您可以使用 Puppeteer。Puppeteer 是一个 Node.js 库，可以运行一个无头 Chrome 浏览器实例，让你模仿真实用户的操作，如浏览网页、填写和提交表单，甚至更高级的操作，如以截图或 PDF 的形式捕获网页状态。

在 Node.js 应用程序中安装 Puppeteer 的步骤如下：

# using npm
npm install puppeteer
# using yarn
yarn add puppeteer

然后，您就可以编写类似下面这样的简单代码段来加入应用程序中的调用。请注意，本示例不包括身份验证，身份验证的执行方法与普通用户相同。

import puppeteer from 'puppeteer';

(async () => {
  // launch the browser and join a video call with id abc123
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://yourapplication.com/room/abc123');

  /* add your own logic here */
})();

调用完成后，您只需运行以下命令即可关闭浏览器：

await browser.close();

使用 Janus WebRTC 服务器搭建 WebRTC 与 SIP 之间的桥梁

接下来，您需要在 WebRTC 应用程序和外部 SIP 系统之间架设桥梁。Janus WebRTC 服务器提供了一个 SIP 插件，允许 WebRTC 客户端像普通 SIP 客户端一样连接到 SIP 服务器。它可以透明地管理大多数 SIP 事件，同时将相关事件公开给 WebRTC 客户端，这样它们就可以拨打和接受与其他客户端的呼叫。

为了实现 WebRTC 客户端与 SIP 客户端之间的通信，Janus 服务器提供了多种协议，供无头浏览器与其建立连接。连接建立后，后者通过 JSON 消息与插件进行交互，执行多项任务。

例如，要呼叫在 5060 端口运行的 “example.com “服务器上的用户 “goofy”，可以使用以下信息：

{
   "request" : "call",
   "uri" : "sip:goofy@example.com",
}

在世界之间操纵数据流

最后，在将媒体发送给客户端之前，您需要一种操作媒体的方法。WebCodecs API 提供了对视频流的单帧和音频块的底层访问。这使得对它们进行多种类型的转换（如转码、裁剪、调整大小等）变得非常容易。

让我们重温一下上文提到的自定义 SIP 实现方案，假设您的 WebRTC 应用程序使用 VP9 编解码器对视频进行编码，但您连接的是仅支持 H.264 的传统系统。下面是一个简单的示例，说明如何在发送视频流之前利用 WebCodecs API 对其进行转码：

// defining a function for handling encoded video chunks
function handleEncodedChunk(chunk) {
  // Placeholder for handling encoded chunks, 
  //   e.g., sending them to Janus server
  console.log('Encoded chunk:', chunk);
}

// a function for encoding using h.264
function encode(stream) {
  // creating the video encoder
  const videoEncoder = new VideoEncoder({
    output: handleEncodedChunk,
    error: (e) => console.error('VideoEncoder error:', e),
  });

  // configuring the encoder
  videoEncoder.configure({
    codec: 'avc1.42E01E', // H.264 baseline profile
    width: 640,
    height: 480,
    bitrate: 2_000_000, // 2 Mbps
    framerate: 30
  });

  // Prepare to feed input frames to the encoder
  const videoTrack = stream.getVideoTracks()[0];
  const videoProcessor = new VideoTrackProcessor({track: videoTrack});
  const reader = videoProcessor.readable.getReader();

  // Read and encode frames
  while (true) {
    const {done, value} = await reader.read();
    if (done) {
      videoEncoder.flush();
      break;
    }
    // Assuming `value` is a VideoFrame
    videoEncoder.encode(value);
    value.close(); // Close the VideoFrame when done
  }
}

即使使用 CPaaS，也能控制您的 WebRTC 应用程序

即使使用 CPaaS 提供商，也可以控制实时通信应用程序与外部电话系统的通信方式！使用 Puppeteer，您可以运行和管理无头浏览器，该浏览器可加入会话并向 WebRTC 和 SIP 客户端提供媒体流。Janus WebRTC Server 可让您在两个世界之间架起桥梁。WebCodecs API 可为您提供所需的定制功能，以便为每种媒体发送媒体流。

作者：Hector Zelaya
译自：https://webrtc.ventures/2024/04/how-to-build-a-custom-integration-to-external-telephony-for-your-cpaas-based-webrtc-app/