From 3ae495d3c3e95019b9e0066aae3c3b35802c51fe Mon Sep 17 00:00:00 2001
From: WXL <1785969728@qq.com>
Date: 星期一, 07 七月 2025 16:24:12 +0800
Subject: [PATCH] 测试完成
---
src/components/CallButton/index.vue | 124 +++++++++++++++++++++++++++--------------
1 files changed, 82 insertions(+), 42 deletions(-)
diff --git a/src/components/CallButton/index.vue b/src/components/CallButton/index.vue
index 57690ea..6ff7055 100644
--- a/src/components/CallButton/index.vue
+++ b/src/components/CallButton/index.vue
@@ -1,29 +1,23 @@
<template>
<div class="call-container">
+ <div class="sip-status" :class="sipStatusClass">
+ SIP鐘舵��: {{ sipStatus }}
+ </div>
<!-- 鍙风爜杈撳叆 -->
<input
v-model="phoneNumber"
type="text"
placeholder="杈撳叆鐢佃瘽鍙风爜"
@keyup.enter="startCall"
- >
+ />
<!-- 鍛煎彨鎸夐挳 -->
- <button
- :class="['call-btn', { 'calling': isCalling }]"
- @click="startCall"
- >
- {{ isCalling ? '閫氳瘽涓�...' : '涓�閿懠鍙�' }}
+ <button :class="['call-btn', { calling: isCalling }]" @click="startCall">
+ {{ isCalling ? "閫氳瘽涓�..." : "涓�閿懠鍙�" }}
</button>
<!-- 鎸傛柇鎸夐挳 -->
- <button
- v-if="isCalling"
- class="end-call-btn"
- @click="endCall"
- >
- 鎸傛柇
- </button>
+ <button v-if="isCalling" class="end-call-btn" @click="endCall">鎸傛柇</button>
<!-- 闊抽鍏冪礌锛堥殣钘忥級 -->
<audio id="remoteAudio" autoplay></audio>
@@ -36,60 +30,80 @@
</template>
<script>
-import sipService from '@/utils/sipService'
+import sipService from "@/utils/sipService";
export default {
data() {
return {
- phoneNumber: '',
+ phoneNumber: "",
isCalling: false,
- callStatus: '鍑嗗灏辩华',
+ callStatus: "鍑嗗灏辩华",
+ sipStatus: "鏈繛鎺�",
+ sipStatusClass: "status-disconnected",
sipConfig: {
- wsUrl: 'wss://192.168.100.6:7443',
- sipUri: '1000@192.168.100.6',
- password: 'Smartor@2023',
- displayName: 'Web 灏忛緳',
- realm: '192.168.100.6:8090'
- }
- }
+ wsUrl: "wss://192.168.100.6:7443",
+ sipUri: "1000@192.168.100.6",
+ password: "Smartor@2023",
+ displayName: "Web 灏忛緳",
+ realm: "192.168.100.6:8090",
+ },
+ };
},
mounted() {
+ // 娴嬭瘯
+ const ws = new WebSocket("wss://192.168.100.6:7443");
+ ws.onopen = () => console.log("WebSocket 杩炴帴鎴愬姛");
+ ws.onerror = (e) => console.error("WebSocket 閿欒:", e);
+
+
// 鍒濆鍖朣IP杩炴帴
- sipService.init(this.sipConfig)
+
+ sipService.init(this.sipConfig);
+ sipService.onStatusChange = (status) => {
+ this.sipStatus = status.text;
+ this.sipStatusClass = `status-${status.type}`;
+
+ // 鏍规嵁鐘舵�佹洿鏂癠I鎴栨墽琛屽叾浠栨搷浣�
+ if (status.type === "registered") {
+ console.log("SIP娉ㄥ唽鎴愬姛锛屽彲浠ュ紑濮嬪懠鍙�");
+ } else if (status.type === "failed") {
+ console.error("SIP娉ㄥ唽澶辫触");
+ }
+ };
},
beforeDestroy() {
// 缁勪欢閿�姣佹椂缁撴潫閫氳瘽
- this.endCall()
+ this.endCall();
},
methods: {
// 寮�濮嬪懠鍙�
async startCall() {
if (!this.phoneNumber) {
- this.callStatus = '璇疯緭鍏ョ數璇濆彿鐮�'
- return
+ this.callStatus = "璇疯緭鍏ョ數璇濆彿鐮�";
+ return;
}
try {
- this.isCalling = true
- this.callStatus = '鍛煎彨涓�...'
+ this.isCalling = true;
+ this.callStatus = "鍛煎彨涓�...";
// 璋冪敤SIP鏈嶅姟
- sipService.makeCall(this.phoneNumber)
+ sipService.makeCall(this.phoneNumber);
- this.callStatus = '閫氳瘽宸插缓绔�'
+ this.callStatus = "閫氳瘽宸插缓绔�";
} catch (error) {
- console.error('鍛煎彨澶辫触:', error)
- this.callStatus = `鍛煎彨澶辫触: ${error.message}`
- this.isCalling = false
+ console.error("鍛煎彨澶辫触:", error);
+ this.callStatus = `鍛煎彨澶辫触: ${error.message}`;
+ this.isCalling = false;
}
},
// 缁撴潫閫氳瘽
endCall() {
- sipService.endCall()
- this.isCalling = false
- this.callStatus = '閫氳瘽宸茬粨鏉�'
- }
- }
-}
+ sipService.endCall();
+ this.isCalling = false;
+ this.callStatus = "閫氳瘽宸茬粨鏉�";
+ },
+ },
+};
</script>
<style scoped>
@@ -112,7 +126,7 @@
.call-btn {
padding: 10px;
- background-color: #4CAF50;
+ background-color: #4caf50;
color: white;
border: none;
border-radius: 4px;
@@ -124,7 +138,7 @@
}
.call-btn.calling {
- background-color: #2196F3;
+ background-color: #2196f3;
}
.end-call-btn {
@@ -145,4 +159,30 @@
font-size: 14px;
color: #666;
}
+.sip-status {
+ padding: 8px;
+ margin-bottom: 10px;
+ border-radius: 4px;
+ text-align: center;
+}
+
+.status-disconnected {
+ background-color: #ffebee;
+ color: #c62828;
+}
+
+.status-connecting {
+ background-color: #fff8e1;
+ color: #ff8f00;
+}
+
+.status-registered {
+ background-color: #e8f5e9;
+ color: #2e7d32;
+}
+
+.status-failed {
+ background-color: #ffebee;
+ color: #c62828;
+}
</style>
--
Gitblit v1.9.3