I am integrating Plivo in Laravel to create a “click to call” function on my web app page. I want to provide features such as call, hangup, mute, and unmute on this page. I also want a feature that allows users to talk directly through the web. So, when the user clicks the “Call” button, the user can immediately speak to someone through the browser.
I have created codes like the following, but I get an error message: “Failed to load Plivo SDK: Plivo SDK failed to load”.
show.blade.php
@extends('layouts.app')
@section('title', "Contact: {$contact->first_name} {$contact->last_name}")
@section('styles')
<script type="text/javascript" src="https://cdn.plivo.com/sdk/browser/v2/plivo.min.js"> </script>
<style>
.call-interface {
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 20px;
}
.call-status {
font-size: 18px;
margin-bottom: 15px;
}
.call-controls button {
margin-right: 10px;
margin-bottom: 10px;
}
.call-timer {
font-size: 24px;
font-weight: bold;
margin: 15px 0;
}
.call-logs {
margin-top: 30px;
}
</style>
@endsection
@section('content')
<div class="col-md-4">
<div class="card mb-3">
<div class="card-header">
<h5 class="card-title mb-0">
Contact Details
</h5>
</div>
<div class="card-body">
<div class="mb-1">
<strong>Name:</strong> {{ $contact->first_name }} {{ $contact->last_name }}
</div>
<div class="mb-1">
<strong>Phone:</strong> {{ $contact->phone }}
</div>
</div>
<div class="card-footer">
<div class="row g-3 align-items-center">
<div class="col-12">
<label for="note" class="form-label">Note</label>
<textarea name="note" class="form-control" id="note" rows="3">{!! $disposition ? $disposition->note : '' !!}</textarea>
</div>
<div class="col-auto">
<select name="disposition" class="form-select" id="disposition">
<option value="">Select disposition</option>
@foreach (config('data.disposition_status') as $key => $item)
<option value="{{ $key }}" {{ $disposition && $disposition->status === $key ? 'selected' : '' }}>{{ $item }}</option>
@endforeach
</select>
</div>
<div class="col-auto">
<button onclick="makeCall('{{ $contact->phone }}')" class="btn btn-dark">Call</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h3>Call Interface</h3>
</div>
<div class="card-body">
<div class="call-interface">
<div id="call-status" class="call-status alert alert-info">
Ready
</div>
<div class="call-timer" id="call-timer">
00:00:00
</div>
<div class="call-controls">
<button id="makeCall" class="btn btn-success" disabled>
<i class="fas fa-phone"></i> Call
</button>
<button id="hangupCall" class="btn btn-danger" disabled>
<i class="fas fa-phone-slash"></i> Hangup
</button>
<button id="muteCall" class="btn btn-warning" disabled>
<i class="fas fa-microphone-slash"></i> Mute
</button>
<button id="unmuteCall" class="btn btn-info" disabled>
<i class="fas fa-microphone"></i> Unmute
</button>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('scripts')
<script>
let client;
let currentCall = null;
let callTimer = null;
let callStartTime = null;
async function initializePlivoClient() {
try {
console.log('Initializing Plivo client...');
if (typeof window.plivoBrowserSdk === 'undefined') {
throw new Error('Plivo Browser SDK not loaded');
}
const response = await fetch('{{ route("plivo.token") }}');
const data = await response.json();
if (data.error) {
throw new Error(data.error);
}
console.log('Token received, initializing client...');
try {
const options = {
debug: "DEBUG",
permOnClick: true,
enableTracking: true,
audioConstraints: {
optional: [
{ echoCancellation: true },
{ noiseSuppression: true }
]
}
};
// Create client using the correct SDK reference
client = new window.plivoBrowserSdk.Client(options);
console.log('Client created, attempting login...');
// Login
await client.login(data.username, data.password);
console.log('Login successful');
document.getElementById('makeCall').disabled = false;
document.getElementById('call-status').innerHTML = 'Ready to call';
document.getElementById('call-status').className = 'alert alert-success';
setupEventListeners();
} catch (error) {
throw new Error(`Client initialization failed: ${error.message}`);
}
} catch (error) {
console.error('Failed to initialize Plivo client:', error);
document.getElementById('call-status').innerHTML = 'Failed to initialize phone: ' + error.message;
document.getElementById('call-status').className = 'alert alert-danger';
}
}
// Wait for SDK to load
function waitForPlivoSDK() {
return new Promise((resolve, reject) => {
let attempts = 0;
const maxAttempts = 20;
const checkSDK = setInterval(() => {
if (typeof window.plivoBrowserSdk !== 'undefined') {
clearInterval(checkSDK);
resolve();
} else {
attempts++;
if (attempts >= maxAttempts) {
clearInterval(checkSDK);
reject(new Error('Plivo SDK failed to load'));
}
}
}, 250);
});
}
// Initialize when document is ready
document.addEventListener('DOMContentLoaded', async () => {
try {
await waitForPlivoSDK();
await initializePlivoClient();
} catch (error) {
console.error('Initialization failed:', error);
document.getElementById('call-status').innerHTML = 'Failed to load Plivo SDK: ' + error.message;
document.getElementById('call-status').className = 'alert alert-danger';
}
});
function setupEventListeners() {
if (!client) {
console.error('Client not initialized');
return;
}
client.on('onLogin', () => {
console.log('Successfully logged in to Plivo');
document.getElementById('call-status').innerHTML = 'Ready to make calls';
document.getElementById('call-status').className = 'alert alert-success';
});
client.on('onLoginFailed', (error) => {
console.error('Login failed:', error);
});
client.on('onCallRemoteRinging', () => {
document.getElementById('call-status').innerHTML = 'Ringing...';
document.getElementById('call-status').className = 'alert alert-warning';
});
client.on('onCallAnswered', () => {
document.getElementById('call-status').innerHTML = 'Call in progress';
document.getElementById('call-status').className = 'alert alert-success';
document.getElementById('hangupCall').disabled = false;
document.getElementById('muteCall').disabled = false;
startCallTimer();
});
client.on('onCallTerminated', () => {
resetCallInterface();
logCall('completed');
});
client.on('onCallFailed', (error) => {
console.error('Call failed:', error);
resetCallInterface();
logCall('failed');
});
}
function startCallTimer() {
callStartTime = new Date();
callTimer = setInterval(() => {
const now = new Date();
const diff = new Date(now - callStartTime);
const hours = diff.getUTCHours().toString().padStart(2, '0');
const minutes = diff.getUTCMinutes().toString().padStart(2, '0');
const seconds = diff.getUTCSeconds().toString().padStart(2, '0');
document.getElementById('call-timer').innerHTML = `${hours}:${minutes}:${seconds}`;
}, 1000);
}
function resetCallInterface() {
currentCall = null;
document.getElementById('call-status').innerHTML = 'Ready';
document.getElementById('call-status').className = 'alert alert-info';
document.getElementById('hangupCall').disabled = true;
document.getElementById('muteCall').disabled = true;
document.getElementById('unmuteCall').disabled = true;
document.getElementById('call-timer').innerHTML = '00:00:00';
if (callTimer) {
clearInterval(callTimer);
callTimer = null;
}
callStartTime = null;
}
async function logCall(status) {
try {
await fetch('/api/call-logs', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
},
body: JSON.stringify({
contact_id: '{{ $contact->id }}',
status: status,
start_time: callStartTime,
end_time: new Date(),
duration: callStartTime ? Math.round((new Date() - callStartTime) / 1000) : 0
})
});
} catch (error) {
console.error('Failed to log call:', error);
}
}
// Initialize when page loads
document.addEventListener('DOMContentLoaded', initializePlivoClient);
// Call button event listener
document.getElementById('makeCall').addEventListener('click', async () => {
try {
currentCall = await client.call('{{ $contact->phone }}');
document.getElementById('call-status').innerHTML = 'Calling...';
document.getElementById('call-status').className = 'alert alert-warning';
} catch (error) {
console.error('Error making call:', error);
document.getElementById('call-status').innerHTML = 'Call failed: ' + error.message;
document.getElementById('call-status').className = 'alert alert-danger';
}
});
// Hangup button event listener
document.getElementById('hangupCall').addEventListener('click', () => {
if (currentCall) {
currentCall.hangup();
}
});
// Mute button event listener
document.getElementById('muteCall').addEventListener('click', () => {
if (currentCall) {
currentCall.mute();
document.getElementById('muteCall').disabled = true;
document.getElementById('unmuteCall').disabled = false;
}
});
// Unmute button event listener
document.getElementById('unmuteCall').addEventListener('click', () => {
if (currentCall) {
currentCall.unmute();
document.getElementById('muteCall').disabled = false;
document.getElementById('unmuteCall').disabled = true;
}
});
</script>
@endpush
PlivoController.php
<?php
namespace AppHttpControllers;
use AppModelsCall;
use PlivoRestClient;
use IlluminateSupportStr;
use IlluminateHttpRequest;
class PlivoController extends Controller
{
protected $client;
public function __construct()
{
$this->client = new RestClient(
config('services.plivo.auth_id'),
config('services.plivo.auth_token')
);
}
public function getToken()
{
try {
$endpointId = config('services.plivo.endpoint_id');
$username = 'user_' . time();
$token = $this->generateToken($username);
return response()->json([
'username' => $username,
'password' => $token
]);
} catch (Exception $e) {
Log::error('Plivo Token Error', [
'error' => $e->getMessage()
]);
return response()->json([
'error' => $e->getMessage()
], 500);
}
}
private function generateToken($username)
{
$authId = config('services.plivo.auth_id');
$authToken = config('services.plivo.auth_token');
$iat = time();
$exp = $iat + 3600; // Token berlaku 1 jam
$payload = [
"iss" => $authId,
"sub" => $username,
"iat" => $iat,
"exp" => $exp,
"jti" => Str::uuid()->toString()
];
$header = json_encode(['typ' => 'JWT', 'alg' => 'HS256']);
$base64UrlHeader = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($header));
$base64UrlPayload = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode(json_encode($payload)));
$signature = hash_hmac('sha256', $base64UrlHeader . "." . $base64UrlPayload, $authToken, true);
$base64UrlSignature = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($signature));
return $base64UrlHeader . "." . $base64UrlPayload . "." . $base64UrlSignature;
}
public function handleCallEvent(Request $request)
{
Log::info('Call Event Received', $request->all());
return response()->json(['status' => 'success']);
}
}
web.php
Route::get('/plivo/token', [PlivoController::class, 'getToken'])->name('plivo.token');
Route::post('/plivo/call-event', [PlivoController::class, 'handleCallEvent'])->name('plivo.call-event');
What is the correct way to integrate Plivo in Laravel?
