@subiz/wsclient 4.0.21 → 4.0.22

package/demo.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Subiz WebPhone Demo</title>
+    <style>
+      #info {
+        background: whitesmoke;
+        border-radius: 5px;
+      }
+      label {
+        font-weight: 600;
+        margin-right: 10px;
+      }
+      .info_line {
+        display: flex;
+        align-items: flex-start;
+      }
+    </style>
+  </head>
+  <body class="container pt-3">
+    <img
+      width="80"
+      src="https://storage.googleapis.com/sbz-email/images/d009afe944c1948998544e103ab0fef2_logo.png"
+    />
+    <h1 class="mt-4">Subiz call demo</h1>
+    <button
+      class="btn btn-primary"
+      style="width: 120px"
+      id="btnHangup"
+      onClick="inputToken()"
+			>
+      Nhập token
+    </button>
+    <div id="tokenStatus" class="mt-2 text-danger">Chưa nhập token</div>
+
+    <div class="mt-3" style="width: 250px">
+      <div>
+        <label>Đầu số</label>
+        <input
+          class="form-control"
+          id="fromNumber"
+          type="text"
+          value="842473021368"
+        />
+      </div>
+      <div class="mt-3">
+        <label>Số khách</label>
+        <input
+          class="form-control"
+          placeholder="036..."
+          id="toNumber"
+          type="text"
+        />
+      </div>
+      <div class="mt-3">
+        <button
+          class="btn btn-success mr-3"
+          style="width: 150px"
+          id="btnCall"
+          disabled
+          onClick="makeCall()"
+        >
+          Gọi
+        </button>
+        <button
+          class="btn btn-outline-danger"
+          style="width: 79px"
+          id="btnHangup"
+          onClick="hangupCall()"
+        >
+          Ngắt
+        </button>
+      </div>
+    </div>
+    <h3 class="mt-4">Thông tin cuộc gọi</h3>
+    <div class="p-2" id="info">
+      <div class="info_line">
+        <label>Call ID:</label>
+        <div id="infoCallId"></div>
+      </div>
+      <div class="info_line">
+        <label>Conversation ID:</label>
+        <div id="infoConversationId"></div>
+      </div>
+      <div class="info_line">
+        <label>Ghi âm:</label>
+        <a href="#" id="infoRecordedUrl" target="_blank"></a>
+      </div>
+      <div class="info_line">
+        <label>Gọi từ số:</label>
+        <div id="infoFromNumber"></div>
+      </div>
+      <div class="info_line">
+        <label>Gọi đến số:</label>
+        <div id="infoToNumber"></div>
+      </div>
+      <div class="info_line">
+        <label>Trạng thái:</label>
+        <div id="infoStatus"></div>
+      </div>
+      <div class="info_line">
+        <label>Gọi lúc:</label>
+        <div id="infoCreated"></div>
+      </div>
+      <div class="info_line">
+        <label>Thời lượng (giây):</label>
+        <div id="infoDuration"></div>
+      </div>
+      <div class="info_line">
+        <label>Mã ngắt máy:</label>
+        <div id="infoHangupCode"></div>
+      </div>
+    </div>
+    <div class="mt-4">
+      <h3>Sự kiện realtime</h3>
+      <pre
+        style="padding: 10px 15px; border-radius: 5px; background: whitesmoke"
+        id="infoLog"
+      ></pre>
+    </div>
+    <script type="module" src="./demo.js"></script>
+  </body>
+</html>

package/demo.js

