JsSIP official website address: https://jssip.net/download/
- Download the JsSIP plug-in: npm install jssip;
- Introduced into the project: import JsSIP from “jssip”;
- Initialize SIP
let currentSession;
let userAgent;
let peer;
var msg_log = null;
sip_init () {<!-- -->
let _this = this;
msg_log = {<!-- -->
el: document.querySelector(".message"),
log(msg) {<!-- -->
console.log("msg", msg);
this.titleText = msg;
this.el.innerHTML + = `<span class="success">${<!-- -->new Date().toLocaleTimeString()}:${<!-- -->msg}</ span>`;
},
error(msg) {<!-- -->
console.log("error", msg);
this.titleText = msg;
this.el.innerHTML + = `<span class="error">${<!-- -->new Date().toLocaleTimeString()}:${<!-- -->msg}</ span>`;
}
}
const selfVideo = document.querySelector("#selfVideo");
//Local loading is completed. Peer loading is completed.
const socket = new JsSIP.WebSocketInterface(`wss://192.168.XX.XXX:16376`);
const configuration = {<!-- -->
sockets: [socket],
uri: `sip:[email protected]:16376;transport=wss`, // loginPhone is an 11-digit number starting with 1
password: "XXXXXX", // Password
register: true, // automatic registration
session_timers: false,
};
var ua = new JsSIP.UA(configuration);
ua.on("connected", () => {<!-- -->
// msg_log.log("Connecting")
console.log("Connecting");
});
ua.on("connecting", () => {<!-- -->
// msg_log.log("Wiring")
console.log("Wiring")
});
ua.on("disconnected", () => {<!-- -->
// msg_log.error("Cancel connection")
console.error("Cancel connection")
});
ua.on("registered", () =>{<!-- -->
// msg_log.log(`--${name === "offer" ? 2001 : 2002}Registration successful`);
});
ua.on("registrationExpiring", () => {<!-- -->
// msg_log.log("Registration is about to expire, re-register")
console.log("Registration is about to expire, re-register")
});
ua.on("registrationFailed", () => {<!-- -->
// msg_log.error("Registration failed")
console.error("Registration failed")
});
ua.on("unregistered", () => {<!-- -->
// msg_log.log("Cancel registration")
console.log("Cancel registration")
});
ua.on("sipEvent", () => {<!-- -->
// msg_log.log("sipEvent")
console.log("sipEvent")
});
ua.on("newRTCSession", function (data) {<!-- -->
const {<!-- --> session, request, originator } = data;
if (originator === "remote") {<!-- -->
// msg_log.log("The other party called~~~");
} else {<!-- -->
// msg_log.log("Making a call~~~");
}
currentSession = session;
// connecting
session.on("connecting", () => {<!-- -->
// msg_log.log("Triggered when the call is connected")
});
// Connection accepted
session.on("accepted", () => {<!-- -->
_this.videoSpinner = true;
// msg_log.log("Triggered when call is accepted")
});
session.on("sdp", () => {<!-- -->
// msg_log.log("Exchange sdp signaling event triggered")
});
session.on("failed", () => {<!-- -->
// window.open("https://192.168.30.236:16376","verification")
console.log("Call failure event triggered")
});
session.on("reinvite", () => {<!-- -->
// msg_log.log("Renegotiation event triggered");
audioElement.srcObject = null;
// own video stream
// if (session._connection.getLocalStreams().length > 0) {<!-- -->
// selfVideo.srcObject = session?._connection.getLocalStreams()[0];
// selfVideo.play();
// }
//Accessed video stream
// if (session?._connection.getRemoteStreams().length > 0) {<!-- -->
// remoteVideo.srcObject = session?._connection.getRemoteStreams()[0];
// remoteVideo.play();
// }
});
session.on("progress", () => {<!-- -->
if (originator === "remote") {<!-- -->
// msg_log.log("Call me~~~~~~~~~··");
session.answer({<!-- -->
mediaConstraints: {<!-- --> audio: true, video: _this.callType === 'video' ?true:false },
// mediaStream: localStream,
});
// msg_log.log("I answered the call");
}
// msg_log.log("The listening event is triggered in progress");
});
session.on("confirmed", () => {<!-- -->
// msg_log.log("Call confirmation--Set media streaming to audio and video");
// play video
if (_this.callType === "video") {<!-- -->
const remoteVideo = document.querySelector("#remoteVideo");
console.log(remoteVideo,"remoteVideoremoteVideo");
selfVideo.srcObject = null;
remoteVideo.srcObject = null;
// own video stream
// if (session._connection.getLocalStreams().length > 0) {<!-- -->
// // After answering, judge localStream
// selfVideo.srcObject = session?._connection.getLocalStreams()[0];
// selfVideo.play();
// }
//Accessed video stream
if (session?._connection.getRemoteStreams().length > 0) {<!-- -->
remoteVideo.srcObject = session?._connection.getRemoteStreams()[0];
remoteVideo.play();
}
}else if (_this.callType === "audio") {<!-- -->
// Voice playback
const stream = new MediaStream();
const receivers = currentSession.connection?.getReceivers();
if (receivers)
receivers.forEach((receiver) => stream.addTrack(receiver.track));
audioElement.srcObject = stream;
// Play at the end
audioElement.oncanplay = () => {<!-- -->
audioElement.play();
};
}
});
session.on("peerconnection", (data) => {<!-- -->
// msg_log.log("Peer connection event triggered");
});
session.on("connecting", (data) => {<!-- -->
peer = session._connection;
// msg_log.log("Peer connection established, connecting");
});
session.on("ended", () => {<!-- -->
// msg_log.log("Call ended")
});
});
userAgent = ua;
ua.start();
},```
4. Make a call
```typescript
call() {<!-- -->
let _this = this;
const eventHandlers = {<!-- -->
progress: function (e) {<!-- -->
console.log("call is in progress");
},
failed: function (e) {<!-- -->
_this.titleText = "The other party has hung up!";
_this.$message.error("No answer!")
_this.VoiceVisible = false;
_this.ViewsVisible = false;
console.log("call failed: ", e);
},
ended: function (e) {<!-- -->
_this.$message.error("Call ended")
console.log("call ended : ", e);
},
confirmed: function (e) {<!-- -->
console.log("call confirmed");
},
}
const opt = {<!-- -->
mediaConstraints: {<!-- -->
audio: true,
video: _this.callType === 'video' ?true:false
},
eventHandlers,
};
// callPhone The phone number to call
userAgent.call(`sip:${<!-- -->this.callPhone}@192.168.XX.XXX:16371`, opt);
},
- hang up the phone
userAgent.stop(); // websocket will be disconnected and needs to be re-registered
userAgent.terminateSessions() // websocket will not disconnect