@zhaokun/cti 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
File without changes
Binary file
@@ -0,0 +1,507 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <title>web-sdk</title>
7
+ <style>
8
+ html,
9
+ body {
10
+ font-size: 14px;
11
+ }
12
+ .item {
13
+ margin: 0 0 12px;
14
+ }
15
+ .tip-title {
16
+ font-size: 14px;
17
+ margin: 4px 0;
18
+ }
19
+ .tip-item {
20
+ font-size: 14px;
21
+ margin: 4px 0;
22
+ }
23
+ .status-success {
24
+ color: #67c23a;
25
+ }
26
+ .status-error {
27
+ color: #f56c6c;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body>
32
+ <div class="box">
33
+ <div class="item">
34
+ <button id="checkin">签入</button>
35
+ <button id="logout">签出</button>
36
+ <!--空闲1 忙碌2 小休3 振铃4 通话5 保持6 后处理7-->
37
+ <select id="statusSelect" style="width: 100px">
38
+ <option value="1">在线</option>
39
+ <option value="2">忙碌</option>
40
+ <option value="3">小休</option>
41
+ <option value="4" disabled="disabled">振铃</option>
42
+ <option value="5" disabled="disabled">通话</option>
43
+ <option value="6" disabled="disabled">保持</option>
44
+ <option value="7" disabled="disabled">后处理</option>
45
+ </select>
46
+ <span id="onlinetime"></span>
47
+ <button id="status">切换状态</button>
48
+ </div>
49
+ <div class="item">
50
+ <button id="relayList">获取主叫号码(中继号码)</button>
51
+ <select id="relaySelect" style="width: 180px"></select>
52
+ </div>
53
+ <div class="item">
54
+ <input type="text" placeholder="手机号或分机号" id="callInput" value="">
55
+ <button id="call">呼叫</button>
56
+ <button id="hangup">挂断</button>
57
+ <button id="regionInfo">号码归属地</button>
58
+ </div>
59
+ <div class="item">
60
+ <select id="keyupSelect" style="width: 150px">
61
+ <option value="1">按键1</option>
62
+ <option value="2">按键2</option>
63
+ <option value="3">按键3</option>
64
+ <option value="4">按键4</option>
65
+ <option value="5">按键5</option>
66
+ <option value="6">按键6</option>
67
+ <option value="7">按键7</option>
68
+ <option value="8">按键8</option>
69
+ <option value="9">按键9</option>
70
+ <option value="0">按键0</option>
71
+ <option value="*">按键*</option>
72
+ <option value="#">按键#</option>
73
+ </select>
74
+ <button id="keyup">DTMF</button>
75
+ </div>
76
+ <div class="item">
77
+ <input type="text" placeholder="手机号或分机号" id="threeInput" value="">
78
+ <button id="threeWayStart">开始三方</button>
79
+ <button id="threeWayCancel">取消三方</button>
80
+ </div>
81
+
82
+ <div class="item">
83
+ <input type="text" placeholder="手机号或分机号" id="consultInput" value="">
84
+ <button id="consultStart">开始询问</button>
85
+ <button id="consultCancel">取消询问</button>
86
+ <button id="consultTransfer">确定询问</button>
87
+ </div>
88
+
89
+ <div class="item">
90
+ <input type="text" placeholder="手机号或分机号" id="transferInput" value="">
91
+ <button id="transfer">转接</button>
92
+ </div>
93
+
94
+ <div class="item">
95
+ <button id="queueList">获取队列(技能组)列表</button>
96
+ <select id="queueSelect" style="width: 150px"></select>
97
+ <button id="transferQueue">转接到队列(技能组)</button>
98
+ </div>
99
+
100
+ <div class="item">
101
+ <button id="answer">接听</button>
102
+ <button id="mobileAnswerStart">开启手机接听</button>
103
+ <button id="mobileAnswerClose">取消手机接听</button>
104
+ <button id="hold">保持</button>
105
+ <button id="unhold">解除保持</button>
106
+ <button id="grade">评价</button>
107
+ </div>
108
+
109
+ <div class="item">
110
+ <button id="getDefaultMedia">获取默认媒体设备</button>
111
+ 麦克风:<span id="inputDevice" style="margin: 0 20px 0 0"></span>
112
+ 扬声器:<span id="outputDevice" style="margin: 0 20px 0 0"></span>
113
+ </div>
114
+ <div class="item">
115
+ <button id="checkMkf">检测麦克风状态</button>
116
+ <span id="micStatus"></span>
117
+ </div>
118
+ <div class="item">
119
+ <button id="getSystemInfo">获取系统信息</button>
120
+ 浏览器:<span id="browserInfo" style="margin: 0 20px 0 0"></span>
121
+ WebRTC支持:
122
+ <span id="webrtcInfo" style="margin: 0 20px 0 0"></span> WebSocket支持:
123
+ <span id="socketInfo" style="margin: 0 20px 0 0"></span>
124
+ </div>
125
+ <div class="item">
126
+ <button id="getPhoneInfo">获取话机信息</button>
127
+ </div>
128
+ <div class="item">
129
+ <button id="flowList">通话流程助手列表</button>
130
+ <select id="flowListSelect" style="width: 150px"></select>
131
+ <button id="flow">通话流程执行</button>
132
+ </div>
133
+
134
+ <div class="item">
135
+ <button id="customHandle">自定义发送</button>
136
+ </div>
137
+ </div>
138
+
139
+ <div style="color: #f56c6c">
140
+ <h6 class="tip-title">注意事项</h6>
141
+ <p class="tip-item">
142
+ 1. 呼叫中心 web-sdk 主要支持 Chrome 56版本及以上、Edge
143
+ 80版本及以上的浏览器,建议安装最新版本的浏览器以支持更多功能。
144
+ </p>
145
+ <p class="tip-item">
146
+ 2. 请使用 HTTPS 协议来部署前端页面(开发时可以用
147
+ localhost),否则会因为浏览器限制无法正常通话。
148
+ </p>
149
+ </div>
150
+ </body>
151
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
152
+ <script src="./zhaokun.cti.min.js"></script>
153
+
154
+ <script>
155
+ var content = null
156
+ function init() {
157
+ // 实例化成功后会自动签入 调用
158
+ content = new zhaokunCTI({
159
+ webrtc: true, // 必填 是否是webrtc
160
+ token: "your_token", // 必填 接口获取的token
161
+ agent: "your_agent", // 必填 坐席工号
162
+ account: "your_account", // 必填 分机号
163
+ socket: "your_socket", // 必填 socket连接地址
164
+ env: "1", // debug 打印日志
165
+ })
166
+
167
+ // content.onmessage(function (obj) {
168
+ // console.log("收到数据2", obj)
169
+ // })
170
+ content.onmessage(function (obj) {
171
+ console.log("收到数据", obj)
172
+ const type = obj.type // 消息类型
173
+ const data = obj.data // 消息数据
174
+
175
+ if (type === "RelayList") {
176
+ setRelayList(data)
177
+ } else if (type === "QueueList") {
178
+ setQueueList(data)
179
+ } else if (type === "Status") {
180
+ $("#statusSelect").val(data.status)
181
+ } else if (type === "FlowList") {
182
+ setFlowList(data)
183
+ }
184
+ })
185
+
186
+ // socket 连接成功
187
+ content.onopen(function (e) {
188
+ console.log("onopen", e)
189
+ })
190
+ // content.onopen(function (e) {
191
+ // console.log("onopen2", e)
192
+ // })
193
+
194
+ // 获取在线时间
195
+ content.onlinetime(function (time) {
196
+ // console.log("onlinetime", time)
197
+ $("#onlinetime").html(time)
198
+ })
199
+ // content.onlinetime(function (time) {
200
+ // console.log("onlinetime2", time)
201
+ // })
202
+ content.onpermission(function (permission) {
203
+ // console.log("onpermission", permission)
204
+ })
205
+ // content.onpermission(function (permission) {
206
+ // console.log("onpermission2", permission)
207
+ // })
208
+ // socket 连接错误
209
+ content.onerror(function (e) {
210
+ console.log("onerror", e)
211
+ })
212
+ // content.onerror(function (e) {
213
+ // console.log("onerror2", e)
214
+ // })
215
+
216
+ // socket 连接断开
217
+ content.onclose(function (e) {
218
+ console.log("onclose", e)
219
+ })
220
+ // content.onclose(function (e) {
221
+ // console.log("onclose2", e)
222
+ // })
223
+
224
+ // 错误事件
225
+ content.error(function (e) {
226
+ console.log("error", e)
227
+ })
228
+
229
+ content.agent.start()
230
+ }
231
+
232
+ init()
233
+
234
+ function setFlowList(lists) {
235
+ // 获取 select 元素
236
+ const select = $("#flowListSelect")
237
+ // 清空 select 中的内容
238
+ select.empty()
239
+ // 遍历数据并生成 option
240
+ lists.forEach(function (item) {
241
+ const optionText = `${item.title || "未命名"}` // 如果 relayName 为空,显示 "未命名"
242
+ const option = `<option value="${item.id}">${optionText}</option>`
243
+ select.append(option)
244
+ })
245
+ }
246
+
247
+ function setQueueList(lists) {
248
+ // 获取 select 元素
249
+ const select = $("#queueSelect")
250
+ // 清空 select 中的内容
251
+ select.empty()
252
+ // 遍历数据并生成 option
253
+ lists.forEach(function (item) {
254
+ const optionText = `${item.title || "未命名"}` // 如果 relayName 为空,显示 "未命名"
255
+ const option = `<option value="${item.id}">${optionText}</option>`
256
+ select.append(option)
257
+ })
258
+ }
259
+
260
+ function setRelayList(lists) {
261
+ // 获取 select 元素
262
+ const select = $("#relaySelect")
263
+ // 清空 select 中的内容
264
+ select.empty()
265
+ // 遍历数据并生成 option
266
+ lists.forEach(function (item) {
267
+ const optionText = `${item.relayNumber} - ${item.relayName || "未命名"}` // 如果 relayName 为空,显示 "未命名"
268
+ const option = `<option value="${item.relayNumber}">${optionText}</option>`
269
+ select.append(option)
270
+ })
271
+ }
272
+
273
+ $("#hold").click(() => {
274
+ // 保持
275
+ content.agent.hold()
276
+ })
277
+
278
+ $("#unhold").click(() => {
279
+ // 取消保持
280
+ content.agent.unhold()
281
+ })
282
+
283
+ $("#mobileAnswerStart").click(() => {
284
+ // 开启手机接听
285
+ content.agent.mobileAnswer({
286
+ status: 1,
287
+ relayNumber: $("#relaySelect").val(), // 主叫号码(中继号码)
288
+ })
289
+ })
290
+
291
+ $("#mobileAnswerClose").click(() => {
292
+ // 取消手机接听
293
+ content.agent.mobileAnswer({
294
+ status: 0,
295
+ relayNumber: $("#relaySelect").val(), // 主叫号码(中继号码)
296
+ })
297
+ })
298
+
299
+ $("#transfer").click(() => {
300
+ // 转接
301
+ content.agent.transfer({
302
+ customer: $("#transferInput").val(), // 手机号或分机号
303
+ relayNumber: $("#relaySelect").val(), // 主叫号码(中继号码)
304
+ })
305
+ })
306
+
307
+ $("#transferQueue").click(() => {
308
+ // 转到队列(技能组)
309
+ content.agent.transferQueue($("#queueSelect").val())
310
+ })
311
+
312
+ $("#consultStart").click(() => {
313
+ // 询问开始
314
+ content.agent.consultStart({
315
+ customer: $("#consultInput").val(), // 手机号或分机号
316
+ relayNumber: $("#relaySelect").val(), // 主叫号码(中继号码)
317
+ })
318
+ })
319
+
320
+ $("#consultCancel").click(() => {
321
+ // 询问取消
322
+ content.agent.consultCancel()
323
+ })
324
+
325
+ $("#consultTransfer").click(() => {
326
+ // 询问确定
327
+ content.agent.consultTransfer()
328
+ })
329
+
330
+ $("#keyup").click(() => {
331
+ // dtmf
332
+ content.agent.keyup($("#keyupSelect").val())
333
+ })
334
+
335
+ $("#status").click(() => {
336
+ // 状态修改
337
+ content.agent.status($("#statusSelect").val())
338
+ })
339
+
340
+ $("#threeWayStart").click(() => {
341
+ // 三方开始
342
+ content.agent.threeWayStart({
343
+ customer: $("#threeInput").val(), // 手机号或分机号
344
+ relayNumber: $("#relaySelect").val(), // 主叫号码(中继号码)
345
+ })
346
+ })
347
+
348
+ $("#threeWayCancel").click(() => {
349
+ // 取消三方
350
+ content.agent.threeWayCancel()
351
+ })
352
+
353
+ $("#grade").click(() => {
354
+ // 评价
355
+ content.agent.grade()
356
+ })
357
+ // 获取话机状态
358
+ $("#getPhoneInfo").click(async () => {
359
+ const res = await content.agent.getPhoneInfo()
360
+ console.log("getPhoneInfo", res)
361
+ })
362
+
363
+ $("#flowList").click(async () => {
364
+ await content.agent.flowList()
365
+ })
366
+ $("#flow").click(async () => {
367
+ await content.agent.flow($("#flowListSelect").val())
368
+ })
369
+ // 获取系统信息
370
+ $("#getSystemInfo").click(async () => {
371
+ // 测试
372
+ const res = await content.tool.getSystemInfo()
373
+ console.log(res)
374
+ if (res.code === 200) {
375
+ const { browser, support } = res.data
376
+ $("#browserInfo").text(` ${browser.name} ${browser.version}`)
377
+ if (support.webrtc) {
378
+ $("#webrtcInfo")
379
+ .text(`是`)
380
+ .removeClass("status-error")
381
+ .addClass("status-success")
382
+ } else {
383
+ $("#webrtcInfo")
384
+ .text(`否`)
385
+ .removeClass("status-success")
386
+ .addClass("status-error")
387
+ }
388
+ if (support.websocket) {
389
+ $("#socketInfo")
390
+ .text(`是`)
391
+ .removeClass("status-error")
392
+ .addClass("status-success")
393
+ } else {
394
+ $("#socketInfo")
395
+ .text(`否`)
396
+ .removeClass("status-success")
397
+ .addClass("status-error")
398
+ }
399
+ }
400
+ })
401
+
402
+ $("#getDefaultMedia").click(async () => {
403
+ // 测试
404
+ const res = await content.tool.getDefaultMedia()
405
+
406
+ if (res.code === 200) {
407
+ $("#outputDevice")
408
+ .text(`${res.data.output.label}`)
409
+ .removeClass("status-error")
410
+ .addClass("status-success")
411
+ $("#inputDevice")
412
+ .text(`${res.data.input.label}`)
413
+ .removeClass("status-error")
414
+ .addClass("status-success")
415
+ } else {
416
+ $("#outputDevice")
417
+ .text(`${res.data.output.label}`)
418
+ .removeClass("status-success")
419
+ .addClass("status-error")
420
+ $("#inputDevice")
421
+ .text(`${res.data.input.label}`)
422
+ .removeClass("status-success")
423
+ .addClass("status-error")
424
+ }
425
+ })
426
+
427
+ $("#checkMkf").click(async () => {
428
+ const res = await content.tool.checkMicrophoneStatus()
429
+ console.log(res)
430
+ if (res.code === 200) {
431
+ $("#micStatus")
432
+ .text(res.message)
433
+ .removeClass("status-error")
434
+ .addClass("status-success")
435
+ } else {
436
+ $("#micStatus")
437
+ .text(res.message)
438
+ .removeClass("status-success")
439
+ .addClass("status-error")
440
+ }
441
+ })
442
+ $("#relayList").click(() => {
443
+ // 主叫号码(中继号)列表
444
+ content.agent.relayList()
445
+ })
446
+
447
+ $("#queueList").click(() => {
448
+ // 队列(技能组)列表
449
+ content.agent.queueList()
450
+ })
451
+
452
+ $("#checkin").click(() => {
453
+ // 签入
454
+ init()
455
+ })
456
+
457
+ $("#logout").click(() => {
458
+ // 签出
459
+ content.agent.logout()
460
+ })
461
+
462
+ $("#hangup").click(() => {
463
+ // 挂机
464
+ content.agent.hangup()
465
+ })
466
+
467
+ $("#regionInfo").click(() => {
468
+ // 号码归属地
469
+ content.agent.regionInfo($("#callInput").val())
470
+ })
471
+
472
+ $("#callInput").on("keypress", function (event) {
473
+ if (event.which === 13) {
474
+ // 呼叫
475
+ content.agent.call({
476
+ customer: $("#callInput").val(), // 手机号或分机号
477
+ relayNumber: $("#relaySelect").val(), // 主叫号码(中继号码)
478
+ custom: "", // 业务编号(长度限制32位字母数字组成)
479
+ })
480
+ }
481
+ })
482
+
483
+ $("#answer").click(() => {
484
+ // 呼入接听
485
+ content.agent.answer()
486
+ })
487
+
488
+ $("#call").click(() => {
489
+ // 呼叫
490
+ content.agent.call({
491
+ customer: $("#callInput").val(), // 手机号或分机号
492
+ relayNumber: $("#relaySelect").val(), // 主叫号码(中继号码)
493
+ custom: "", // 业务编号(长度限制32位字母数字组成)
494
+ })
495
+ })
496
+
497
+ $("#customHandle").click(() => {
498
+ content.custom.handle({
499
+ type: "test",
500
+ data: { abc: "123" },
501
+ })
502
+ })
503
+ $("#getSystemInfo").trigger("click")
504
+ $("#checkMkf").trigger("click")
505
+ $("#getDefaultMedia").trigger("click")
506
+ </script>
507
+ </html>