@@ -0,0 +1,207 @@
+const SubizWebPhone = require('./webphone.js')
+
+let webphone
+var mycallid = 'x'
+let accid
+let eventLogs = {}
+
+// setTokenStatus renders whether token is valid or invalid
+function setTokenStatus(me) {
+	let $tokenStatus = document.getElementById('tokenStatus')
+	if (me == 'loading') {
+		$tokenStatus.innerHTML = 'Đang kiểm tra'
+		$tokenStatus.classList.add('text-muted')
+		$tokenStatus.classList.remove('text-danger')
+		$tokenStatus.classList.remove('text-success')
+		return
+	}
+
+	if (!me || !me.account_id) {
+		$tokenStatus.innerHTML = 'Token rỗng hoặc không hợp lệ. Vui lòng nhập lại'
+		$tokenStatus.classList.remove('text-danger')
+		$tokenStatus.classList.remove('text-success')
+		$tokenStatus.classList.add('text-muted')
+		return
+	}
+
+	$tokenStatus.innerHTML = 'Token hợp lệ. Xin chào ' + me.fullname
+	$tokenStatus.classList.add('text-success')
+	$tokenStatus.classList.remove('text-danger')
+	$tokenStatus.classList.remove('text-muted')
+}
+
+function init() {
+	setTokenStatus('loading')
+	fetch(`https://api.subiz.com.vn/4.0/me?x-access-token=${access_token}`)
+		.then((response) => {
+			return response.json()
+		})
+		.then((me) => {
+			setTokenStatus(me)
+			if (!me || !me.account_id) return null
+			return me
+		})
+		.then((me) => {
+			if (!me) return
+			// save token
+			try {
+				webphone = new SubizWebPhone(access_token)
+				accid = access_token.split('_')[0]
+			} catch (e) {
+				alert('ERROR2: ' + e)
+				// setTimeout(main)
+				return
+			}
+
+			document.getElementById('btnCall').disabled = false
+
+			webphone.onEvent(function (ev) {
+				let call = ev.data.call_info
+				let callid = call.call_id
+				eventLogs[callid] = eventLogs[callid] || []
+				if (callid != mycallid) return
+				eventLogs[callid].push(ev)
+
+				// render log
+				let logM = eventLogs[callid]
+				if (logM) {
+					let log = logM
+						.map((ev) => {
+							return `${new Date(ev.created).toLocaleString()} | ${ev.type} | ${JSON.stringify(ev.data.call_info)}`
+						})
+						.join('\n')
+					document.getElementById('infoLog').innerHTML = log
+				}
+
+				if (call.status == 'dialing') {
+					document.getElementById('infoRecordedUrl').innerHTML = ''
+					document.getElementById('infoRecordedUrl').href = undefined
+					document.getElementById('info').style['background-color'] = '#fffed3'
+				}
+
+				if (call.status == 'active') {
+					document.getElementById('info').style['background-color'] = '#8cff6b'
+				}
+
+				if (call.status == 'ended' || !call.status) {
+					document.getElementById('info').style['background-color'] = '#ffc6c6'
+				}
+
+				if (call.status == 'ended' && ev.id) {
+					// from server, not fake
+					document.getElementById('infoRecordedUrl').innerHTML = 'Đang tải...'
+					document.getElementById('infoRecordedUrl').href = undefined
+
+					fetchRecordedUrl(callid).then((url) => {
+						if (url == 'unavailable') {
+							document.getElementById('infoRecordedUrl').innerHTML = 'Không khả dụng'
+							document.getElementById('infoRecordedUrl').href = undefined
+							return
+						}
+						document.getElementById('infoRecordedUrl').innerHTML = url
+						document.getElementById('infoRecordedUrl').href = url
+					})
+				}
+			})
+		})
+}
+
+// inputToken asks access token from the agent
+function inputToken() {
+	access_token = prompt('Vui lòng nhập access token')
+	localStorage.setItem('access_token', access_token)
+	if (access_token) init()
+}
+
+// fetchRecordedUrl attemps to get the recorded audio url
+// since we dont know when the file is uploaded, we must retry multiple times.
+// this code is only for demo purpose
+function fetchRecordedUrl(callid) {
+	// try maximum 4 times
+	return new Promise((rs) => {
+		fetchConversation(callid).then((convo) => {
+			if (convo.call.recorded_audio && convo.call.recorded_audio.url) {
+				return rs(convo.call.recorded_audio.url)
+			}
+			setTimeout(() => {
+				fetchConversation(callid).then((convo) => {
+					if (convo.call.recorded_audio && convo.call.recorded_audio.url) {
+						return rs(convo.call.recorded_audio.url)
+					}
+
+					setTimeout(() => {
+						fetchConversation(callid).then((convo) => {
+							if (convo.call.recorded_audio && convo.call.recorded_audio.url) {
+								return rs(convo.call.recorded_audio.url)
+							}
+
+							setTimeout(() => {
+								fetchConversation(callid).then((convo) => {
+									if (convo.call.recorded_audio && convo.call.recorded_audio.url) {
+										return rs(convo.call.recorded_audio.url)
+									}
+									rs('unavailable')
+								})
+							}, 4000)
+						})
+					}, 4000)
+				})
+			}, 4000)
+		})
+	})
+}
+
+// fetchConversation sends a request API to get the latest conversation
+function fetchConversation(callid) {
+	let call = webphone.getCall(callid)
+	if (!call) return Promise.resolve(null)
+	let convoid = call.conversation_id
+	if (!convoid) return Promise.resolve(null)
+	return fetch(
+		`https://api.subiz.com.vn/4.0/accounts/${accid}/conversations/${convoid}?x-access-token=${access_token}`,
+	).then((response) => {
+		return response.json()
+	})
+}
+
+function makeCall() {
+	if (!webphone) return
+	let fromNumber = document.getElementById('fromNumber').value
+	let toNumber = document.getElementById('toNumber').value
+	//webphone.makeCall(toNumber, fromNumber);
+
+	webphone.makeCall('0364821895', ['935022139843821727', '842473021368'])
+	mycallid = webphone.getCurrentCallId()
+}
+
+let access_token = localStorage.getItem('access_token')
+if (access_token) init()
+
+// update loop
+setInterval(function () {
+	if (!webphone) return
+	let call = webphone.getCall(mycallid)
+	if (!call) return
+	document.getElementById('infoCallId').innerHTML = call.call_id
+	document.getElementById('infoFromNumber').innerHTML = call.from_number
+	document.getElementById('infoConversationId').innerHTML = call.conversation_id
+	document.getElementById('infoToNumber').innerHTML = call.to_number
+	document.getElementById('infoStatus').innerHTML = call.status
+	document.getElementById('infoCreated').innerHTML = new Date(call.started).toLocaleString()
+	if (call.status == 'active')
+		document.getElementById('infoDuration').innerHTML = Math.floor((Date.now() - call.started) / 1000) || 0
+	else {
+		document.getElementById('infoDuration').innerHTML = Math.floor((call.ended - call.started) / 1000) || 0
+	}
+	if (call.hangup_code) document.getElementById('infoHangupCode').innerHTML = call.hangup_code
+}, 500)
+
+function hangupCall() {
+	if (!webphone) return
+	webphone.hangupCall(mycallid)
+}
+
+// expose to window so we can call it in HTML
+window.makeCall = makeCall
+window.hangupCall = hangupCall
+window.inputToken = inputToken

