前端接入阿里云外呼SDK_web 第三方外呼 接入

最近项目中需要使用到阿里云的外呼拨打电话功能，由前端直接接入阿里云呼的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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4. 引入组件，isShowPanel控制是否显示默认的呼叫面板，有些业务场景是直接点击拨打电话，然后自定义拨号界面的，就可以隐藏掉默认的。

 <!-- 阿里云呼叫组件 isShowPanel是否显示呼叫面板-->
      <workbench
        ref="workbench"
        :isShowPanel="false"
        @youEmitHandle="youEmitHandle"
      ></workbench>
1
2
3
4
5
6

5. 初始化结束后，就可以根据自己的方式在页面中调用提供的api进行外呼等操作了。

 window.workbench.call('', '');//拨打电话
 window.workbench.hangUp();//挂断电话
 ... some...
1
2
3

友情提示

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