在 Angular 项目中通过 VOIP/WebRTC 将 Webphone 与 Freepbx 平台集成

问题描述

我想将网络电话集成到我的基于 Angular 的项目中，我们有一个免费 PBX 服务器平台，可在私有 IP 上使用，{{3 提供了一个开源 JS 库}}。我找到了各种 NPM 客户端库来构建一个可以与 PBX 通信的网络电话，但这些都不能满足我的要求。

现在我看到只有一个选项可以将 JS 库转换为与 Angular 兼容的这种集成，但这需要时间，我对此没有信心。

免费 PBX 需要用户名、密码和服务器地址才能通过 WebRTC 连接和启用 VOIP，

我正在寻找一种快速简便的解决方案来启用 Angular 中的 PBX 拨号。

谢谢。

解决方法

所以，最后我决定使用他们自己的 JS 库并将其集成到我的 Angular 项目中，我使用以下步骤实现了这一点：

1. 从 Mizu Webphone 下载 JS 库
2. 解压找到 assets 目录下的库。
3. 在 webphone_api.js 文件中导入 angular.json。
4. 对 webphone_api.js 文件进行了如下更改。

• 用 return './../../assets/webphone/' 函数中的 getbasedir2 替换代码。
• 删除了函数 getbasedir2 并从帮助文件中调用它们，如下所述。
• 删除了 Webphone 目录下不必要的文件（清理）。

5. 为我的组件创建一个辅助类并定义所有必需的函数，如下所示。

declare var webphone_api: any

export class webphoneHelper {

  constructor() {
    this.loadScripts()
  }

  loadScripts() {
    webphone_api.LoadScriptFile(webphone_api.getbasedir2() + 'webphone_config.js',function () { webphone_api.LoadScriptFile(webphone_api.getbasedir2() + 'js/lib/api_helper.js',function () { }); });
  }

  initService() {
    try {
      webphone_api.onAppStateChange(function (state) {
        if (state === 'loaded') {
          webphone_api.setparameter('serveraddress','your IP address');
          webphone_api.setparameter('username','usreName');
          webphone_api.setparameter('password','password');
          webphone_api.setparameter('dtmfmode','2');
          webphone_api.setparameter('playdtmfsound','1');
          webphone_api.setparameter('defmute','0');
          webphone_api.setparameter('voicerecupload','voice_rec_upload_api_endpoint');
          webphone_api.start();
        }
        return true
      })
    } catch (err) {
      return false
    }
  }

  _onAppStateChange() {
    try {
      webphone_api.onRegStateChange((state) => {
        return state
      })
    } catch (err) {
      return false
    }
  }

  startService() {
    webphone_api.start();
  }

  stopService() {
    webphone_api.stop()
  }

  dial(outgoingNunber) {
    webphone_api.call(outgoingNunber);
  }

  hangUp() {
    webphone_api.hangup()
  }

  sendDtmf(number) {
    webphone_api.dtmf(number)
  }

  mute(status) {
    webphone_api.mute(status)
  }

  getCurrentCallDetails() {
    let lineDetails = webphone_api.getlinedetails()
    if (lineDetails) {
      let lineDetailsId = lineDetails.split(',')[8]
      return lineDetailsId
    }
    return false;
  }

}

6. 在组件中导入帮助文件，您就可以开始使用拨号程序了。

我已经使用 NodeJs API 上传录制文件和其他相关活动，这就是我将这个库集成到 Angular 项目中并按照我的要求工作的方式，谢谢。