package/package.json

@@ -1,8 +1,9 @@
 {
 	"name": "@subiz/wsclient",
-	"version": "4.0.21",
+	"version": "4.0.22",
 	"main": "realtime.js",
 	"scripts": {
+		"dev": "vite",
 		"test": "node realtime.test.js"
 	},
 	"repository": {
@@ -14,10 +15,11 @@
 	"homepage": "https://github.com/subiz/wsclient#readme",
 	"description": "",
 	"devDependencies": {
-		"tape": "^5.7.2"
+		"tape": "^5.7.3",
+		"vite": "^5.0.4",
+		"vite-plugin-commonjs": "^0.10.1"
 	},
 	"dependencies": {
-		"@subiz/flow": "^1.1.0",
-		"request": "^2.88.2"
+		"@subiz/flow": "^1.1.0"
 	}
 }

package/vite.config.js

@@ -0,0 +1,16 @@
+import {defineConfig} from 'vite'
+import commonjs from 'vite-plugin-commonjs'
+
+export default defineConfig({
+	plugins: [
+		commonjs({
+			filter(id) {
+				if (id.includes('node_modules/redux-storage/build-es')) {
+					return true
+				}
+			},
+		}),
+		// Other plugins
+	],
+	// Other configurations
+})

package/webphone.js

@@ -56,6 +56,31 @@ function WebPhone(access_token, realtime) {
 		},
 	})
 
+	var _numbers = []
+	var _fetchNumbers = function () {
+		xhrsend(
+			'get',
+			`https://api.subiz.com.vn/4.0/integrations?x-access-token=${access_token}`,
+			undefined,
+			function (body, code) {
+				setTimeout(_fetchNumbers, 120_000)
+				if (code != 200) return
+				var integrations = parseJSON(body)
+				if (!integrations || !integrations.length) return
+				var numbers = []
+				for (var i = 0; i < integrations.length; i++) {
+					var integration = integrations[i] || {}
+					if (integration.connector_type == 'call' && integration.state == 'activated') {
+						var number = integration.id.split('.')[1]
+						numbers.push(number)
+					}
+				}
+				_numbers = numbers
+			},
+		)
+	}
+	_fetchNumbers()
+
 	this.onEvent = function (cb) {
 		return pubsub.on('event', cb)
 	}
@@ -129,23 +154,54 @@ function WebPhone(access_token, realtime) {
 	}
 
 	var base = '0123456789abcdef'
