Webrtc
WebRTC Methods
Explore the methods available in InnoRTC for WebRTC integration
Methods
We provide several methods to help you customize the functionality and appearance of InnoRTC:
showWebrtc()
Use the showWebrtc method to display the InnoRTC Dialpad.
hideWebrtc()
Use the hideWebrtc method to hide the InnoRTC Dialpad.
toggleWebrtc()
Use the toggleWebrtc method to toggle the visibility of the InnoRTC Dialpad.
startCall(number)
Use the startCall method to initiate a call to a specific number. You need to pass the phone number as an argument to the method.
hangup()
Use the hangup method to terminate an ongoing call. This will immediately disconnect the call and release any associated resources.
fillNumber(number)
Use the fillNumber method to enter a phone number into the Dialpad for automated pre-filling.
Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>InnoRTC Example - v1</title>
<script
type="module"
src="https://innocalls-statics.s3.ap-south-1.amazonaws.com/webrtc/webrtc.js"
></script>
<link
rel="stylesheet"
href="https://innocalls-statics.s3.ap-south-1.amazonaws.com/webrtc/style.css"
/>
<script src="https://cdn.tailwindcss.com"></script>
<style>
#root .toggle-btn {
display: none;
}
#root .innocalls-webrtc {
position: absolute !important;
bottom: 2.5rem !important;
inset-inline-end: 0 !important;
inset-inline-start: unset !important;
}
</style>
<script type="module">
// Initialize InnocallsRTC with configuration options
const innocallsRTC = new InnocallsRTC({
apiKey: "YOUR_API_KEY", // Your API key generated from Innocalls dashboard
extension: "YOUR_EXTENSION_NUMBER", // Your extension number for login
webrtcSecret: "EXTENSION_WEB_RTC_SECRET", // WebRTC secret of your extension
config: {
baseColor: "#09f",
},
});
// Event listeners for various call events (v1)
innocallsRTC.on("callRinging", () => {
console.log("callRinging");
});
innocallsRTC.on("callStarted", (callId) => {
console.log("callStarted", callId);
});
innocallsRTC.on("callMissed", () => {
console.log("callMissed");
});
innocallsRTC.on("callRejected", () => {
console.log("callRejected");
});
innocallsRTC.on("callEnded", () => {
console.log("callEnded");
});
innocallsRTC.on("held", () => {
console.log("held");
});
innocallsRTC.on("muted", () => {
console.log("muted");
});
innocallsRTC.on("released", () => {
console.log("released");
});
innocallsRTC.on("unmuted", () => {
console.log("unmuted");
});
// Function to toggle WebRTC interface
const toggleWebrtc = () => {
innocallsRTC.toggleWebrtc();
};
// Function to start a call
const callNumber = () => {
const number = document.querySelector("#number")?.value;
innocallsRTC.startCall(number);
innocallsRTC.showWebrtc();
};
// Function to handle keypress events
const onKeyPress = (e) => {
if (e.key !== "Enter") return;
const number = document.querySelector("#number")?.value;
innocallsRTC.showWebrtc();
innocallsRTC.startCall(number);
};
const handleNumberButtonClick = (e) => {
const number = e.target.getAttribute("data-number");
if (number) {
innocallsRTC.fillNumber(number);
}
};
// Mount InnocallsRTC interface
innocallsRTC.mount("#root");
// Set up event listeners for buttons/inputs
const rtcInterfaceBtn = document.querySelector("#rtc-interface-btn");
rtcInterfaceBtn.addEventListener("click", toggleWebrtc);
const callBtn = document.querySelector("#call-btn");
callBtn.addEventListener("click", callNumber);
const keyPressInput = document.querySelector("#number");
keyPressInput.addEventListener("keypress", onKeyPress);
const numberButton = document.querySelector("#number-btn");
numberButton.addEventListener("click", handleNumberButtonClick);
</script>
</head>
<body>
<div class="flex">
<div class="bg-blue-200 w-[300px] h-screen sidebar"></div>
<div class="flex-1 p-2 page">
<div class="flex flex-col gap-2 w-full h-full">
<div class="flex-1 bg-white shadow body">
<h1 class="font-bold text-2xl mb-4">InnoRTC Example - v1</h1>
<ul>
<li class="mb-2">
Get your config secret data from
<a
href="https://platform.innocalls.com"
class="text-blue-600 underline"
>innocalls.com</a
>.
</li>
<li>Then replace the config secrets.</li>
</ul>
</div>
<div class="chat-box">
<textarea
name=""
id="number"
class="border border-gray-300 rounded-md p-2 w-full h-20"
></textarea>
<div class="flex gap-2 actions">
<button
id="number-btn"
class="bg-blue-500 text-white p-2 rounded-md number-btn"
data-number="+966920031131"
>
+966920031131
</button>
<button class="bg-blue-500 text-white p-2 rounded-md">a2</button>
<button class="bg-blue-500 text-white p-2 rounded-md" id="a3">
a3
</button>
<button class="bg-blue-500 text-white p-2 rounded-md">a4</button>
<button class="bg-blue-500 text-white p-2 rounded-md">a5</button>
<button
class="bg-green-500 text-white p-2 rounded-md"
id="call-btn"
>
call
</button>
<div class="relative rtc">
<button
class="bg-yellow-500 text-white p-2 rounded-md"
id="rtc-interface-btn"
>
rtc
</button>
<div id="root"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>InnoRTC Example - v2</title>
<script
type="module"
src="https://innocalls-statics.s3.ap-south-1.amazonaws.com/webrtc/v2/webrtc.js"
></script>
<link
rel="stylesheet"
href="https://innocalls-statics.s3.ap-south-1.amazonaws.com/webrtc/v2/style.css"
/>
<script src="https://cdn.tailwindcss.com"></script>
<style>
#root .toggle-btn {
display: none;
}
#root .innocalls-webrtc {
position: absolute !important;
bottom: 2.5rem !important;
inset-inline-end: 0 !important;
inset-inline-start: unset !important;
}
</style>
<script type="module">
// Initialize InnocallsRTC with configuration options
const innocallsRTC = new InnocallsRTC({
apiKey: 'YOUR_API_KEY', // Your API key generated from Innocalls dashboard
extension: 'YOUR_EXTENSION_NUMBER', // Your extension number for login
webrtcSecret: 'EXTENSION_WEB_RTC_SECRET', // WebRTC secret of your extension
config: {
baseColor: '#09f',
},
})
// Event listeners for various call events (v2)
innocallsRTC.on('callStarted', ({ call }) => {
console.log('callStarted', { call })
})
innocallsRTC.on('callRinging', ({ call }) => {
console.log('callRinging', { call })
})
innocallsRTC.on('callAnswered', ({ call }) => {
console.log('callAnswered', { call })
})
innocallsRTC.on('callEnded', ({ call }) => {
console.log('callEnded', { call })
})
innocallsRTC.on('callFailed', ({ call }) => {
console.log('callFailed', { call })
})
innocallsRTC.on('held', ({ call }) => {
console.log('held', { call })
})
innocallsRTC.on('released', ({ call }) => {
console.log('released', { call })
})
innocallsRTC.on('muted', ({ call }) => {
console.log('muted', { call })
})
innocallsRTC.on('unmuted', ({ call }) => {
console.log('unmuted', { call })
})
// Function to toggle WebRTC interface
const toggleWebrtc = () => {
innocallsRTC.toggleWebrtc()
}
// Function to start a call
const callNumber = () => {
const number = document.querySelector('#number')?.value
innocallsRTC.startCall(number)
innocallsRTC.showWebrtc()
}
// Function to handle keypress events
const onKeyPress = (e) => {
if (e.key !== 'Enter') return
const number = document.querySelector('#number')?.value
innocallsRTC.showWebrtc()
innocallsRTC.startCall(number)
}
const handleNumberButtonClick = (e) => {
const number = e.target.getAttribute('data-number')
if (number) {
innocallsRTC.fillNumber(number)
}
}
// Mount InnocallsRTC interface
innocallsRTC.mount('#root')
// Set up event listeners for buttons/inputs
const rtcInterfaceBtn = document.querySelector('#rtc-interface-btn')
rtcInterfaceBtn.addEventListener('click', toggleWebrtc)
const callBtn = document.querySelector('#call-btn')
callBtn.addEventListener('click', callNumber)
const keyPressInput = document.querySelector('#number')
keyPressInput.addEventListener('keypress', onKeyPress)
const numberButton = document.querySelector('#number-btn')
numberButton.addEventListener('click', handleNumberButtonClick)
</script>
</head>
<body>
<div class="flex">
<div class="bg-blue-200 w-[300px] h-screen sidebar"></div>
<div class="flex-1 p-2 page">
<div class="flex flex-col gap-2 w-full h-full">
<div class="flex-1 bg-white shadow body">
<h1 class="font-bold text-2xl mb-4">InnoRTC Example - v2</h1>
<ul>
<li class="mb-2">
Get your config secret data from
<a
href="https://platform.innocalls.com"
class="text-blue-600 underline"
>innocalls.com</a
>.
</li>
<li>Then replace the config secrets.</li>
</ul>
</div>
<div class="chat-box">
<textarea
name=""
id="number"
class="border border-gray-300 rounded-md p-2 w-full h-20"
></textarea>
<div class="flex gap-2 actions">
<button
id="number-btn"
class="bg-blue-500 text-white p-2 rounded-md number-btn"
data-number="+966920031131"
>
+966920031131
</button>
<button class="bg-blue-500 text-white p-2 rounded-md">a2</button>
<button class="bg-blue-500 text-white p-2 rounded-md" id="a3">
a3
</button>
<button class="bg-blue-500 text-white p-2 rounded-md">a4</button>
<button class="bg-blue-500 text-white p-2 rounded-md">a5</button>
<button
class="bg-green-500 text-white p-2 rounded-md"
id="call-btn"
>
call
</button>
<div class="relative rtc">
<button
class="bg-yellow-500 text-white p-2 rounded-md"
id="rtc-interface-btn"
>
rtc
</button>
<div id="root"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>