前端接入阿里云外呼SDK

这篇具有很好参考价值的文章主要介绍了前端接入阿里云外呼SDK。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近项目中需要使用到阿里云的外呼拨打电话功能,由前端直接接入阿里云呼的SDK。使用起来也比较简单,不过还是有一些问题需要注意一下。下面就直接上代码说一下具体是怎么接入的。文章来源地址https://www.toymoban.com/news/detail-788060.html

引入阿里云呼SDK

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

<!--sdk样式文件-->
  <link
    rel="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>
  <script
    type="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是否显示呼叫面板-->
      <workbench
        ref="workbench"
        :isShowPanel="false"
        @youEmitHandle="youEmitHandle"
      ></workbench>
  1. 初始化结束后,就可以根据自己的方式在页面中调用提供的api进行外呼等操作了。
 window.workbench.call('', '');//拨打电话
 window.workbench.hangUp();//挂断电话
 ... some...

友情提示

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

到了这里,关于前端接入阿里云外呼SDK的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • npm 安装自定义组件的时候报错 Unsupported URL Type "workspace:": workspace:^如何解决

    这个错误信息提示你在 npm 命令中使用了一个不支持的 URL 类型 \\\"workspace:\\\". 在 npm 中,\\\"workspace:\\\" 前缀用于表示当前的工作空间中的某个软件包。 通常,在使用 npm 命令安装软件包时,你需要提供软件包的名称或者软件包的发布地址(例如,npm install express 或者 npm install https://gi

    2024年02月12日
    浏览(59)
  • Type Script 安装 NPM 安装

    使用终端命令 npm -v 这里需要使用到npm npm node.js安装包自带 去官网 Node.js — Download下载对应版本安装 1.npm config set registry https://registry.npmmirror.com 2.npm install -g typescript error:          npm notice  npm notice New minor version of npm available! 10.2.4 - 10.3.0 npm notice Changelog: https://github.c

    2024年01月18日
    浏览(34)
  • Vue3 - 超详细 “纯前端“ 将文件上传到阿里云 OSS 对象存储,最新阿里云 SDK 上传音频、视频、图片、文档、office 等(保姆级详细示例源码教程,每行代码都有注释小白一看就懂)

    网上的教程大部分都过时了,各种不规范的写法五花八门(各种文件引入关系贼难改),对于新手来说真的无从下手。 本文站在新手的角度, 在 vue3 项目开发中,超详细 “纯前端(无需后端)” 上传各种图片图像、文档、音视频文件、压缩包到阿里云oss存储,利用 SDK 前端

    2024年02月03日
    浏览(49)
  • 【unity接入SDK案例】从0到1 如何接入百度地图SDK到unity中【一】

    👨‍💻个人主页 :@元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏 :Unity基础实战 下载入口 下载入口 android studio版本是:2021.2.1.16, 打开后 点击SDK Manager 我们需要更改一下SDK的安装路径 选择自己新建的文

    2024年03月17日
    浏览(43)
  • 【unity接入SDK案例】从0到1 如何接入百度地图SDK到unity中【二】

    👨‍💻个人主页 :@元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏 :Unity基础实战 下载入口 下载入口 android studio版本是:2021.2.1.16, 打开后 点击SDK Manager 我们需要更改一下SDK的安装路径 选择自己新建的文

    2024年04月09日
    浏览(47)
  • Unity接入SDK

    C#是托管语言,C++是非托管语言。 托管代码和非托管代码的区别 1、托管代码是一种中间语言,运行在CLR上;非托管代码被编译为机器码,运行在机器上。 2、托管代码独立于平台和语言,能更好的实现不同语言平台之间的兼容;非托管代码依赖于平台和语言。 3、托管代码可

    2024年02月16日
    浏览(40)
  • 【第三方SDK接入汇总】Unity接入VuforiaAR(图片识别)

    目录 一.注册Vuforia账号 二.获取许可秘钥 三.获取Vuforia的SDK导入unity 四.搭建创建AR场景 五.打包到手机 注册地址:Engine Developer Portal 申请地址:https://developer.vuforia.com/vui/develop/licenses 方式一: 官网下载 下载地址:SDK Download | Engine Developer Portal  下载后把package包导入unity即可。

    2024年04月08日
    浏览(51)
  • 接入谷歌的语音识别(speech-to-text)

    讲一下写这篇文章的背景。 因为需求需要,我们APP需要做一个语音转化成文字的功能。因为我们做的是海外产品,需要支持多语言,当前对多语言语音识别支持的最好的解决方案当属谷歌家的了。通过对谷歌的speech-to-text调研和一些其他原因,我们决定通过服务端去接入谷歌

    2024年02月12日
    浏览(43)
  • IOS高德地图SDK接入-Swift

    这个要前往高德开发平台注册成为个人开发者然后在控制台创建一个应用: 高德开发平台 注册步骤就不写了,写一下创建应用的步骤: 复制这个就可以了,然后提交 先import 然后设置,***就是上面申请的key 在显示地图前,要进行隐私合规设置,开发的时候这样就行了: 这里

    2024年02月01日
    浏览(90)
  • Unity接入海康相机SDK(保姆级)

    1.问题描述:控制海康相机进行操作(远焦、近焦、上下左右移动等)。 2.准备:官网下载SDK:https://open.hikvision.com/#home 选择适合自己平台代码语言开发的SDK下载 Demo里有对应案例可查看 在库文件里除了ClientDemoDll文件 都拖进unityPlugins ,然后有两个重复Dll文件(OpenAL,AudioRend

    2024年02月16日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包