matheorb
/
KeypadWebRTC
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

criado toda a tela 'incall' com as novas opcoes de keypad e inserido o DTMF para realizar operacoes durante a chamada, alem do ringback corrigido para todos os cenarios possiveis

master
Matheo Bonucia 5 months ago
parent
e836c22bdb
commit
b5ac39d9b4
3 changed files with 158 additions and 50 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 75
      keypad.js
  2. 78
      keypad_style.css
  3. 55
      simplesipsdk.js

75
keypad.js
Unescape View File

@ -63,14 +63,14 @@ const KeypadSimplesIP = (function () {
//RECEBENDO CHAMADA
let otherNumber = "Indefinido";
UASimplesIP.simplesipEvento.on("incomingcall", function (callerNumber) {
if (otherNumber === "Indefinido") {
if (otherNumber) {
otherNumber = callerNumber;
}
stateCurrent.setStateCall("incomingcall");
});
//FAZENDO CHAMADA
UASimplesIP.simplesipEvento.on("outgoingcall", function (callerNumber) {
if (otherNumber === "Indefinido") {
if (otherNumber) {
otherNumber = callerNumber;
}
stateCurrent.setStateCall("outgoingcall");
@ -83,6 +83,9 @@ const KeypadSimplesIP = (function () {
UASimplesIP.simplesipEvento.on("confirmedEnded", function () {
stateCurrent.setStateCall("home");
});
UASimplesIP.simplesipEvento.on("home", function () {
stateCurrent.setStateCall("home");
});
//==================================================================
const simplesipCreateContainer = (themeMode) => {
@ -376,26 +379,63 @@ const KeypadSimplesIP = (function () {
simplesipInCall.classList.add("simplesipInCall");
simplesipInCall.classList.add(themeMode);
simplesipInCall.id = "simplesipInCall";
simplesipCreateDisplay(container, themeMode);
simplesipCreateTimer(simplesipInCall);
//Adiciona o numero que ligou ao display
const display = document.getElementById("display");
display.style.marginTop = 30 + "px";
const bnEndCall = createButtonEndCall(handleEndCall);
const bnMute = createButtonMute(handleMute);
const bnKeypad = createButtonKeypad(handleKeypad);
const bnTransfer = createButtonTransfer(handleTransfer);
const keyPadIncall = createKeypadIncall();
//Configura outro display pra mostrar com quem está falando
const displayOtherNumber = document.createElement("div");
const userIcon = document.createElement("img");
userIcon.src = userImg;
userIcon.width = 20;
userIcon.height = 20;
displayOtherNumber.appendChild(userIcon);
displayOtherNumber.classList.add("displayOtherNumber");
displayOtherNumber.id = "displayOtherNumber";
displayOtherNumber.appendChild(userIcon);
const otherNumberText = document.createElement("span");
otherNumberText.textContent = otherNumber;
displayOtherNumber.appendChild(otherNumberText);
//Cria display que mostra todas as opções da chamada
const displayInCall = document.createElement("div");
displayInCall.classList.add("displayInCall");
displayInCall.id = "displayInCall";
display.textContent = otherNumber;
displayInCall.appendChild(bnMute);
displayInCall.appendChild(bnKeypad);
displayInCall.appendChild(bnTransfer);
displayInCall.appendChild(bnEndCall);
simplesipCreateDisplayContainer(container, themeMode);
const display = document.getElementById("displayContainer");
simplesipInCall.appendChild(displayOtherNumber);
simplesipCreateTimer(simplesipInCall);
simplesipInCall.appendChild(keyPadIncall);
simplesipInCall.appendChild(displayInCall);
container.appendChild(simplesipInCall);
//classe adicionada para adaptar o display durante a ligação
display.classList.add("incallDisplay");
};
const createKeypadIncall = () => {
const keyPadIncall = document.createElement("div");
keyPadIncall.classList.add("keyPadIncall");
keyPadIncall.id = "keyPadIncall";
simplesipButtons.forEach((element) => {
const simplesipButton = document.createElement("button");
simplesipButton.textContent = element;
simplesipButton.classList.add("simplesip-bn");
simplesipButton.addEventListener("click", () => handleClick(element));
keyPadIncall.appendChild(simplesipButton);
});
return keyPadIncall;
};
const createButtonKeypad = (event) => {
@ -564,8 +604,18 @@ const KeypadSimplesIP = (function () {
stateCurrent.setStateCall("home");
}
let keypadVisible = false;
function handleKeypad() {
UASimplesIP.simplesipEvento.emit("");
if (keypadVisible) {
document.getElementById("keyPadIncall").style.visibility = "hidden";
keypadVisible = false;
document.removeEventListener("keydown", handleKeyPress);
} else {
document.getElementById("keyPadIncall").style.visibility = "visible";
keypadVisible = true;
document.addEventListener("keydown", handleKeyPress);
}
}
function handleTransfer() {
@ -634,6 +684,9 @@ const KeypadSimplesIP = (function () {
if (display.innerText.length <= maxLength) {
display.append(buttonValue);
if (stateCurrent.getStateCall() === "incall") {
UASimplesIP.simplesipEvento.emit("sendDTMF", buttonValue);
}
}
//chama funcao para verificar se tem texto e exibir botao clear
haveTextAndClearDisplay(display);
@ -987,12 +1040,15 @@ const KeypadSimplesIP = (function () {
const keyPress = event.key;
if (/[0-9 * #]/.test(keyPress)) {
if (display.innerText.length <= maxLength) {
if (stateCurrent.getStateCall() === "incall") {
UASimplesIP.simplesipEvento.emit("sendDTMF", keyPress);
}
display.append(keyPress);
}
//chama funcao para verificar se tem texto e exibir botao clear
} else if (keyPress === "Backspace") {
clearDisplay();
} else if (keyPress === "Enter") {
} else if (keyPress === "Enter" && stateCurrent.getStateCall() === "home") {
handleCall();
}
haveTextAndClearDisplay(display);
@ -1008,6 +1064,9 @@ const KeypadSimplesIP = (function () {
configuration.SENHA = localStorage.getItem("senha") || "";
};
const userImg =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAABKklEQVR4nO2UMU7DQBBFLQpSQgmihivASRCHIFzBHTQIxDV8gLX+W8N2ECpHHAAaBFQgFBTKoCUOogjyGjYJoHzpN/ZKb//M7CTJXL9RxpiWpD2gA7xU7lhr2/7fRKBFUawBXWDwhUt/JirUGNOqgX7AoybXsLyDQO9GAwOXoWBJF9HAknoNwL1oYMLL/O6ZJAae/36PrbXtmUy1Gb7jMuQdZ1m2mExgc5VT3Vwj+TS+lL6PfuAqn/tv0ZPONVWlaboAbEk6AM4k3Ut69QbugFNgX9KmP/tjYJ7nq8CRpIcGC8Rf6tA5t9IY6JxbBk4k9Zvu6U8X6Es6ttYuBUGttRvAzXeBY3wNrNeCJV1FhI7crQVXwxIVLOk2JPGOpKeI4EdgO6jPc/0rvQHiiVTDrTdPvAAAAABJRU5ErkJggg==";
const transferImg =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAABEElEQVR4nO3WPYrCQBjG8T/CVvb2VnsAC0EvYL1WewPFM4i1HkCUxYOslR+FYMQP7LyAaKWVH81KIMVgnPD6TiRb+MA0IT8eZnhJBt5JOCmgBqyAM7ADusDHq30P+HuwcsJilS9b0AVIC0rVfmGBQ+FuVT5rQf6qC0rVvhoBi4JitW9b0F440WrfvwMjoAF8Ckqd/MZATWFZLH5rwO+I9/ydzICM0odyNGAJe6bBO+u7cqkP5WrAvPF8HDGtnsD/3+KD8Kg8y1FLfSjS4ZjEPVwbA7aega7+1/EDovbtpD6ZlYjpLQiK1T6b1G/Rz9wCB8ii9l+OVx8n/+N42VP7VDAoS+AUXE87T15vXfw7xJYbEKIIsmQ9hbAAAAAASUVORK5CYII=";

78
keypad_style.css
Unescape View File

@ -20,22 +20,27 @@
.simplesipContainer {
display: flex;
flex-direction: column;
width: 280px;
max-height: 510px; /* verificar se esse valor será o melhor */
width: 300px;
max-height: 525px;
border: 1px solid #bdbbbb;
border-radius: 8px;
box-sizing: content-box;
justify-content: center;
position: absolute;
bottom: -1px;
right: 10px;
}
.simplesipKeypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
gap: 10px 4px;
height: max-content;
padding: 6px;
justify-items: center;
transition: height 0.5s ease-in-out;
pointer-events: auto;
margin: 0 0 2px 0;
}
.simplesipHead {
@ -101,8 +106,9 @@
height: max-content;
padding: 10px;
justify-items: center;
transition: height 0.5s ease-in-out; /* Adicione uma transição suave para a opacidade */
pointer-events: auto; /* Mantém os eventos de mouse ativos quando visível */
transition: height 0.5s ease-in-out;
pointer-events: auto;
margin-bottom: 5px;
}
.simplesipIncomingCall {
@ -116,12 +122,26 @@
pointer-events: auto; /* Mantém os eventos de mouse ativos quando visível */
}
.simplesipIncomingCall .endCall,
.simplesipOutgoingCall .endCall {
width: 70px;
height: 70px;
}
.displayContainer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex: 1;
width: 85%;
margin-inline-start: 30px;
width: 78%;
margin-bottom: 8px;
padding-inline-start: 30px;
}
.incallDisplay {
width: 83%;
padding-inline-start: 40px;
}
.circle {
@ -174,10 +194,9 @@
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
height: calc(510px - 40px - 35px - 86px);
justify-items: center;
align-items: end;
margin: 0 6px 20px 6px;
margin: 0 6px 15px 6px;
}
.telephone {
@ -192,6 +211,29 @@
line-height: 6px;
}
.keyPadIncall {
display: grid;
gap: 6px 0px;
margin: 10px 8px 10px 8px;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: start;
visibility: hidden;
}
.keyPadIncall .simplesip-bn {
width: 68px;
height: 68px;
}
.displayOtherNumber {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 31px;
}
.telephone:hover {
background-color: rgba(45, 208, 45, 0.866);
}
@ -235,8 +277,8 @@
display: flex;
justify-content: center;
align-items: center;
margin: 20px 10px 10px;
height: calc(510.17px - 33.99px - 90.4px - 31.81px);
margin: 20px 10px 23px;
height: calc(510px - 32px - 91px - 31px);
text-align: center;
font-size: 24px;
}
@ -341,7 +383,7 @@
justify-content: center;
align-items: center;
width: 100%;
height: 35px;
height: 25px;
}
.simplesip-bn:hover {
@ -373,14 +415,6 @@
border-color: #666; /* Cor das linhas ao passar o mouse */
}
.simplesipContainer {
display: flex;
justify-content: center;
position: absolute;
bottom: -1px;
right: 10px;
}
.display {
min-height: 40px;
font-size: 30px;
@ -425,11 +459,11 @@
#btnSave {
cursor: pointer;
background-color: #25a22b;
background-color: #5dd85d;
}
#btnSave:hover {
background-color: #1db225;
background-color: #3db33d;
}
.divUnregister {

55
simplesipsdk.js
Unescape View File

@ -4,7 +4,7 @@
//
const UASimplesIP = (function () {
function carregandoScriptSimpleSIP(url, callback) {
var script = document.createElement("script");
let script = document.createElement("script");
script.src = url;
script.async = true; // Asynchronous loading
script.onload = function () {
@ -66,10 +66,6 @@ const UASimplesIP = (function () {
const eventoSip = new EventEmitter();
//const PROTOCOLO = "ws|wss"
function passa(nome) {
console.log(SimpleSIP.settings);
}
function Autenticacao(PROTOCOLO, SERVIDOR, PORTA, NOME, RAMAL, SENHA) {
this.PROTOCOLO = PROTOCOLO;
this.SERVIDOR = SERVIDOR;
@ -80,19 +76,23 @@ const UASimplesIP = (function () {
}
const _Autenticacao = new Autenticacao();
var localAudio = new window.Audio();
let localAudio = new window.Audio();
localAudio.autoplay = true;
const incomingCallAudio = new window.Audio(
"https://cdn.pixabay.com/download/audio/2021/08/04/audio_bb630cc098.mp3?filename=short-success-sound-glockenspiel-treasure-video-game-6346.mp3"
);
const outgoingCallAudio = new window.Audio(
"https://cdn.pixabay.com/download/audio/2022/03/14/audio_461a4fb0c4.mp3?filename=phonesound-65797.mp3"
);
incomingCallAudio.loop = true;
var remoteAudio = new window.Audio();
outgoingCallAudio.loop = true;
let remoteAudio = new window.Audio();
remoteAudio.autoplay = true;
var phone;
var session;
var isIncomingCall = false; // Flag para controlar o estado de chamada recebida
let phone;
let session;
function iniciandoAutenticacaonoPBX() {
const configuration = {
@ -138,27 +138,31 @@ const UASimplesIP = (function () {
session = newSession;
eventoSip.on("endCall", () => {
if (session && session.isEstablished()) {
if (session?.isEstablished()) {
eventoSip.emit("confirmedEnded");
console.log();
session.terminate();
}
});
// setInterval(() => {
// eventoSip.emit("evento", session.connection.iceConnectionState);
// }, 2000);
eventoSip.on("evento", (payload) => {
console.log(payload);
});
eventoSip.on("mute", function () {
eventoSip.on("mute", () => {
session.mute();
});
eventoSip.on("unmute", function () {
eventoSip.on("unmute", () => {
session.unmute();
});
eventoSip.on("sendDTMF", (data) => {
if (session?.isEstablished) {
session.sendDTMF(data);
console.log("foi ativado o DTMF para: " + data);
}
});
session.on("candidate", (event) => {
console.log(event);
});
@ -167,11 +171,17 @@ const UASimplesIP = (function () {
console.log("EVENTO ESTADO DA CONEXAO: ", event);
});
session.on("failed", () => {});
session.on("ended", () => {
eventoSip.emit("confirmedEnded");
});
//QUANDO UMA CHAMADA É REJEITADA
session.on("failed", () => {
incomingCallAudio.pause();
outgoingCallAudio.pause();
eventoSip.emit("home");
});
session.on("confirmed", function (confirmed) {
// Verifica se session.connection está definido
if (
@ -190,6 +200,9 @@ const UASimplesIP = (function () {
const localStreams = session.connection.getLocalStreams()[0];
localAudio.srcObject = localStreams;
}
//PAUSA TODOS OS AUDIOS DE FEEDBACK
incomingCallAudio.pause();
outgoingCallAudio.pause();
eventoSip.emit("incall");
});
@ -214,11 +227,10 @@ const UASimplesIP = (function () {
//RECEBENDO UMA CHAMADA
if (session.direction === "incoming") {
incomingCallAudio.play();
isIncomingCall = true;
eventoSip.emit("incomingcall", session.remote_identity.uri.user);
eventoSip.on("rejected", () => {
if (session && session.isInProgress()) {
if (session?.isInProgress()) {
incomingCallAudio.pause();
eventoSip.emit("home");
session.terminate();
@ -229,7 +241,7 @@ const UASimplesIP = (function () {
});
eventoSip.on("accepted", () => {
if (session && session.isInProgress()) {
if (session?.isInProgress()) {
session.answer();
incomingCallAudio.pause();
}
@ -238,6 +250,9 @@ const UASimplesIP = (function () {
//REALIZANDO UMA CHAMADA
if (session.direction === "outgoing") {
eventoSip.emit("outgoingcall", session.remote_identity.uri.user);
if (session.isInProgress()) {
outgoingCallAudio.play();
}
}
});
phone.on("registered", function (e) {

Write Preview
Loading…
Cancel
Save