阿里云呼叫前后端对接说明

kali_._

已于 2024-08-30 11:51:02 修改

阅读量585

点赞数 26

文章标签：阿里云 java

于 2024-08-28 16:21:21 首次发布

本文链接：https://blog.csdn.net/CSDN__CPP/article/details/141643299

版权

阿里云呼叫前后端对接说明

背景

最近公司做的应急管理大屏,需要在PC支持拨打虚拟电话给紧急联系人,一时间想到了阿里云呼叫服务(云联络中心)

本文主要针对"拨打电话"这一功能,前后端如何与阿里云对接进行简单说明,有问题欢迎一起交流
(完整演示代码: 见本人Gitee开源仓库)

准备工作

阿里云账号(个人/企业)
开通云联络中心->进入云联络中心管理控制台
个人账号: 创建实例
企业账号: 可先创建体验版演示实例,可试用50通电话,联调成功再购买标准版(如下截图)

https://ccc.console.aliyun.com/AccV2Instance

在这里插入图片描述

注意: 个人账号与企业账号的界面可能不一样需根据实际情况判定

号码管理/申请号码

由于我是企业账号开通体验版后免费送了一个试用号码

如果是个人账号需要按照申请流程进行申请

得拿到阿里云的AccessKey和AccessSecret

后端对接

详情见附件,代码中也有注释,以下只对需要注意的地方做说明

配置文件

server:
  port: 8081
aliyun:
  # 阿里云访问凭证
  accessKey: ${ALIYUN_ACCESS_KEY:xxx}
  accessKeySecret: ${ACCESS_KEY_SECRET:xxxx}
  alicall:
  	# 阿里云呼叫实例ID
    instanceId: ${ALIYUN_CALL_INSTANCE_ID:xxxx993146}
    endPoint: ${ALIYUN_CALL_END_POINT:ccc.cn-shanghai.aliyuncs.com}

接口

@PostMapping
public Object requestAliYunCall(String action) throws Exception {
    Object object = null;

    // 根据action匹配Service方法名
    if (action != null) {
        for (Method method : AliYunCallService.class.getMethods()) {
            if (method.getName().equalsIgnoreCase(action)) {
                method.setAccessible(true);
                object = method.invoke(aliYunCallService);
                break;
            }
        }
    }

    // 需要原样返回OpenAPI的返回值 不要包装自己的统一响应体 CommonResponse之类的东西
    return object;
}

实际上前后端对接就这一个接口, 前端指定调用该接口,阿里云提供的JS会通过action参数来调用不同的OpenAPI接口,因此我们自己的后端代码只需要根据action参数去对接不同的API即可

后端OpenAPI文档

前端对接

HTML

<body>
    <!-- 软电话sdk样式文件-PC端-->
    <link rel="stylesheet" type="text/css" href="//g.alicdn.com/cloudcallcenter/web-workbench-sdk/3.1.4/ui.min.css">

    <div class="wrapper">
        <div id="workbench"></div>
    </div>
    
    <!-- 软电话sdk js文件-->
    <script src="//g.alicdn.com/cloudcallcenter/web-workbench-sdk/3.1.4/ui.min.js"></script>
</body>

注意CSS和JS需要放置在body中,官方是有说明的详见:

阿里云呼叫前端SDK文档接入(3.x)

JS

window.workbench = new window.WorkbenchSdk({
    dom: "workbench",
    regionId: "cn-shanghai",
    width: "320px",
    height: "552px",
    instanceId: "xxx", // 阿里云呼叫实例ID
    ajaxPath: "/aliyun/call/api",
    ajaxMethod: "post",
    afterCallRule: 15, // 挂机后的话后处理时间
    header: true,
    autoAnswerCall: 8, // 有来电振铃响8s后自动接听
    exportErrorOfApi: true,
    onInit() {
      window.workbench.register() // 想实现自动上线在此注册
    },
    imConfig: {
      getContainer() {
        return document.getElementById('im-container');
      },
    },
    onLogIn() {
      console.log("上线成功")
    },
    onLogOut() {
    },
    onErrorNotify(error) {
      console.warn(error);
    },
    onCallComing(callDetail) {
      console.log(callDetail);
    },
    onCallDialing(callDetail) {
      console.log(callDetail);
    },
    onStatusChange(codeDetail) {
      console.log(codeDetail);
    },
    onCallEstablish(callDetail) {
      console.log("这里是通话建立时触发的回调函数", callDetail);
    },
    onCallRelease(callDetail) {
      console.log("这里是通话结束时触发的回调函数", callDetail);
    },
    onHangUp(type) {
      console.log(`这里是onHangUp事件，type = ${type}`);
    },
  });