| | |
| | | sipStatusClass: "status-disconnected", |
| | | randomNum = Math.floor(Math.random() * 21) + 1000, // çæ 1000-1020 çéæºæ´æ° |
| | | sipConfig: { |
| | | wsUrl: "wss://192.168.100.6:7443", |
| | | sipUri: `${randomNum}`+"@192.168.100.6", |
| | | wsUrl: "wss://192.168.10.124:7443", |
| | | sipUri: `${randomNum}`+"@192.168.10.124", |
| | | password: "Smartor@2023", |
| | | displayName: "Web å°é¾", |
| | | }, |
¶Ô±ÈÐÂÎļþ |
| | |
| | | import JsSIP from "jssip"; |
| | | |
| | | class SipService { |
| | | constructor() { |
| | | this.ua = null; |
| | | this.currentSession = null; |
| | | this.onStatusChange = null; // ç¶æåååè° |
| | | this.onCallStatusChange = null; // æ°å¢éè¯ç¶æåè° |
| | | } |
| | | |
| | | // åå§åSIP客æ·ç«¯ |
| | | init(config) { |
| | | try { |
| | | this.updateStatus("connecting", "è¿æ¥ä¸..."); |
| | | |
| | | this.ua = new JsSIP.UA({ |
| | | sockets: [new JsSIP.WebSocketInterface(config.wsUrl)], |
| | | uri: config.sipUri, |
| | | password: config.password, |
| | | display_name: config.displayName, |
| | | iceservers: [], |
| | | // realm: config.realm, |
| | | register: true, |
| | | session_expires: 180, |
| | | sessionTimersExpires: 300, // 设置 Session-Expires=120ï¼å¿
é¡» >= Min-SEï¼ |
| | | extraHeaders: [ |
| | | "Min-SE: 120", // å¯éï¼æ¾å¼åè¯æå¡å¨ä½ æ¯æçæå°å¼ |
| | | ], |
| | | register_expires: 300, // æ³¨åæææ(ç§) |
| | | connection_recovery_min_interval: 2, // æå°éè¿é´é |
| | | connection_recovery_max_interval: 30, // æå¤§éè¿é´é |
| | | }); |
| | | |
| | | this.ua.start(); |
| | | |
| | | // 注åäºä»¶çå¬ |
| | | this.ua.on("registered", () => { |
| | | this.updateStatus("registered", "已注å"); |
| | | }); |
| | | |
| | | this.ua.on("registrationFailed", (e) => { |
| | | this.updateStatus("failed", `注å失败: ${e.cause}`); |
| | | }); |
| | | |
| | | this.ua.on("disconnected", () => { |
| | | this.updateStatus("disconnected", "è¿æ¥æå¼"); |
| | | }); |
| | | |
| | | this.ua.on("connected", () => { |
| | | this.updateStatus("connecting", "éæ°è¿æ¥ä¸..."); |
| | | }); |
| | | |
| | | // ç嬿¥çµ |
| | | this.ua.on("newRTCSession", (data) => { |
| | | this.handleIncomingCall(data.session); |
| | | }); |
| | | } catch (error) { |
| | | this.updateStatus("failed", `åå§å失败: ${error.message}`); |
| | | console.error("SIPåå§å失败:", error); |
| | | } |
| | | } |
| | | handleIncomingCall(session) { |
| | | if (session.direction === "incoming") { |
| | | console.log("æ¥çµ:", session.remote_identity.uri.toString()); |
| | | // å¯ä»¥å¨è¿é触å UI éç¥ |
| | | if (this.onIncomingCall) { |
| | | this.onIncomingCall(session); |
| | | } |
| | | } |
| | | } |
| | | |
| | | // æ´æ°ç¶æå¹¶éç¥UI |
| | | updateStatus(type, text) { |
| | | console.log(`SIPç¶ææ´æ°: ${type} - ${text}`); |
| | | if (this.onStatusChange) { |
| | | this.onStatusChange({ type, text }); |
| | | } |
| | | } |
| | | |
| | | // ä¸é®æ¨å· - å¢å 注åç¶ææ£æ¥ |
| | | makeCall(targetNumber) { |
| | | if (!this.ua) { |
| | | throw new Error("SIP客æ·ç«¯æªåå§å"); |
| | | } |
| | | |
| | | if (!this.ua.isRegistered()) { |
| | | throw new Error("SIPæªæ³¨åï¼æ æ³å¼å«"); |
| | | } |
| | | |
| | | const options = { |
| | | sessionTimers: true, |
| | | sessionTimersExpires: 300, |
| | | extraHeaders: [ |
| | | "Min-SE: 120", |
| | | "Route: <sip:@192.168.100.6>", |
| | | "Accept: application/sdp", |
| | | "Supported: replaces, timer", |
| | | "Allow: INVITE, ACK, BYE, CANCEL, OPTIONS", |
| | | ], |
| | | eventHandlers: { |
| | | progress: (e) => { |
| | | this.updateCallStatus("calling", "å¼å«ä¸..."); |
| | | }, |
| | | failed: (e) => { |
| | | this.updateCallStatus("ended", `å¼å«å¤±è´¥: ${e.cause}`); |
| | | }, |
| | | ended: (e) => { |
| | | this.updateCallStatus("ended", "éè¯ç»æ"); |
| | | }, |
| | | confirmed: (e) => { |
| | | this.updateCallStatus("connected", "éè¯å·²æ¥é"); |
| | | }, |
| | | }, |
| | | mediaConstraints: { |
| | | audio: true, |
| | | video: false, |
| | | }, |
| | | rtcOfferConstraints: { |
| | | offerToReceiveAudio: 1, |
| | | offerToReceiveVideo: 0, |
| | | mandatory: { |
| | | OfferToReceiveAudio: true, |
| | | OfferToReceiveVideo: false, |
| | | }, |
| | | }, |
| | | pcConfig: { |
| | | iceServers: [{ urls: "stun:stun.l.google.com:19302" }], |
| | | iceTransportPolicy: "all", |
| | | bundlePolicy: "balanced", |
| | | rtcpMuxPolicy: "require", |
| | | codecs: { |
| | | audio: [ |
| | | { name: "PCMU", clockRate: 8000, payloadType: 0 }, |
| | | { name: "PCMA", clockRate: 8000, payloadType: 8 }, |
| | | ], |
| | | video: [], |
| | | }, |
| | | }, |
| | | }; |
| | | |
| | | this.currentSession = this.ua.call( |
| | | `sip:${targetNumber}@192.168.100.6`, |
| | | options |
| | | ); |
| | | // å¨ä¼è¯å建åä¿®æ¹ SDP |
| | | this.currentSession.on("peerconnection", (pc) => { |
| | | this.updateCallStatus('calling', 'å¼å«ä¸...'); |
| | | pc.createOffer = (offerOptions) => { |
| | | return RTCPeerConnection.prototype.createOffer |
| | | .call(pc, offerOptions) |
| | | .then((offer) => { |
| | | const modifiedSdp = offer.sdp |
| | | .replace(/c=IN IP4 192\.168\.100\.10/g, "c=IN IP4 192.168.100.6") |
| | | .replace(/m=audio \d+ RTP\/AVP.*/, "m=audio 7078 RTP/AVP 0 8"); |
| | | return new RTCSessionDescription({ |
| | | type: "offer", |
| | | sdp: modifiedSdp, |
| | | }); |
| | | }); |
| | | }; |
| | | }); |
| | | this.currentSession.on('failed', (e) => { |
| | | this.updateCallStatus('failed', `å¼å«å¤±è´¥2: ${e.cause}`); |
| | | }); |
| | | |
| | | this.currentSession.on('ended', () => { |
| | | this.updateCallStatus('ended', 'éè¯å·²ç»æ'); |
| | | }); |
| | | |
| | | this.currentSession.on('confirmed', () => { |
| | | this.updateCallStatus('connected', 'éè¯å·²æ¥é'); |
| | | }); |
| | | this.setupAudio(this.currentSession); |
| | | } |
| | | setupAudio(session) { |
| | | session.connection.addEventListener("addstream", (e) => { |
| | | const audioElement = document.getElementById("remoteAudio"); |
| | | if (audioElement) { |
| | | audioElement.srcObject = e.stream; |
| | | } |
| | | }); |
| | | } |
| | | // ææå½åéè¯ |
| | | endCall() { |
| | | if (this.currentSession) { |
| | | this.currentSession.terminate(); |
| | | this.updateCallStatus('ended', 'éè¯å·²ç»æ'); |
| | | this.currentSession = null; |
| | | } |
| | | } |
| | | // æ°å¢æ¹æ³ï¼æ´æ°éè¯ç¶æ |
| | | updateCallStatus(type, text) { |
| | | console.log(`éè¯ç¶ææ´æ°: ${type} - ${text}`); |
| | | if (this.onCallStatusChange) { |
| | | this.onCallStatusChange({ type, text }); |
| | | } |
| | | } |
| | | } |
| | | |
| | | export default new SipService(); |
| | |
| | | constructor() { |
| | | this.ua = null; |
| | | this.currentSession = null; |
| | | this.onStatusChange = null; // ç¶æåååè° |
| | | this.onCallStatusChange = null; // æ°å¢éè¯ç¶æåè° |
| | | this.onStatusChange = null; |
| | | this.onCallStatusChange = null; |
| | | this.onIncomingCall = null; |
| | | } |
| | | |
| | | // åå§åSIP客æ·ç«¯ |
| | | init(config) { |
| | | try { |
| | | this.updateStatus("connecting", "è¿æ¥ä¸..."); |
| | |
| | | uri: config.sipUri, |
| | | password: config.password, |
| | | display_name: config.displayName, |
| | | iceservers: [], |
| | | // realm: config.realm, |
| | | iceServers: [{ urls: "stun:stun.l.google.com:19302" }], |
| | | register: true, |
| | | session_expires: 180, |
| | | sessionTimersExpires: 300, // 设置 Session-Expires=120ï¼å¿
é¡» >= Min-SEï¼ |
| | | extraHeaders: [ |
| | | "Min-SE: 120", // å¯éï¼æ¾å¼åè¯æå¡å¨ä½ æ¯æçæå°å¼ |
| | | ], |
| | | register_expires: 300, // æ³¨åæææ(ç§) |
| | | connection_recovery_min_interval: 2, // æå°éè¿é´é |
| | | connection_recovery_max_interval: 30, // æå¤§éè¿é´é |
| | | sessionTimersExpires: 300, |
| | | extraHeaders: ["Min-SE: 120"], |
| | | register_expires: 300, |
| | | connection_recovery_min_interval: 2, |
| | | connection_recovery_max_interval: 30, |
| | | pcConfig: { |
| | | iceTransportPolicy: "all", |
| | | rtcpMuxPolicy: "require", |
| | | bundlePolicy: "max-bundle" |
| | | } |
| | | }); |
| | | |
| | | this.ua.start(); |
| | | |
| | | // 注åäºä»¶çå¬ |
| | | this.ua.on("registered", () => { |
| | | this.updateStatus("registered", "已注å"); |
| | | }); |
| | | // äºä»¶çå¬ |
| | | this.ua.on("registered", () => this.updateStatus("registered", "已注å")); |
| | | this.ua.on("registrationFailed", (e) => |
| | | this.updateStatus("failed", `注å失败: ${e.cause}`)); |
| | | this.ua.on("disconnected", () => |
| | | this.updateStatus("disconnected", "è¿æ¥æå¼")); |
| | | this.ua.on("connected", () => |
| | | this.updateStatus("connecting", "éæ°è¿æ¥ä¸...")); |
| | | this.ua.on("newRTCSession", (data) => |
| | | this.handleIncomingCall(data.session)); |
| | | |
| | | this.ua.on("registrationFailed", (e) => { |
| | | this.updateStatus("failed", `注å失败: ${e.cause}`); |
| | | }); |
| | | |
| | | this.ua.on("disconnected", () => { |
| | | this.updateStatus("disconnected", "è¿æ¥æå¼"); |
| | | }); |
| | | |
| | | this.ua.on("connected", () => { |
| | | this.updateStatus("connecting", "éæ°è¿æ¥ä¸..."); |
| | | }); |
| | | |
| | | // ç嬿¥çµ |
| | | this.ua.on("newRTCSession", (data) => { |
| | | this.handleIncomingCall(data.session); |
| | | }); |
| | | } catch (error) { |
| | | this.updateStatus("failed", `åå§å失败: ${error.message}`); |
| | | console.error("SIPåå§å失败:", error); |
| | | } |
| | | } |
| | | handleIncomingCall(session) { |
| | | if (session.direction === "incoming") { |
| | | console.log("æ¥çµ:", session.remote_identity.uri.toString()); |
| | | // å¯ä»¥å¨è¿é触å UI éç¥ |
| | | if (this.onIncomingCall) { |
| | | this.onIncomingCall(session); |
| | | } |
| | | } |
| | | } |
| | | |
| | | // æ´æ°ç¶æå¹¶éç¥UI |
| | | updateStatus(type, text) { |
| | | console.log(`SIPç¶ææ´æ°: ${type} - ${text}`); |
| | | if (this.onStatusChange) { |
| | | this.onStatusChange({ type, text }); |
| | | throw error; |
| | | } |
| | | } |
| | | |
| | | // ä¸é®æ¨å· - å¢å 注åç¶ææ£æ¥ |
| | | makeCall(targetNumber) { |
| | | return new Promise((resolve, reject) => { |
| | | try { |
| | | if (!this.ua) { |
| | | throw new Error("SIP客æ·ç«¯æªåå§å"); |
| | | } |
| | |
| | | } |
| | | |
| | | const options = { |
| | | sessionTimers: true, |
| | | sessionTimersExpires: 300, |
| | | sessionTimers: false, // ææ¶ç¦ç¨ä»¥åå°å
¼å®¹æ§é®é¢ |
| | | extraHeaders: [ |
| | | "Min-SE: 120", |
| | | "Route: <sip:@192.168.100.6>", |
| | | "Accept: application/sdp", |
| | | "Supported: replaces, timer", |
| | | "Allow: INVITE, ACK, BYE, CANCEL, OPTIONS", |
| | | "Supported: outbound" |
| | | ], |
| | | eventHandlers: { |
| | | progress: (e) => { |
| | | this.updateCallStatus("calling", "å¼å«ä¸..."); |
| | | }, |
| | | failed: (e) => { |
| | | this.updateCallStatus("ended", `å¼å«å¤±è´¥: ${e.cause}`); |
| | | }, |
| | | ended: (e) => { |
| | | this.updateCallStatus("ended", "éè¯ç»æ"); |
| | | }, |
| | | confirmed: (e) => { |
| | | this.updateCallStatus("connected", "éè¯å·²æ¥é"); |
| | | }, |
| | | }, |
| | | mediaConstraints: { |
| | | audio: true, |
| | | video: false, |
| | | }, |
| | | mediaConstraints: { audio: true, video: false }, |
| | | rtcOfferConstraints: { |
| | | offerToReceiveAudio: 1, |
| | | offerToReceiveVideo: 0, |
| | | mandatory: { |
| | | OfferToReceiveAudio: true, |
| | | OfferToReceiveVideo: false, |
| | | offerToReceiveAudio: true, |
| | | offerToReceiveVideo: false |
| | | }, |
| | | eventHandlers: { |
| | | progress: () => this.updateCallStatus("calling", "å¼å«ä¸..."), |
| | | failed: (e) => { |
| | | this.handleCallFailure(e, reject); |
| | | }, |
| | | pcConfig: { |
| | | iceServers: [{ urls: "stun:stun.l.google.com:19302" }], |
| | | iceTransportPolicy: "all", |
| | | bundlePolicy: "balanced", |
| | | rtcpMuxPolicy: "require", |
| | | codecs: { |
| | | audio: [ |
| | | { name: "PCMU", clockRate: 8000, payloadType: 0 }, |
| | | { name: "PCMA", clockRate: 8000, payloadType: 8 }, |
| | | ], |
| | | video: [], |
| | | }, |
| | | }, |
| | | ended: () => this.updateCallStatus("ended", "éè¯ç»æ"), |
| | | confirmed: () => { |
| | | this.updateCallStatus("connected", "éè¯å·²æ¥é"); |
| | | resolve(); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | this.currentSession = this.ua.call( |
| | | `sip:${targetNumber}@192.168.100.6`, |
| | | `sip:${targetNumber}@192.168.10.124`, |
| | | options |
| | | ); |
| | | // å¨ä¼è¯å建åä¿®æ¹ SDP |
| | | this.currentSession.on("peerconnection", (pc) => { |
| | | this.updateCallStatus('calling', 'å¼å«ä¸...'); |
| | | pc.createOffer = (offerOptions) => { |
| | | return RTCPeerConnection.prototype.createOffer |
| | | .call(pc, offerOptions) |
| | | .then((offer) => { |
| | | const modifiedSdp = offer.sdp |
| | | .replace(/c=IN IP4 192\.168\.100\.10/g, "c=IN IP4 192.168.100.6") |
| | | .replace(/m=audio \d+ RTP\/AVP.*/, "m=audio 7078 RTP/AVP 0 8"); |
| | | return new RTCSessionDescription({ |
| | | type: "offer", |
| | | sdp: modifiedSdp, |
| | | |
| | | this.setupPeerConnection(this.currentSession); |
| | | this.setupAudio(this.currentSession); |
| | | |
| | | } catch (error) { |
| | | this.updateCallStatus("failed", `å¼å«å¤±è´¥: ${error.message}`); |
| | | reject(error); |
| | | } |
| | | }); |
| | | }); |
| | | } |
| | | |
| | | setupPeerConnection(session) { |
| | | session.on("peerconnection", (pc) => { |
| | | const originalCreateOffer = pc.createOffer.bind(pc); |
| | | |
| | | pc.createOffer = async (offerOptions) => { |
| | | try { |
| | | const offer = await originalCreateOffer(offerOptions); |
| | | return this.normalizeSDP(offer); |
| | | } catch (error) { |
| | | console.error("å建Offer失败:", error); |
| | | throw error; |
| | | } |
| | | }; |
| | | }); |
| | | this.currentSession.on('failed', (e) => { |
| | | this.updateCallStatus('failed', `å¼å«å¤±è´¥2: ${e.cause}`); |
| | | }); |
| | | |
| | | this.currentSession.on('ended', () => { |
| | | this.updateCallStatus('ended', 'éè¯å·²ç»æ'); |
| | | }); |
| | | |
| | | this.currentSession.on('confirmed', () => { |
| | | this.updateCallStatus('connected', 'éè¯å·²æ¥é'); |
| | | }); |
| | | this.setupAudio(this.currentSession); |
| | | } |
| | | |
| | | normalizeSDP(offer) { |
| | | let sdp = offer.sdp; |
| | | |
| | | // 1. æ ååè¿æ¥è¡ |
| | | sdp = sdp.replace(/c=IN IP4.*\r\n/, "c=IN IP4 0.0.0.0\r\n"); |
| | | |
| | | // 2. æ ååé³é¢åªä½è¡ |
| | | sdp = sdp.replace(/m=audio \d+.*\r\n/, |
| | | "m=audio 9 UDP/TLS/RTP/SAVPF 0 8\r\n"); |
| | | |
| | | // 3. ç¡®ä¿å
å«åºæ¬ç¼è§£ç å¨ |
| | | if (!sdp.includes("PCMU/8000")) { |
| | | sdp += "a=rtpmap:0 PCMU/8000\r\n"; |
| | | } |
| | | if (!sdp.includes("PCMA/8000")) { |
| | | sdp += "a=rtpmap:8 PCMA/8000\r\n"; |
| | | } |
| | | |
| | | // 4. æ·»å å¿
è¦å±æ§ |
| | | sdp += "a=rtcp-mux\r\n"; |
| | | sdp += "a=sendrecv\r\n"; |
| | | |
| | | console.log("æ åååçSDP:", sdp); |
| | | return new RTCSessionDescription({ |
| | | type: offer.type, |
| | | sdp: sdp |
| | | }); |
| | | } |
| | | |
| | | handleCallFailure(e, reject) { |
| | | console.error("å¼å«å¤±è´¥è¯¦æ
:", { |
| | | cause: e.cause, |
| | | message: e.message, |
| | | response: e.response && e.response.status_code |
| | | }); |
| | | |
| | | let errorMessage = "å¼å«å¤±è´¥"; |
| | | switch(e.cause) { |
| | | case "Incompatible SDP": |
| | | errorMessage = "åªä½åå失败ï¼è¯·æ£æ¥ç¼è§£ç å¨é
ç½®"; |
| | | break; |
| | | case "488": |
| | | case "606": |
| | | errorMessage = "对æ¹è®¾å¤ä¸æ¯æå½ååªä½é
ç½®"; |
| | | break; |
| | | default: |
| | | errorMessage = `å¼å«å¤±è´¥: ${e.cause || e.message}`; |
| | | } |
| | | |
| | | this.updateCallStatus("failed", errorMessage); |
| | | reject(new Error(errorMessage)); |
| | | } |
| | | |
| | | setupAudio(session) { |
| | | session.connection.addEventListener("addstream", (e) => { |
| | | const audioElement = document.getElementById("remoteAudio"); |
| | |
| | | } |
| | | }); |
| | | } |
| | | // ææå½åéè¯ |
| | | |
| | | endCall() { |
| | | if (this.currentSession) { |
| | | this.currentSession.terminate(); |
| | | this.updateCallStatus('ended', 'éè¯å·²ç»æ'); |
| | | this.updateCallStatus("ended", "éè¯å·²ç»æ"); |
| | | this.currentSession = null; |
| | | } |
| | | } |
| | | // æ°å¢æ¹æ³ï¼æ´æ°éè¯ç¶æ |
| | | |
| | | updateStatus(type, text) { |
| | | console.log(`SIPç¶ææ´æ°: ${type} - ${text}`); |
| | | if (this.onStatusChange) { |
| | | this.onStatusChange({ type, text }); |
| | | } |
| | | } |
| | | |
| | | updateCallStatus(type, text) { |
| | | console.log(`éè¯ç¶ææ´æ°: ${type} - ${text}`); |
| | | if (this.onCallStatusChange) { |
| | | this.onCallStatusChange({ type, text }); |
| | | } |
| | | } |
| | | |
| | | handleIncomingCall(session) { |
| | | if (session.direction === "incoming") { |
| | | console.log("æ¥çµ:", session.remote_identity.uri.toString()); |
| | | if (this.onIncomingCall) { |
| | | this.onIncomingCall(session); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | export default new SipService(); |