如何解决在 Angular 项目中通过 VOIP/WebRTC 将 Webphone 与 Freepbx 平台集成
我想将网络电话集成到我的基于 Angular 的项目中,我们有一个免费 PBX 服务器平台,可在私有 IP 上使用,{{3 提供了一个开源 JS 库}}。我找到了各种 NPM 客户端库来构建一个可以与 PBX 通信的网络电话,但这些都不能满足我的要求。
现在我看到只有一个选项可以将 JS 库转换为与 Angular 兼容的这种集成,但这需要时间,我对此没有信心。
免费 PBX 需要用户名、密码和服务器地址才能通过 WebRTC 连接和启用 VOIP,
我正在寻找一种快速简便的解决方案来启用 Angular 中的 PBX 拨号。
谢谢。
解决方法
所以,最后我决定使用他们自己的 JS 库并将其集成到我的 Angular 项目中,我使用以下步骤实现了这一点:
- 从 Mizu Webphone 下载 JS 库
- 解压找到 assets 目录下的库。
- 在
webphone_api.js
文件中导入angular.json
。 - 对
webphone_api.js
文件进行了如下更改。
- 用
return './../../assets/webphone/'
函数中的getbasedir2
替换代码。 - 删除了函数
getbasedir2
并从帮助文件中调用它们,如下所述。 - 删除了 Webphone 目录下不必要的文件(清理)。
- 为我的组件创建一个辅助类并定义所有必需的函数,如下所示。
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;
}
}
- 在组件中导入帮助文件,您就可以开始使用拨号程序了。
我已经使用 NodeJs API 上传录制文件和其他相关活动,这就是我将这个库集成到 Angular 项目中并按照我的要求工作的方式,谢谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。