<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>
|
|
<!-- 挂断按钮 -->
|
<button v-if="isCalling" class="end-call-btn" @click="endCall">挂断</button>
|
|
<!-- 音频元素（隐藏） -->
|
<audio id="remoteAudio" autoplay></audio>
|
|
<!-- 状态显示 -->
|
<div class="call-status">
|
{{ callStatus }}
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import sipService from "@/utils/sipService";
|
|
export default {
|
data() {
|
return {
|
phoneNumber: "",
|
isCalling: false,
|
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",
|
},
|
};
|
},
|
mounted() {
|
// 测试
|
const ws = new WebSocket("wss://192.168.100.6:7443");
|
ws.onopen = () => console.log("WebSocket 连接成功");
|
ws.onerror = (e) => console.error("WebSocket 错误:", e);
|
|
|
// 初始化SIP连接
|
|
sipService.init(this.sipConfig);
|
sipService.onStatusChange = (status) => {
|
this.sipStatus = status.text;
|
this.sipStatusClass = `status-${status.type}`;
|
|
// 根据状态更新UI或执行其他操作
|
if (status.type === "registered") {
|
console.log("SIP注册成功，可以开始呼叫");
|
} else if (status.type === "failed") {
|
console.error("SIP注册失败");
|
}
|
};
|
},
|
beforeDestroy() {
|
// 组件销毁时结束通话
|
this.endCall();
|
},
|
methods: {
|
// 开始呼叫
|
async startCall() {
|
if (!this.phoneNumber) {
|
this.callStatus = "请输入电话号码";
|
return;
|
}
|
try {
|
this.isCalling = true;
|
this.callStatus = "呼叫中...";
|
// 调用SIP服务
|
sipService.makeCall(this.phoneNumber);
|
|
this.callStatus = "通话已建立";
|
} catch (error) {
|
console.error("呼叫失败:", error);
|
this.callStatus = `呼叫失败: ${error.message}`;
|
this.isCalling = false;
|
}
|
},
|
|
// 结束通话
|
endCall() {
|
sipService.endCall();
|
this.isCalling = false;
|
this.callStatus = "通话已结束";
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.call-container {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
max-width: 300px;
|
margin: 0 auto;
|
padding: 20px;
|
border: 1px solid #eee;
|
border-radius: 8px;
|
}
|
|
input {
|
padding: 8px;
|
border: 1px solid #ccc;
|
border-radius: 4px;
|
}
|
|
.call-btn {
|
padding: 10px;
|
background-color: #4caf50;
|
color: white;
|
border: none;
|
border-radius: 4px;
|
cursor: pointer;
|
}
|
|
.call-btn:hover {
|
background-color: #45a049;
|
}
|
|
.call-btn.calling {
|
background-color: #2196f3;
|
}
|
|
.end-call-btn {
|
padding: 10px;
|
background-color: #f44336;
|
color: white;
|
border: none;
|
border-radius: 4px;
|
cursor: pointer;
|
}
|
|
.end-call-btn:hover {
|
background-color: #d32f2f;
|
}
|
|
.call-status {
|
margin-top: 10px;
|
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>
|
