|
5 | 5 | const inputVolumeBar = document.getElementById("input-volume");
|
6 | 6 | const volumeIndicators = document.getElementById("volume-indicators");
|
7 | 7 | const callButton = document.getElementById("button-call");
|
8 |
| - const hangupButton = document.getElementById("button-hangup"); |
| 8 | + const outgoingCallHangupButton = document.getElementById("button-hangup-outgoing"); |
9 | 9 | const callControlsDiv = document.getElementById("call-controls");
|
10 | 10 | const audioSelectionDiv = document.getElementById("output-selection");
|
11 | 11 | const getAudioDevicesButton = document.getElementById("get-devices");
|
|
36 | 36 | getAudioDevicesButton.onclick = getAudioDevices;
|
37 | 37 | speakerDevices.addEventListener("change", updateOutputDevice);
|
38 | 38 | ringtoneDevices.addEventListener("change", updateRingtoneDevice);
|
39 |
| - hangupButton.onclick = hangup; |
| 39 | + |
40 | 40 |
|
41 | 41 | // SETUP STEP 1:
|
42 | 42 | // Browser client should be started after a user gesture
|
|
105 | 105 | async function makeOutgoingCall() {
|
106 | 106 | var params = {
|
107 | 107 | // get the phone number to call from the DOM
|
108 |
| - phone: phoneNumberInput.value, |
| 108 | + To: phoneNumberInput.value, |
109 | 109 | };
|
110 | 110 |
|
111 | 111 | if (device) {
|
112 |
| - log(`Attempting to call ${params.phone} ...`); |
| 112 | + log(`Attempting to call ${params.To} ...`); |
113 | 113 |
|
114 | 114 | // Twilio.Device.connect() returns a Call object
|
115 | 115 | const call = await device.connect({ params });
|
116 | 116 |
|
117 | 117 | // add listeners to the Call
|
118 | 118 | // "accepted" means the call has finished connecting and the state is now "open"
|
119 |
| - call.addListener("accept", updateUIAcceptedCall); |
120 |
| - call.addListener("disconnect", updateUIDisconnectedCall); |
| 119 | + call.on("accept", updateUIAcceptedOutgoingCall); |
| 120 | + call.on("disconnect", updateUIDisconnectedOutgoingCall); |
| 121 | + call.on("cancel", updateUIDisconnectedOutgoingCall); |
| 122 | + call.on("reject", updateUIDisconnectedOutgoingCall); |
| 123 | + |
| 124 | + outgoingCallHangupButton.onclick = () => { |
| 125 | + log("Hanging up ..."); |
| 126 | + call.disconnect(); |
| 127 | + }; |
| 128 | + |
121 | 129 | } else {
|
122 | 130 | log("Unable to make call.");
|
123 | 131 | }
|
124 | 132 | }
|
125 | 133 |
|
126 |
| - function updateUIAcceptedCall(call) { |
| 134 | + function updateUIAcceptedOutgoingCall(call) { |
127 | 135 | log("Call in progress ...");
|
128 | 136 | callButton.disabled = true;
|
129 |
| - hangupButton.classList.remove("hide"); |
| 137 | + outgoingCallHangupButton.classList.remove("hide"); |
130 | 138 | volumeIndicators.classList.remove("hide");
|
131 | 139 | bindVolumeIndicators(call);
|
132 | 140 | }
|
133 | 141 |
|
134 |
| - function updateUIDisconnectedCall() { |
| 142 | + function updateUIDisconnectedOutgoingCall() { |
135 | 143 | log("Call disconnected.");
|
136 | 144 | callButton.disabled = false;
|
137 |
| - hangupButton.classList.add("hide"); |
| 145 | + outgoingCallHangupButton.classList.add("hide"); |
138 | 146 | volumeIndicators.classList.add("hide");
|
139 | 147 | }
|
140 | 148 |
|
141 |
| - // HANG UP A CALL |
142 |
| - |
143 |
| - function hangup() { |
144 |
| - log("Hanging up ..."); |
145 |
| - if (device) { |
146 |
| - device.disconnectAll(); |
147 |
| - } |
148 |
| - } |
149 |
| - |
150 | 149 | // HANDLE INCOMING CALL
|
151 | 150 |
|
152 | 151 | function handleIncomingCall(call) {
|
|
170 | 169 | };
|
171 | 170 |
|
172 | 171 | // add event listener to call object
|
173 |
| - call.addListener("cancel", handleDisconnectedIncomingCall); |
| 172 | + call.on("cancel", handleDisconnectedIncomingCall); |
| 173 | + call.on("disconnect", handleDisconnectedIncomingCall); |
| 174 | + call.on("reject", handleDisconnectedIncomingCall); |
174 | 175 | }
|
175 | 176 |
|
176 | 177 | // ACCEPT INCOMING CALL
|
|
189 | 190 |
|
190 | 191 | function rejectIncomingCall(call) {
|
191 | 192 | call.reject();
|
192 |
| - |
193 | 193 | log("Rejected incoming call");
|
194 | 194 | resetIncomingCallUI();
|
195 | 195 | }
|
196 | 196 |
|
197 | 197 | // HANG UP INCOMING CALL
|
198 | 198 |
|
199 |
| - function hangupIncomingCall() { |
200 |
| - hangup(); |
201 |
| - |
| 199 | + function hangupIncomingCall(call) { |
| 200 | + call.disconnect(); |
| 201 | + log("Hanging up incoming call"); |
202 | 202 | resetIncomingCallUI();
|
203 | 203 | }
|
204 | 204 |
|
205 | 205 | // HANDLE CANCELLED INCOMING CALL
|
206 | 206 |
|
207 |
| - function handleDisconnectedIncomingCall(call) { |
208 |
| - device.disconnectAll(); |
209 |
| - console.log("handledisconnected : ", call); |
| 207 | + function handleDisconnectedIncomingCall() { |
210 | 208 | log("Incoming call ended.");
|
211 | 209 | resetIncomingCallUI();
|
212 | 210 | }
|
|
226 | 224 |
|
227 | 225 | function resetIncomingCallUI() {
|
228 | 226 | incomingPhoneNumberEl.innerHTML = "";
|
| 227 | + incomingCallAcceptButton.classList.remove("hide"); |
| 228 | + incomingCallRejectButton.classList.remove("hide"); |
| 229 | + incomingCallHangupButton.classList.add("hide"); |
229 | 230 | incomingCallDiv.classList.add("hide");
|
230 | 231 | }
|
231 | 232 |
|
|
0 commit comments