如何在Angular Web应用中使用Twilio JavaScript Voice SDK实现通话转接与录制

一、通话录制实现 #

Twilio的通话录制需要在通话流程的TwiML配置中开启，结合你的现有代码，从两部分适配：

1. 后端TwiML配置 #

在处理外呼的后端TwiML响应中，给<Dial>标签添加录制参数，实现双向通话录制：

<Response>
  <!-- record参数指定录制模式，record-from-ringing-dual表示从振铃开始双向录制 -->
  <Dial record="record-from-ringing-dual" recordingStatusCallback="/your-recording-callback">
    <Number>+91xxxxxxxxx</Number>
  </Dial>
</Response>

注：recordingStatusCallback是可选的录制状态回调接口，可用于接收录制完成后的文件地址等信息

2. 前端状态监听 #

在现有connect事件中添加录制状态监听，方便前端展示录制状态：

device.on('connect', (connection) => {
    console.log(connection);
    if ('patientPhoneNumber' in connection.message) {
        this.callStartTime = new Date();
    }
    // 监听录制开始/结束事件
    connection.on('recordingStarted', () => {
        console.log('通话录制已启动');
    });
    connection.on('recordingStopped', () => {
        console.log('通话录制已停止');
    });
    this.addCallStatus(connection);
});

二、通话转接实现（医护A转医护B，A自动挂断） #

这个功能需要前端触发转接请求，后端调用Twilio API完成通话重定向，具体步骤：

1. 前端添加转接触发逻辑 #

在UI中添加转接按钮，绑定以下方法：

transferCall() {
    const activeConnection = this.device.activeConnection();
    if (!activeConnection) return;

    // 传入医护B的标识（客户端ID或手机号）
    const transferData = {
        callSid: activeConnection.parameters.CallSid,
        targetAgent: '医护B的Twilio客户端ID/手机号'
    };

    // 向后端发送转接请求
    this.authService.postRequest('audiocall/twilio/transfer', transferData).subscribe((res) => {
        console.log('转接请求已提交');
    }, (err) => {
        this.toastr.error('转接失败，请重试');
    });
}

2. 后端处理转接逻辑 #

后端使用Twilio SDK调用Calls API，将当前通话重定向到医护B：

// Node.js示例，其他语言逻辑一致
const twilio = require('twilio')(yourAccountSid, yourAuthToken);

twilio.calls(transferData.callSid)
  .update({
    // 该URL返回连接医护B的TwiML
    url: 'https://your-public-server.com/connect-agent-b',
    method: 'POST'
  })
  .then(call => console.log('转接指令已发送'))
  .catch(err => console.error('转接失败:', err));

上述URL返回的TwiML示例：

<Response>
  <Dial record="continue"> <!-- 保持通话录制 -->
    <Client>医护B的客户端ID</Client> <!-- 若为手机号则用<Number>+91xxxxxxxxx</Number> -->
  </Dial>
</Response>

3. 前端自动处理A的挂断 #

当Twilio完成转接后，医护A的通话连接会自动断开，现有disconnect事件可直接适配，只需调整状态标记：

device.on('disconnect', (connection) => {
    setTimeout(() => {
        self.callEndTime = new Date();
        self.addMessageCenterData();
        let formData = {
            'status': 'TRANSFERRED', // 将通话状态标记为已转接
            'voiceCallLogId': self.voiceCallLogId,
            'callEndTime': self.callEndTime,
            'callSid': connection.parameters.CallSid
        }
        self.updateCallStatus(formData);
        self.toastr.info('通话已转接，您已退出');
        self.dialogRef.close();
    }, 500);
});

三、关键注意事项 #

• 试用账户默认支持通话录制，但需确保TwiML中的录制参数配置正确
• 后端提供的TwiML地址必须能被Twilio公网访问，本地开发可使用ngrok等工具暴露端口
• 医护B需通过Twilio Device正常登录在线，确保能被转接接通

内容的提问来源于stack exchange，提问作者ravi