-	this.makeCall = function (number, fromnumber, streamPm) {
-		// '11edc52b-2918-4d71-9058-f7285e29d894'
-		var callid =
-			randomString(8, base) +
-			'-' +
-			randomString(4, base) +
-			'-' +
-			randomString(4, base) +
-			'-' +
-			randomString(4, base) +
-			'-' +
-			randomString(12, base)
+	// makeCall(number, [] || undefined || '', streamPm) // fallback all number
+	// makeCall(number, ['a','b','c'], streamPm) // fallback specific number
+	// makeCall(number, function() {}, streamPm) //
+	this.makeCall = function (number, fromnumbers, streamPm, _a, _b, _state) {
+		if (!_state) _state = {}
+		if (!fromnumbers || (Array.isArray(fromnumbers) && fromnumbers.length == 0)) {
+			fromnumbers = _numbers
+		}
+
+		if (typeof fromnumbers === 'string' || fromnumbers instanceof String || typeof value === 'number') {
+			fromnumbers = [fromnumbers + '']
+		}
 
+		// '11edc52b-2918-4d71-9058-f7285e29d894'
+		var callid = `${randomString(8, base)}-${randomString(4, base)}-${randomString(4, base)}`
+		callid += `-${randomString(4, base)}-${randomString(12, base)}`
 		current_call_id = callid
 
 		if (!streamPm) streamPm = getMicroPermissions()
-		return webrtcconn.makeCall(number, fromnumber, streamPm, callid)
+
+		let callnumber = chooseCallNumber(fromnumbers, _state.called)
+		if (!callnumber)
+			return (
+				_state.last_result || {
+					start: Date.now(),
+					ended: Date.now(),
+					direction: 'outbound',
+					account_id: accid,
+					to_number: number,
+					error: 'out_of_number',
+					id: callid,
+					hangup_code: 'failure',
+					status: 'ended',
+				}
+			)
+		return webrtcconn.makeCall(number, callnumber, streamPm, callid).then((out) => {
+			if (out.error) return out
+			if (out.hangup_code == 'cancel') return out
+			if (out.answered > 0) return out
+
+			if (out.hangup_code == 'terminated' || out.hangup_code == 'failure' || out.hangup_code == 'congestion') {
+				if (!_state.called) _state.called = {}
+				_state.called[callnumber] = true
+				_state.last_result = out
+				return this.makeCall(number, fromnumbers, streamPm, _a, _b, _state)
+			}
+			return out
+		})
 	}
 
 	var current_call_id = ''
@@ -183,3 +239,14 @@ function WebPhone(access_token, realtime) {
 
 window.SbzWebPhone1 = WebPhone
 module.exports = WebPhone
+
+function chooseCallNumber(numbers, called) {
+	if (!called) called = {}
+	if (!numbers || !numbers.length) return ''
+	for (var i = 0; i < numbers.length; i++) {
+		var number = numbers[i]
+		if (called[number]) continue
+		return number
+	}
+	return ''
+}

package/webrtc.js

@@ -168,6 +168,7 @@ function WebRTCConn(options) {
 	}
 	env.setInterval(cleanEndedCall, 120000)
 
+	let endcallCb = {}
 	let publish = (ev) => {
 		if (ev.type == 'call_ended') {
 			let callid = ev.data && ev.data.call_info && ev.data.call_info.call_id
@@ -181,6 +182,13 @@ function WebRTCConn(options) {
 			// do not clean up this now or some functions cannot work after the call ended
 			// DONOT: delete call2Connection[callid]
 			delete streams[connId]
+
+			Object.keys(endcallCb).map((callid) => {
+				let arr = endcallCb[callid]
+				if (!arr || arr.length == 0 || !arr.map) return
+				arr.map((cb) => cb())
+				delete endcallCb[callid]
+			})
 		}
 
 		let direction = ev.data && ev.data.call_info && ev.data.call_info.direction
@@ -371,7 +379,11 @@ function WebRTCConn(options) {
 							body = parseJSON(body)
 							if (body) serverCalls[callid] = body
 							delete dialingRequest[callid]
-							rs({body})
+
+							let call = this.matchCall(callid)
+							if (call && call.status == 'ended') return rs(call)
+							if (!endcallCb[callid]) endcallCb[callid] = []
+							endcallCb[callid].push(() => rs(this.matchCall(callid)))
 						})
 					})
 				})
@@ -389,6 +401,7 @@ function WebRTCConn(options) {
 			serverCalls[callid] = call
 		}
 		call.status = 'ended'
+		call.hangup_code = 'cancel'
 		call.ended = env.Date.now()
 		publish({created: env.Date.now(), type: 'call_ended', data: {call_info: {call_id: callid}}})
 		callAPI('post', `${apiUrl}hangup?x-access-token=${access_token}&call_id=${callid}`)