测试完成

WXL

12 小时以前 3ae495d3c3e95019b9e0066aae3c3b35802c51fe

 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);


    // 初始化SIP连接
    sipService.init(this.sipConfig)

    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()
    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>