最近项目中需要使用到阿里云的外呼拨打电话功能,由前端直接接入阿里云呼的SDK。使用起来也比较简单,不过还是有一些问题需要注意一下。下面就直接上代码说一下具体是怎么接入的。

引入阿里云呼SDK

  1. 他们的sdk有两个版本,一个1.x、一个2.x,两个版本在一些api上有稍微的不同。我用的是2.x版本。
  2. 引入阿里云云呼叫SDK

<!--sdk样式文件--><linkrel="stylesheet"type="text/css"href="//g.alicdn.com/cloudcallcenter/web-workbench-sdk/2.3.15/main.min.css"/>
<!--阿里云云呼叫SDK--><script type="text/javascript" src="//g.alicdn.com/cloudcallcenter/SIPml/0.3.2/SIPml-api.js"></script><script type="text/javascript" src="//g.alicdn.com/cloudcallcenter-voip/web-agentbar-sdk/1.7.6/index.js"></script><scripttype="text/javascript"src="//g.alicdn.com/cloudcallcenter/web-workbench-sdk/2.3.15/workbenchSdk.min.js"></script>

SDK初始化

  1. 以vue项目为例,可以将sdk外呼封装为一个组件,方便在各个页面调用。或者直接在app.vue里面初始化,把初始化后的实例挂载到全局,这样就可以再每个页面调用sdk中提供的api。当然,具体使用方式要和你们的业务场景关联起来
  2. 如果不希望显示外呼的默认面板,可以通过参数设置显示或隐藏。
  3. 我们采用的是前端直接调用sdk的方式。
window.workbench = new window.WorkbenchSdk({accessKeyId: 外呼后台获取,accessKeySecret:外呼后台获取,regionId: 外呼后台获取',instanceId: 外呼后台获取', //后台申请的id,必选配置RPCEndPoint: '....',apiVersion: '....',exportErrorOfApi: true,dom: 'workbenchDom', //必选配置onInit: function() {console.log('------sdk init success------');window.workbench.register();//自动进行注册window.workbench.changeVisible(false);//是否显示呼叫默认的面板,可通过组件传递的参数控制},onCallDialing: function() {console.log('------//去电、拨号振铃时触发------');this.$emit()// 可以通过emit或者eventbus的方式外部触发事件。},onBeforeCallDialing: function(payload) {console.log('------before call dialing------', payload);payload.callback(); //必须执行callback,否则不会拨号},//还有很多钩子函数,根据需要调用
});
  1. 引入组件,isShowPanel控制是否显示默认的呼叫面板,有些业务场景是直接点击拨打电话,然后自定义拨号界面的,就可以隐藏掉默认的。
 <!-- 阿里云呼叫组件 isShowPanel是否显示呼叫面板--><workbenchref="workbench":isShowPanel="false"@youEmitHandle="youEmitHandle"></workbench>
  1. 初始化结束后,就可以根据自己的方式在页面中调用提供的api进行外呼等操作了。
 window.workbench.call('', '');//拨打电话window.workbench.hangUp();//挂断电话... some...

友情提示

  1. 如果开发过程中遇到一些非代码问题的问题,请及时找他们的售后技术寻求帮助!!!
  2. 外呼sdk使用起来很方便,大部分问题仔细阅读文档一般都能找到答案!

