草庐IT

前端接入阿里云外呼SDK

jiahao778 2023-04-19 原文

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

引入阿里云呼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前端spanclasstoken阿里云云计算vue

有关前端接入阿里云外呼SDK的更多相关文章

  1. ruby - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗？ - 2

    我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后，每个操作都应在S3上回滚。S3Object这可能吗？？ 最佳答案 虽然S3API具有批量删除功能，但它不支持事务，因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST)，因此每个上传操作都是通过一个独立的API调用完成的

  2. unity---接入Admob - 2

    目录1.AdmobSDK下载地址2.将下载好的unityPackagesdk导入到unity里​编辑 3.解析依赖到项目中

  3. 阿里云国际版免费试用：如何注册以及注意事项 - 2

    作为新的阿里云用户，您可以50免费试用多种优惠，价值高达1,700美元（或8,500美元）。这将让您了解和体验阿里云平台上提供的一系列产品和服务。如果您以个人身份注册免费试用，您将获得价值1,700美元的优惠。但是，如果您是注册公司，您可以选择企业免费试用，提交基本信息通过企业实名注册验证，即可开始价值$8,500的免费试用！本教程介绍了如何设置您的帐户并使用您的免费试用版。​关于免费试用在我们开始此试用之前，您还必须遵守以下条款和条件才能访问您的免费试用：只有在一年内创建的账户才有资格获得阿里云免费试用。通过此免费试用优惠，用户可以免费试用免费试用活动页面上列出的每种产品一次。如果您有多个帐

  4. 阿里云RDS——产品系列概述 - 2

    基础版云数据库RDS的产品系列包括基础版、高可用版、集群版、三节点企业版，本文介绍基础版实例的相关信息。RDS基础版实例也称为单机版实例，只有单个数据库节点，计算与存储分离，性价比超高。说明RDS基础版实例只有一个数据库节点，没有备节点作为热备份，因此当该节点意外宕机或者执行重启实例、变更配置、版本升级等任务时，会出现较长时间的不可用。如果业务对数据库的可用性要求较高，不建议使用基础版实例，可选择其他系列（如高可用版），部分基础版实例也支持升级为高可用版。基础版与高可用版的对比拓扑图如下所示。优势 性能由于不提供备节点，主节点不会因为实时的数据库复制而产生额外的性能开销，因此基础版的性能相对于

  5. 三分钟集成 TapTap 防沉迷 SDK（Unity 版） - 2

    三分钟集成Tap防沉迷SDK（Unity版）一、SDK介绍基于国家对上线所有游戏必须增加防沉迷功能的政策下，TapTap推出防沉迷SDK，供游戏开发者进行接入；允许未成年用户在周五、六、日以及法定节假日晚上8:00-9:00进行游戏，防沉谜时间段进入游戏会弹窗进行提示！开发环境要求：Unity2019.4或更高版本iOS10或更高版本Android5.0（APIlevel21）或更高版本🔗Unity集成Demo参考链接🔗UnityTapSDK功能体验APK下载链接二、集成前准备1.创建应用进入开发者后台,按照提示开始创建应用；2.开通服务在使用TDS实名认证和防沉迷服务之前，需要在上面创建的应

  6. ruby - 如何使用适用于 ruby​​ 的 aws sdk 创建 route53 记录集？ - 2

    EC2会在实例停止然后重新启动时为其提供新的IP地址，因此我需要能够自动管理route53记录集，以便我可以一致地访问内容。遗憾的是，sdk的route53部分的文档远不如ec2的文档那么健壮(可以理解)，所以我有点卡住了。到目前为止，从我所看到的情况来看，似乎change_resource_record_sets(link)是可行的方法，但我对:chages需要什么感到困惑>因为它提到了一个Change对象，但没有提供指向所述对象描述的链接。这是我的代码目前的样子:r53.client.change_resource_record_sets(:hosted_zone_id=>'MY_

  7. ruby-on-rails - 在 Rails 应用程序的前端获取实时日志 - 2

    在Rails3.x应用程序中，我正在使用net::ssh并向远程pc运行一些命令。我想向用户的浏览器显示实时日志。比如，如果两个命令在net中运行::ssh执行即echo"Hello",echo"Bye"被传递然后"Hello"应该在执行后立即显示在浏览器中。这是代码我在ruby​​onrails应用程序中使用ssh连接和运行命令Net::SSH.start(@servers['local'],@machine_name,:password=>@machine_pwd,:timeout=>30)do|ssh|ssh.open_channeldo|channel|channel.requ

  8. ruby - 如何在转换器插件中访问页面属性(YAML 前端) - 2

    我正在为Jekyll编写一个转换器插件，需要访问一些页眉(YAML前端)属性。只有内容被传递给主要的转换器方法，似乎无法访问上下文。例子:moduleJekyllclassUpcaseConverter关于如何在转换器插件中访问页眉数据有什么想法吗？ 最佳答案 基于Jekyll源代码，无法在转换器中检索YAML前端内容。根据您的情况，我看到了两种可行的解决方案。您的文件扩展名可以具有足够的描述性，以提供您本应包含在前言中的信息。看起来Converter插件的设计就是这么基本的。如果修改Jekyll是一个选项，您可以更改Convert

  9. Ruby AWS::S3::S3Object (aws-sdk):是否有与 aws-s3 一样的流式数据方法？ - 2

    在aws-s3中，有一种方法(AWS::S3::S3Object.stream)可让您将S3上的文件流式传输到本地文件。我无法在aws-sdk中找到类似的方法。即在aws-s3中，我这样做:File.open(to_file,"wb")do|file|AWS::S3::S3Object.stream(key,region)do|chunk|file.writechunkendendAWS::S3:S3Object.read方法确实将block作为参数，但似乎没有对其执行任何操作。 最佳答案 aws-sdkgem现在支持S3中对象的分

  10. 阿里云，华为云，腾讯云三大公有云厂商，香港地区主机测评 - 2

    三大公有云厂商，香港地区主机测评一、ping时延比对（厦门电信本地测试）：Ping时延测试腾讯云阿里云华为云延迟率最低时延44ms，最高72ms，平均46ms47.242段：最低时延59ms，最高204ms，平均107ms最低时延45ms，最高93ms，平均47ms丢包率丢包率小有的ip段丢包率较大每个段都会有概率丢包阿里云：47.242段：最低时延59ms，最高204ms，平均107ms，有的ip段丢包率较大8.210段：最低时延64ms，最高232ms，平均119ms，丢包率较好腾讯云：最低时延44ms，最高72ms，平均46ms，丢包率小华为云：最低时延45ms，最高93ms，平均47m

随机推荐