前端接入阿里云外呼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日
    浏览(68)
  • 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日
    浏览(39)
  • Vue3 - 超详细 “纯前端“ 将文件上传到阿里云 OSS 对象存储,最新阿里云 SDK 上传音频、视频、图片、文档、office 等(保姆级详细示例源码教程,每行代码都有注释小白一看就懂)

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

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

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

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

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

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

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

    2024年02月16日
    浏览(42)
  • 【第三方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日
    浏览(53)
  • 接入谷歌的语音识别(speech-to-text)

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

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

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

    2024年02月16日
    浏览(38)
  • 【Unity】接入Max广告聚合SDK

    下载和导入MAX Unity插件: 官方SDK链接 在这里插入图片描述 2.初始化MAX SDK: 3.配置广告源 选择所需要的广告源。点install。ExternalDependencyManager会帮你根据选择的广告源下载对应的SDK,可能需要挂vpn 4.在Unity应用中加载广告 激励视频有一下参考接口 其他类型的广告接口可以看侧

    2024年02月08日
    浏览(43)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包