<![CDATA[import React, { useState, useEffect, useRef, useCallback } from 'react';
import { UserAgent, Registerer, Inviter, SessionState } from 'sip.js';
import dtmf_0 from '../../assets/dtmf_0.mp3';
import dtmf_1 from '../../assets/dtmf_1.mp3';
import dtmf_2 from '../../assets/dtmf_2.mp3';
import dtmf_3 from '../../assets/dtmf_3.mp3';
import dtmf_4 from '../../assets/dtmf_4.mp3';
import dtmf_5 from '../../assets/dtmf_5.mp3';
import dtmf_6 from '../../assets/dtmf_6.mp3';
import dtmf_7 from '../../assets/dtmf_7.mp3';
import dtmf_8 from '../../assets/dtmf_8.mp3';
import dtmf_9 from '../../assets/dtmf_9.mp3';
import sound from '../../assets/dtmf_0.mp3';
import sound_loud from '../../assets/dtmf_0.mp3';
import calling from '../../assets/calling.mp3';
import './AsteriskWebphone.css';
const AsteriskWebphone = ({ isOpen, onClose }) => {
const [phoneNumber, setPhoneNumber] = useState('');
const [isConnected, setIsConnected] = useState(false);
const [isCalling, setIsCalling] = useState(false);
const [isCallingInProgress, setIsCallingInProgress] = useState(false);
const [callStatus, setCallStatus] = useState('');
const [callDuration, setCallDuration] = useState(null);
const [startTime, setStartTime] = useState(null);
const userAgentRef = useRef(null);
const registererRef = useRef(null);
const sessionRef = useRef(null);
const remoteAudioRef = useRef(null);
const ringToneRef = useRef(null);
const callingToneRef = useRef(null);
const dtmfRefs = useRef({});
const timerRef = useRef(null);
const keypadRows = [
['1', '2', '3'],
['4', '5', '6'],
['7', '8', '9']
];
const dtmfSounds = {
'1': dtmf_1,
'2': dtmf_2,
'3': dtmf_3,
'4': dtmf_4,
'5': dtmf_5,
'6': dtmf_6,
'7': dtmf_7,
'8': dtmf_8,
'9': dtmf_9,
'0': dtmf_0,
'*': sound,
'#': sound_loud
};
const playRingTone = useCallback(() => {
if (ringToneRef.current) {
try {
ringToneRef.current.currentTime = 0;
ringToneRef.current.volume = 1.0;
ringToneRef.current.loop = true;
ringToneRef.current.play().catch(error => {
console.error('Erro ao tocar som de toque:', error);
});
} catch (error) {
console.error('Erro ao tocar som de toque:', error);
}
}
}, []);
const stopRingTone = useCallback(() => {
if (ringToneRef.current) {
try {
ringToneRef.current.pause();
ringToneRef.current.currentTime = 0;
} catch (error) {
console.error('Erro ao parar som de toque:', error);
}
}
}, []);
const stopCallTimer = useCallback(() => {
if (timerRef.current) {
clearInterval(timerRef.current);
timerRef.current = null;
}
}, []);
const startCallTimer = useCallback(() => {
const start = Date.now();
setStartTime(start);
timerRef.current = setInterval(() => {
const duration = Math.floor((Date.now() - start) / 1000);
const minutes = Math.floor(duration / 60);
const seconds = duration % 60;
setCallDuration(`${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`);
}, 1000);
}, []);
const setupSession = useCallback((session) => {
session.stateChange.addListener((state) => {
if (state === SessionState.Established) {
const pc = session.sessionDescriptionHandler.peerConnection;
pc.getReceivers().forEach(receiver => {
if (receiver.track && receiver.track.kind === "audio") {
const stream = new MediaStream([receiver.track]);
remoteAudioRef.current.srcObject = stream;
remoteAudioRef.current.play();
}
});
setCallStatus('Em chamada');
setIsCallingInProgress(false);
stopRingTone();
startCallTimer();
}
if (state === SessionState.Terminated) {
setIsCalling(false);
setCallStatus('Chamada finalizada');
setIsCallingInProgress(false);
stopRingTone();
stopCallTimer();
setCallDuration(null);
setStartTime(null);
if (remoteAudioRef.current) {
remoteAudioRef.current.srcObject = null;
}
}
});
}, [stopRingTone, startCallTimer, stopCallTimer]);
const startSip = useCallback(async () => {
const config = {
username: '1000',
password: 'senha',
server: 'astersip.astertelecom.com.br',
port: '8089',
transport: 'wss'
};
userAgentRef.current = new UserAgent({
uri: UserAgent.makeURI(`sip:${config.username}@${config.server}`),
transportOptions: {
server: `wss://${config.server}:${config.port}/ws`
},
authorizationUsername: config.username,
authorizationPassword: config.password,
logLevel: "error"
});
userAgentRef.current.delegate = {
onInvite: (invitation) => {
sessionRef.current = invitation;
setupSession(invitation);
setIsCalling(true);
setCallStatus('Chamada recebida');
setPhoneNumber(invitation.remoteIdentity.uri.user);
playRingTone();
}
};
await userAgentRef.current.start();
registererRef.current = new Registerer(userAgentRef.current);
await registererRef.current.register();
setIsConnected(true);
}, [playRingTone, setupSession]);
const makeCall = async () => {
if (!phoneNumber || isCallingInProgress) return;
try {
setIsCallingInProgress(true);
const config = {
username: '1000',
server: 'astersip.astertelecom.com.br'
};
const target = UserAgent.makeURI(`sip:${phoneNumber}@${config.server}`);
const inviter = new Inviter(userAgentRef.current, target, {
sessionDescriptionHandlerOptions: { constraints: { audio: true, video: false } }
});
sessionRef.current = inviter;
setupSession(inviter);
await inviter.invite();
setIsCalling(true);
setCallStatus('Chamando...');
} catch (error) {
console.error('Erro ao iniciar chamada:', error);
} finally {
setIsCallingInProgress(false);
}
};
const acceptCall = async () => {
if (!sessionRef.current) return;
try {
setIsCallingInProgress(true);
await sessionRef.current.accept();
setCallStatus('Conectado');
} catch (error) {
console.error('Erro ao aceitar chamada:', error);
} finally {
setIsCallingInProgress(false);
}
};
const hangupCall = async () => {
if (!sessionRef.current) return;
try {
if (sessionRef.current.state === SessionState.Established) {
await sessionRef.current.bye();
} else if (sessionRef.current.state === SessionState.Initial) {
await sessionRef.current.reject();
} else if (sessionRef.current.state === SessionState.Establishing) {
if (sessionRef.current instanceof Inviter) {
await sessionRef.current.cancel();
} else {
await sessionRef.current.bye();
}
} else {
await sessionRef.current.bye();
}
} catch (error) {
console.error('Erro ao encerrar chamada:', error);
} finally {
setIsCalling(false);
setCallStatus('Chamada finalizada');
setIsCallingInProgress(false);
stopRingTone();
if (remoteAudioRef.current) {
remoteAudioRef.current.srcObject = null;
}
sessionRef.current = null;
}
};
const playDialTone = (number) => {
let audioRef;
if (number === '*') {
audioRef = 'dtmf_star';
} else if (number === '#') {
audioRef = 'dtmf_hash';
} else {
audioRef = `dtmf_${number}`;
}
if (dtmfRefs.current[audioRef]) {
try {
dtmfRefs.current[audioRef].currentTime = 0;
dtmfRefs.current[audioRef].volume = 1.0;
dtmfRefs.current[audioRef].play().catch(error => {
console.error(`Erro ao tocar som DTMF ${number}:`, error);
});
} catch (error) {
console.error(`Erro ao tocar som DTMF ${number}:`, error);
}
}
};
const appendNumber = (number) => {
setPhoneNumber(prev => prev + number);
playDialTone(number);
};
useEffect(() => {
if (isOpen) {
startSip();
}
return () => {
if (userAgentRef.current) {
try {
userAgentRef.current.stop();
} catch (error) {
console.error('Erro ao parar UserAgent:', error);
}
}
stopRingTone();
stopCallTimer();
if (sessionRef.current) {
try {
if (sessionRef.current.terminate) {
sessionRef.current.terminate();
}
sessionRef.current = null;
} catch (error) {
console.error('Erro ao terminar sessão:', error);
}
}
if (registererRef.current) {
try {
registererRef.current.stateChange.removeAllListeners();
registererRef.current = null;
} catch (error) {
console.error('Erro ao limpar registrador:', error);
}
}
setIsConnected(false);
setIsCalling(false);
setCallStatus('');
};
}, [isOpen, startSip, stopRingTone, stopCallTimer]);
if (!isOpen) return null;
return (
<div className="asterisk-webphone-modal">
<div className="asterisk-webphone">
<button className="close-webphone-btn" onClick={onClose} title="Fechar">×</button>
{isConnected ? (
<div className="webphone-container">
<div className="status-indicator">
<span className="text-positive">Conectado</span>
</div>
<div className="phone-input">
<input
value={phoneNumber}
onChange={(e) => setPhoneNumber(e.target.value)}
type="text"
placeholder="Digite o número"
className="number-input"
disabled={isCalling && callStatus === 'Chamada recebida'}
/>
</div>
<div className="keypad">
{keypadRows.map((row, rowIndex) => (
<div className="keypad-row" key={rowIndex}>
{row.map((number) => (
<button
key={number}
className="keypad-button"
onClick={() => appendNumber(number)}
>
{number}
</button>
))}
</div>
))}
<div className="keypad-row">
<button className="keypad-button" onClick={() => appendNumber('*')}>*</button>
<button className="keypad-button" onClick={() => appendNumber('0')}>0</button>
<button className="keypad-button" onClick={() => appendNumber('#')}>#</button>
</div>
</div>
<div className="call-controls">
{isCalling && callStatus === 'Chamada recebida' ? (
<>
<button
className={`call-button ${isCallingInProgress ? 'disabled' : ''}`}
onClick={acceptCall}
disabled={isCallingInProgress}
>
Atender
</button>
<button
className={`hangup-button ${isCallingInProgress ? 'disabled' : ''}`}
onClick={hangupCall}
disabled={isCallingInProgress}
>
Recusar
</button>
</>
) : (
<>
<button
className={`call-button ${!isConnected || isCalling || !phoneNumber || isCallingInProgress ? 'disabled' : ''}`}
onClick={makeCall}
disabled={!isConnected || isCalling || !phoneNumber || isCallingInProgress}
>
Ligar
</button>
<button
className={`hangup-button ${!isCalling ? 'disabled' : ''}`}
onClick={hangupCall}
disabled={!isCalling}
>
Desligar
</button>
</>
)}
</div>
{isCalling && (
<div className="call-info">
<div className="call-status">{callStatus}</div>
{callDuration && <div className="call-duration">{callDuration}</div>}
</div>
)}
<audio ref={remoteAudioRef} autoPlay />
<audio ref={ringToneRef} src={calling} preload="auto" />
<audio ref={callingToneRef} src={calling} preload="auto" />
{Object.entries(dtmfSounds).map(([key, src]) => (
<audio
key={key}
ref={(el) => (dtmfRefs.current[`dtmf_${key}`] = el)}
src={src}
preload="auto"
/>
))}
</div>
) : (
<div className="disconnected-message">
<span>Desconectado</span>
</div>
)}
</div>
</div>
);
};
export default AsteriskWebphone; ]]>
WHATICKET
Asterisk