前端接入阿里云外呼SDK相关推荐

  1. 修改串口设备名ttymxc1_ESP8266接入阿里云——基于官方SDK接入阿里云串口获取云下发数据...

    作者:电子快递哥 日期:于2020年3月18日 有态度,有温度,欢迎关注电子快递哥,转载请注明出处, ESP8266接入阿里云 --之一基于官方SDK接入阿里云串口获取云下发数据 一.获取阿里云IoT ...

  2. esp8266 阿里云 arduino_ESP8266接入阿里云——基于官方SDK接入阿里云串口获取云下发数据...

    作者:电子快递哥 日期:于2020年3月18日 有态度,有温度,欢迎关注电子快递哥,转载请注明出处, ESP8266接入阿里云 --之一基于官方SDK接入阿里云串口获取云下发数据 一.获取阿里云IoT ...

  3. 初体验-阿里云短视频 SDK For Android 快速接入

    前言 近期的一些创意短视频 App 风靡年轻群体,比较典型的例如抖音.MUSE 等,阿里云也适时地推出了简单易用的短视频 SDK,帮助开发者们以较低的成本快速引入功能完备的创意短视频功能. 本文主要介 ...

  4. 【阿里云生活物联网架构师专题 ①】esp32 sdk 直连接入阿里云物联网平台,实现天猫精灵语音控制;

    本系列博客学习由非官方人员 半颗心脏 潜心所力所写,仅仅做个人技术交流分享,不做任何商业用途.如有不对之处,请留言,本人及时更改. 1.esp32接入阿里云物联网平台,实现天猫精灵语音控制: 2.es ...

  5. Qt接入阿里云SDK,OSS工程,实现头像上传,Mac和Win编译库文件。

    目录 Qt接入OSS 前言 1. Mac版 1.1 Mac所需前提条件 1.2 安装阿里SDK 1.3 导入库文件 2. Windows版 2.1 Win所需前提条件 2.2 安装阿里SDK 2.3 ...

  6. 使用ESP8266(基于官方SDK)接入阿里云物联网平台

    引言 作为物联网开发者,ESP8266应该一点都不陌生了.只需十几块钱淘宝一个小开发板,就可以连上Wi-Fi接入互联网,尽情享受从手机端或Web端控制设备的乐趣.ESP8266接入Wi-Fi是没问题, ...

  7. Android开发-在Android里接入阿里云推流SDK实现直播推流的功能

    前 言 如今,在国内移动互联网发展了几年的时间,移动开发技术也相对的成熟,在咱们日常使用的手机App中也少不了直播的功能,不管是娱乐类.游戏类.体育类还是教育类等的App都会有直播的功能,可以说直播的 ...

  8. uni-app接入阿里云认证SDK(号码认证服务),App客户端一键登方式

    uni-app接入阿里云认证SDK(号码认证服务)App客户端一键登方式 首先,你需要了解和开通阿里云的号码认证服务,地址:https://help.aliyun.com/product/75010. ...

  9. 【阿里云生活物联网架构师专题 ②】esp8266 sdk 直连接入阿里云物联网平台,实现天猫精灵找队友零配网功能和语音控制;

    本系列博客学习由非官方人员 半颗心脏 潜心所力所写,仅仅做个人技术交流分享,不做任何商业用途.如有不对之处,请留言,本人及时更改. 1.esp32接入阿里云物联网平台,实现天猫精灵语音控制: 2.es ...

最新文章

  1. 找父节点和子节点个数(Poj1634)
  2. VS2013_QT5.4_静态编译问题_已经解决
  3. matlab中simple是什么函数,[求助]Matlab2016b里没有simple函数
  4. python numpy中ndarray.reshape函数参数-1是什么意思?(模糊控制、自动推理)
  5. html怎么添加图片幻灯,使用CSS3实现的超酷幻灯图片效果
  6. 在哪里可以运行EJB?
  7. 判断html()中有长度,VBS 字符串长度判断的问题
  8. mysql shell 所有表_删除mysql数据库中所有表的shell脚本
  9. vue框架的vue-router路由的运用
  10. Java 拷贝,你能说出个 123 么?
  11. Jenkins进阶系列之——07Jenkins纳入版本控制
  12. excel表格行列显示十字定位_取消excel单元格十字定位(excle表格里的十字对准)
  13. jenkins 手动执行_Jenkins环境配置篇-节点增加
  14. Ansible详解(一)——Ansible理论基础
  15. 前牙正常覆盖是多少_深覆合千万不要矫正?用图示告诉你深覆合深覆盖的区别是什么,有什么危害...
  16. apache基本配置
  17. python 自然语言处理(四)____词典资源
  18. LINUX操作命令汇总(zt)
  19. 【STM32】STM32F4 GPIO八种模式及工作原理详解
  20. python+fastapi+jinja2+mongodb,突然感觉整个人一下就轻松了,python学习之路

热门文章

  1. 学分,选够了吗? Alpha冲刺阶段
  2. 金融行业容器平台落地路径:敏捷响应业务更迭 1
  3. 常见传感器的应用领域和工作原理
  4. 方差分析 / 主成分分析 / 因子分析 / 聚类分析
  5. js-六爻排盘-六神
  6. Sophie Mapuis
  7. 吉软-人文精英班-第三次作业
  8. Linux tomcat应用验证码出不来问题解决方法
  9. 电子类专业技术个人学习路线总结(大一到大三)
  10. SpringBoot 详解