Last active
November 1, 2022 13:25
-
-
Save SalesforceBobLightning/8e512e032179b0f7d8241201107bfe85 to your computer and use it in GitHub Desktop.
Twilio Flex Plug: Ringer + Call Recording
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { FlexPlugin } from 'flex-plugin'; | |
//import React from 'react'; | |
//import CustomTaskListComponent from './CustomTaskListComponent'; | |
const PLUGIN_NAME = 'RingerPlugin'; | |
export default class RingerPlugin extends FlexPlugin { | |
constructor() { | |
super(PLUGIN_NAME); | |
} | |
/** | |
* This code is run when your plugin is being started | |
* Use this to modify any UI components or attach to the actions framework | |
* | |
* @param flex { typeof import('@twilio/flex-ui') } | |
* @param manager { import('@twilio/flex-ui').Manager } | |
*/ | |
init(flex, manager) { | |
// play rining sounds when call incoming | |
var incoming_audio1 = new Audio('//media.twiliocdn.com/sdk/js/client/sounds/releases/1.0.0/incoming.mp3'); | |
var incoming_audio2 = new Audio('//media.twiliocdn.com/sdk/js/client/sounds/releases/1.0.0/incoming.mp3'); | |
incoming_audio1.loop = true; | |
incoming_audio2.loop = true; | |
navigator.mediaDevices.enumerateDevices().then(function (devices) { | |
const sinkIdPromises = [] | |
devices.forEach(function (device) { | |
if (device.kind == "audiooutput" && device.deviceId == "default") { | |
sinkIdPromises.push(incoming_audio1.setSinkId(device.deviceId)); | |
console.log("Setting audio 1 on " + device.deviceId); | |
} | |
if (device.kind == "audiooutput" && device.deviceId == "communications") { | |
sinkIdPromises.push(incoming_audio2.setSinkId(device.deviceId)); | |
console.log("Setting audio 2 on" + device.deviceId); | |
} | |
console.log(device.kind + ": " + device.label + " id = " + device.deviceId); | |
}); | |
return Promise.all(sinkIdPromises) | |
}) | |
.catch(function (err) { | |
console.log(err.name + ": " + err.message); | |
}); | |
manager.workerClient.on("reservationCreated", function (reservation) { | |
console.log(reservation.task.sid, "<====== TASK SID ==========================="); | |
console.log(reservation.task.taskChannelSid, "<====== TASK CHANNEL SID ==========================="); | |
console.log(reservation.task.attributes, "<====== TASK ATTRIBUTES ==========================="); | |
incoming_audio1.play(); | |
incoming_audio2.play(); | |
['accepted', 'rejected', 'timeout', 'canceled', 'rescinded'].forEach((event) => { | |
reservation.on(event, () => { | |
incoming_audio1.pause(); | |
incoming_audio2.pause(); | |
incoming_audio1.currentTime = 0; | |
incoming_audio2.currentTime = 0; | |
}) | |
}) | |
}); | |
// turn on call recording when the call starts | |
manager.workerClient.on("reservationCreated", reservation => { | |
if (reservation.task.taskChannelUniqueName === 'voice') { | |
flex.Actions.replaceAction("AcceptTask", (payload, original) => { | |
payload.conferenceOptions.record = 'true'; | |
return original(payload); | |
}); | |
} | |
}); | |
// use custom hosting music | |
// flex.Actions.replaceAction("HoldCall", (payload, original) => { | |
// payload.options.holdCallMusicUrl = "https://flavescent-ape-4160.twil.io/assets/oh_000_clinical_partners_main.mp3"; | |
// return original(payload); | |
// }); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { FlexPlugin } from 'flex-plugin'; | |
const PLUGIN_NAME = 'RingerPlugin'; | |
export default class RingerPlugin extends FlexPlugin { | |
constructor() { | |
super(PLUGIN_NAME); | |
} | |
init(flex, manager) { | |
// play rining sounds when call incoming | |
let incoming_audio = new Audio('//media.twiliocdn.com/sdk/js/client/sounds/releases/1.0.0/incoming.mp3'); | |
incoming_audio.loop = true; | |
manager.workerClient.on("reservationCreated", function (reservation) { | |
console.log(reservation.task.sid, "<====== TASK SID ==========================="); | |
console.log(reservation.task.taskChannelSid, "<====== TASK CHANNEL SID ==========================="); | |
console.log(reservation.task.attributes, "<====== TASK ATTRIBUTES ==========================="); | |
incoming_audio.play(); | |
['accepted', 'rejected', 'timeout', 'canceled', 'rescinded'].forEach((event) => { | |
reservation.on(event, () => { | |
incoming_audio.pause(); | |
incoming_audio.currentTime = 0; | |
}) | |
}) | |
}); | |
// turn on call recording when the call starts | |
manager.workerClient.on("reservationCreated", reservation => { | |
if (reservation.task.taskChannelUniqueName === 'voice') { | |
flex.Actions.replaceAction("AcceptTask", (payload, original) => { | |
payload.conferenceOptions.record = true; | |
return original(payload); | |
}); | |
} | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
any idea how to modify the code with a check that if the worker is currently on a voice call, it will not play any sounds for incoming tasks until they end the call?