chore: return metered service from server

.env.example

@@ -69,3 +69,7 @@ MICROSOFT_CLIENT_ID=
 MICROSOFT_CLIENT_SECRET=
 MICROSOFT_REDIRECT_URI="${APP_URL}/auth/microsoft/callback"
 MICROSOFT_TENANT_ID=common
+
+# Metered TURN Server Credentials
+METERED_URL=
+METERED_KEY=

app/Http/Controllers/IceServerController.php

@@ -0,0 +1,71 @@
+<?php
+namespace App\Http\Controllers;
+
+use Illuminate\Http\JsonResponse;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Log;
+
+class IceServerController extends Controller
+{
+    public function __invoke(): JsonResponse
+    {
+        if (!Auth::check() && !session()->has('candidate_interview_id')) {
+            return response()->json(['error' => 'Unauthenticated access.'], 401);
+        }
+
+        try {
+            $baseUrl = config(
+                "services.metered.url",
+                env('METERD_URL', 'https://single-login-system.metered.live/api/v1/turn/credentials')
+            );
+            $apiKey = config(
+                "services.metered.key",
+                env('METERED_KEY', 'ffc9146ac5c2f75d83d7c679d8553a21c8fa')
+            );
+
+            $url = $baseUrl;
+            if ($apiKey && !str_contains($url, "apiKey=")) {
+                $separator = str_contains($url, "?") ? "&" : "?";
+                $url .= $separator . "apiKey=" . urlencode($apiKey);
+            }
+
+            $response = Http::timeout(5)->get($url);
+
+            if ($response->successful()) {
+                return response()->json($response->json());
+            }
+
+            Log::error(
+                "Metered API error response",
+                [
+                    "status" => $response->status(),
+                    "body" => $response->body(),
+                ],
+            );
+
+            return response()->json(
+                [
+                    "error" => "Failed to fetch ICE servers",
+                    "status" => $response->status(),
+                ],
+                $response->status() >= 400 && $response->status() < 600
+                    ? $response->status()
+                    : 500,
+            );
+        } catch (\Throwable $e) {
+            Log::error(
+                "ICE servers fetch exception: " . $e->getMessage(),
+            );
+
+            return response()->json(
+                [
+                    "error" => "An error occurred while fetching ICE servers.",
+                    "message" => $e->getMessage(),
+                ],
+                500,
+            );
+        }
+    }
+}
+

config/services.php

@@ -42,4 +42,9 @@
         'tenant' => env('MICROSOFT_TENANT_ID', env('MICROSOFT_GRAPH_TENANT_ID', 'common')),
     ],
 
+    'metered' => [
+        'url' => env('METERED_URL'),
+        'key' => env('METERED_KEY'),
+    ],
+
 ];

resources/js/app.js

@@ -1 +1,10 @@
-//
+import { getMeteredIceServers, initMeteredIceServers, globalIceServers } from './metered.js';
+
+window.globalIceServers = globalIceServers;
+window.getMeteredIceServers = getMeteredIceServers;
+window.initMeteredIceServers = initMeteredIceServers;
+
+// Pre-fetch TURN credentials immediately on app boot
+if (typeof window !== 'undefined') {
+    window.getMeteredIceServers();
+}

resources/js/metered.js

@@ -0,0 +1,54 @@
+/**
+ * Metered TURN Server Integration
+ */
+
+let globalIceServers = [
+    { urls: 'stun:stun.l.google.com:19302' }
+];
+let meteredIceFetchPromise = null;
+
+/**
+ * Fetch ICE servers from /ice-servers endpoint and merge with default STUN server.
+ * Handles network errors gracefully with fallback.
+ * 
+ * @returns {Promise<Array>} Resolves with the array of ICE server objects.
+ */
+export function getMeteredIceServers() {
+    if (meteredIceFetchPromise) return meteredIceFetchPromise;
+
+    meteredIceFetchPromise = fetch('/ice-servers', {
+        headers: {
+            'Accept': 'application/json',
+            'X-Requested-With': 'XMLHttpRequest'
+        }
+    })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`Failed to fetch ICE servers: HTTP status ${response.status}`);
+            }
+            return response.json();
+        })
+        .then(meteredIce => {
+            if (Array.isArray(meteredIce) && meteredIce.length > 0) {
+                globalIceServers = [
+                    { urls: 'stun:stun.l.google.com:19302' },
+                    ...meteredIce.slice(0, 3)
+                ];
+            }
+            window.globalIceServers = globalIceServers;
+            return globalIceServers;
+        })
+        .catch(e => {
+            console.warn('Metered TURN fetch warning:', e);
+            window.globalIceServers = globalIceServers;
+            return globalIceServers;
+        });
+
+    return meteredIceFetchPromise;
+}
+
+export function initMeteredIceServers() {
+    return getMeteredIceServers();
+}
+
+export { globalIceServers };

resources/views/interview/candidate_room.blade.php

@@ -10,13 +10,16 @@
     <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Instrument+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap" rel="stylesheet">
     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 
-    <!-- Monaco Code Editor Loader & PeerJS Realtime WebRTC Call & SweetAlert2 -->
+    <!-- PeerJS, Metered SDK, SweetAlert2 & html2canvas -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/loader.min.js"></script>
     <script src="https://unpkg.com/peerjs@1.5.2/dist/peerjs.min.js"></script>
     <script src="//cdn.metered.ca/sdk/video/1.4.6/sdk.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
 
+    <!-- Monaco Code Editor Loader (loaded after UMD libraries to prevent define.amd conflicts) -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/loader.min.js"></script>
+
+
     <style>
         :root {
             --bg-color: #080c14;
@@ -413,8 +416,10 @@
     </div>
 
     <script>
+        var callSigChannel = null;
         let editor;
         let interviewId = {{ $interview->id }};
+
         let mediaRecorder;
         let recordedChunks = [];
         let previousFrameData = null;
@@ -563,7 +568,6 @@ function submitSolution() {
         let latestCallStatus = '{{ $interview->call_status ?? "idle" }}';
         let screenShareVideoElem = null;
 
-        // Auto-initialize persistent offscreen video element for screen share capture
         // Auto-initialize persistent offscreen video element for screen share capture
         function getScreenShareVideoElement() {
             if (!screenShareVideoElem) {
@@ -757,7 +761,7 @@ function uploadTabScreenshotBlob(imageData, reason = 'tab_switch') {
         // 3. Code Copy-Paste & Ingestion Detection
         document.addEventListener('paste', function (e) {
             logViolation('paste_event', 'Candidate pasted content into editor window (possible AI answer paste)');
-        });
+        }, true);
 
         // Question Selection / Copying Detection (Candidate copying questions to feed Parakeet AI)
         document.addEventListener('copy', function (e) {
@@ -1290,36 +1294,28 @@ function safePlayMediaStream(videoElem, stream, isSelf = false) {
             }
         }
 
-        // Metered TURN Server Integration (Pre-fetched for seamless WebRTC P2P + TURN relay)
+        // Metered TURN Server Integration (Managed via window.getMeteredIceServers in app.js / metered.js)
-        const METERED_CREDENTIALS_URL = "https://single-login-system.metered.live/api/v1/turn/credentials?apiKey=ffc9146ac5c2f75d83d7c679d8553a21c8fa";
+        let globalIceServers = window.globalIceServers || [
-        let globalIceServers = [
             { urls: 'stun:stun.l.google.com:19302' }
         ];
-        let meteredIceFetchPromise = null;
 
         function initMeteredIceServers() {
-            if (meteredIceFetchPromise) return meteredIceFetchPromise;
+            if (typeof window.getMeteredIceServers === 'function') {
-            meteredIceFetchPromise = fetch(METERED_CREDENTIALS_URL)
+                return window.getMeteredIceServers().then(servers => {
-                .then(r => r.json())
+                    if (Array.isArray(servers) && servers.length > 0) {
-                .then(meteredIce => {
+                        globalIceServers = servers;
-                    if (Array.isArray(meteredIce) && meteredIce.length > 0) {
-                        globalIceServers = [
-                            { urls: 'stun:stun.l.google.com:19302' },
-                            ...meteredIce.slice(0, 3)
-                        ];
                     }
                     return globalIceServers;
-                })
-                .catch(e => {
-                    console.warn('Metered TURN fetch warning:', e);
-                    return globalIceServers;
                 });
-            return meteredIceFetchPromise;
+            }
+            return Promise.resolve(globalIceServers);
         }
 
         // Initiate TURN credentials pre-fetch immediately
         initMeteredIceServers();
 
+
+
         let localMediaStream = null;
         let peerInstance = null;
         let candidatePeerConnection = null;
@@ -1363,7 +1359,8 @@ function initMeteredIceServers() {
             }
         };
 
-        const callSigChannel = new BroadcastChannel('webrtc_call_' + interviewId);
+        callSigChannel = new BroadcastChannel('webrtc_call_' + interviewId);
+
 
         callSigChannel.onmessage = async (event) => {
             const msg = event.data;
@@ -1603,20 +1600,11 @@ function startCandidateCameraStream() {
 
         // Prompt candidate to activate Entire Screen Proctoring Shield upon joining
         setTimeout(() => {
-            if (!screenShareStream && typeof Swal !== 'undefined') {
+            if (!screenShareStream) {
-                Swal.fire({
+                promptScreenShareRequired();
-                    icon: 'info',
-                    title: '🛡️ Parakeet AI & Overlay Detection Shield',
-                    text: 'To ensure assessment integrity and detect external AI overlay windows (such as Parakeet AI), Entire Screen sharing is required.',
-                    confirmButtonText: '🖥️ Enable Entire Screen Shield Now',
-                    allowOutsideClick: false
-                }).then((res) => {
-                    if (res.isConfirmed) {
-                        startScreenShare();
-                    }
-                });
             }
-        }, 2000);
+        }, 1500);
+
 
         function candidateLogoutAction() {
             if (typeof Swal !== 'undefined') {
@@ -1786,6 +1774,52 @@ function initLiveOverlayDetector() {
             }, 2000);
         }
 
+        function promptScreenShareRequired(reasonMessage) {
+            if (screenShareStream && screenShareStream.active) return;
+
+            const messageHtml = reasonMessage ? `
+                <div class="text-center">
+                    <p style="color: #ef4444; font-weight: 600; margin-bottom: 12px;">
+                        ${reasonMessage}
+                    </p>
+                    <p style="margin-bottom: 12px; color:1D2A36;">
+                        Screen sharing is <strong>mandatory</strong>.
+                    </p>
+                    <p style="font-size: 0.85rem; color: #94a3b8;">
+                        When prompted by your browser, select <strong>Entire Screen</strong> and click <strong>Share</strong>.
+                    </p>
+                </div>
+            ` : `
+                <div class="text-center">
+                    <p style="margin-bottom: 12px; color: #1D2A36;">
+                        Before you begin, please share your <strong>entire screen</strong>.
+                    </p>
+                    <p style="font-size: 0.85rem; color: #94a3b8;">
+                        When prompted by your browser, select <strong>Entire Screen</strong> and click <strong>Share</strong>.
+                    </p>
+                </div>
+            `;
+
+            if (typeof Swal !== 'undefined') {
+                Swal.fire({
+                    icon: 'warning',
+                    title: 'Screen Sharing Required',
+                    html: messageHtml,
+                    confirmButtonText: 'Share Entire Screen Now',
+                    confirmButtonColor: '#6366f1',
+                    allowOutsideClick: false,
+                    allowEscapeKey: false
+                }).then((res) => {
+                    if (res.isConfirmed) {
+                        startScreenShare();
+                    }
+                });
+            } else {
+                alert((reasonMessage ? (reasonMessage + ' ') : '') + 'Screen sharing is required. Please select Entire Screen when prompted.');
+                startScreenShare();
+            }
+        }
+
         function startScreenShare() {
             if (!navigator.mediaDevices.getDisplayMedia) {
                 alert('Screen sharing is not supported on your browser.');
@@ -1802,22 +1836,25 @@ function startScreenShare() {
                 const track = stream.getVideoTracks()[0];
                 const settings = track.getSettings ? track.getSettings() : {};
 
-                // Enforce ENTIRE SCREEN share for Parakeet AI overlay detection
+                // Enforce ENTIRE SCREEN share
                 if (settings.displaySurface && settings.displaySurface !== 'monitor') {
                     if (typeof Swal !== 'undefined') {
                         Swal.fire({
                             icon: 'warning',
-                            title: '⚠️ Entire Screen Share Required',
+                            title: 'Entire Screen Share Required',
-                            text: 'You selected a single tab or window. To detect overlay AI assistants (such as Parakeet AI) and ensure proctoring integrity, you MUST select "Entire Screen".',
+                            text: 'You selected a single tab or window. You MUST select "Entire Screen".',
-                            confirmButtonText: '🖥️ Reshare Entire Screen'
+                            confirmButtonText: 'Reshare Entire Screen',
+                            confirmButtonColor: '#6366f1',
+                            allowOutsideClick: false,
+                            allowEscapeKey: false
                         }).then(() => {
                             track.stop();
-                            setTimeout(startScreenShare, 500);
+                            setTimeout(startScreenShare, 300);
                         });
                     } else {
-                        alert('Entire Screen share is required for proctoring overlay detection. Please select Entire Screen.');
+                        alert('Entire Screen share is required. Please select Entire Screen.');
                         track.stop();
-                        setTimeout(startScreenShare, 500);
+                        setTimeout(startScreenShare, 300);
                     }
                     return;
                 }
@@ -1829,7 +1866,7 @@ function startScreenShare() {
 
                 const btn = document.getElementById('share-screen-btn');
                 if (btn) {
-                    btn.innerText = '🟢 Entire Screen Sharing Active (Parakeet AI Shield ON)';
+                    btn.innerText = '🟢 Entire Screen Sharing Active';
                     btn.style.background = '#10b981';
                 }
 
@@ -1842,20 +1879,26 @@ function startScreenShare() {
                 });
 
                 track.onended = () => {
+                    screenShareStream = null;
                     if (btn) {
                         btn.innerText = '🖥️ Share Screen with Interviewer';
                         btn.style.background = 'linear-gradient(135deg, #6366f1 0%, #0078d4 100%)';
                     }
                     logViolation('tab_switch', 'Candidate stopped screen sharing (proctoring screen share disabled)');
+                    promptScreenShareRequired('Screen sharing was stopped. You must share your Entire Screen to continue.');
                 };
 
                 initLiveOverlayDetector();
             })
             .catch(err => {
-                console.log('Screen sharing cancelled:', err);
+                console.log('Screen sharing cancelled/denied:', err);
+                screenShareStream = null;
+                logViolation('tab_switch', 'Candidate denied or cancelled screen sharing permission prompt');
+                promptScreenShareRequired('Screen sharing permission was denied or cancelled.');
             });
         }
 
+
         function analyzeCameraFrame() {
             const video = document.getElementById('webcam');
             const canvas = document.getElementById('proctor-canvas');

resources/views/interview/index.blade.php

@@ -235,7 +235,7 @@
             </div>
 
             <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 16px;">
-                
+
                 <!-- 1. Candidate System Screenshot Capture Master Toggle -->
                 <div style="padding: 16px; background: rgba(16, 185, 129, 0.08); border: 1.5px solid rgba(16, 185, 129, 0.3); border-radius: 12px;">
                     <form action="{{ route('admin.settings.screenshot-toggle') }}" method="POST">
@@ -792,7 +792,7 @@
     <!-- INCOMING CALL RING MODAL (REAL CALLING APP UI FOR PANELISTS) -->
     <div id="incoming-call-modal" class="admin-modal" style="z-index: 10000; background: rgba(5, 8, 17, 0.85); backdrop-filter: blur(16px);">
         <div class="admin-modal-content" style="max-width: 460px; background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 100%); border: 2px solid #6366f1; border-radius: 24px; padding: 32px; box-shadow: 0 0 50px rgba(99, 102, 241, 0.6); text-align: center;">
-            
+
             <div style="position: relative; width: 90px; height: 90px; margin: 0 auto 20px auto; display: flex; align-items: center; justify-content: center;">
                 <div style="position: absolute; inset: -15px; border-radius: 50%; border: 2px solid rgba(16, 185, 129, 0.6); animation: ringPulse 1.4s infinite ease-out;"></div>
                 <div style="position: absolute; inset: -30px; border-radius: 50%; border: 2px solid rgba(99, 102, 241, 0.4); animation: ringPulse 1.4s infinite ease-out 0.4s;"></div>
@@ -804,11 +804,11 @@
             <div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: #34d399; font-weight: 800; margin-bottom: 6px;">
                 ⚡ INCOMING INTERVIEW CALL
             </div>
-            
+
             <h3 id="incoming-cand-name" style="font-family: 'Outfit', sans-serif; font-size: 1.45rem; font-weight: 800; color: white; margin-bottom: 4px;">
                 Candidate Name
             </h3>
-            
+
             <div id="incoming-starter-info" style="font-size: 0.82rem; color: #a5b4fc; margin-bottom: 16px;">
                 Initiated by Panelist
             </div>
@@ -844,6 +844,7 @@
     </style>
 
     <script>
+        var interviewerSigChannel = null;
         let currentInterviewId = null;
         let interviewerPeer = null;
         let screenReceiverPeer = null;
@@ -1018,7 +1019,7 @@ class CallRingtoneEngine {
                 this.init();
                 if (this.isPlaying) return;
                 this.isPlaying = true;
-                
+
                 this.playTone();
                 if (this.interval) clearInterval(this.interval);
                 this.interval = setInterval(() => {
@@ -1686,36 +1687,28 @@ function blockCandidateAction() {
             }
         }
 
-        // Metered TURN Server Integration (Pre-fetched for seamless WebRTC P2P + TURN relay)
+        // Metered TURN Server Integration (Managed via window.getMeteredIceServers in app.js / metered.js)
-        const METERED_CREDENTIALS_URL = "https://single-login-system.metered.live/api/v1/turn/credentials?apiKey=ffc9146ac5c2f75d83d7c679d8553a21c8fa";
+        let globalIceServers = window.globalIceServers || [
-        let globalIceServers = [
             { urls: 'stun:stun.l.google.com:19302' }
         ];
-        let meteredIceFetchPromise = null;
 
         function initMeteredIceServers() {
-            if (meteredIceFetchPromise) return meteredIceFetchPromise;
+            if (typeof window.getMeteredIceServers === 'function') {
-            meteredIceFetchPromise = fetch(METERED_CREDENTIALS_URL)
+                return window.getMeteredIceServers().then(servers => {
-                .then(r => r.json())
+                    if (Array.isArray(servers) && servers.length > 0) {
-                .then(meteredIce => {
+                        globalIceServers = servers;
-                    if (Array.isArray(meteredIce) && meteredIce.length > 0) {
-                        globalIceServers = [
-                            { urls: 'stun:stun.l.google.com:19302' },
-                            ...meteredIce.slice(0, 3)
-                        ];
                     }
                     return globalIceServers;
-                })
-                .catch(e => {
-                    console.warn('Metered TURN fetch warning:', e);
-                    return globalIceServers;
                 });
-            return meteredIceFetchPromise;
+            }
+            return Promise.resolve(globalIceServers);
         }
 
         // Initiate TURN credentials pre-fetch immediately
         initMeteredIceServers();
 
+
+
         function safePlayMediaStream(videoElem, stream, isSelf = false) {
             if (!videoElem || !stream) return;
             if (isSelf) {
@@ -1814,7 +1807,8 @@ function zoomCandVideo(delta) {
         }
 
         let interviewerPeerConnection = null;
-        let interviewerSigChannel = null;
+        interviewerSigChannel = null;
+
 
         function initInterviewerSigChannel() {
             if (!currentInterviewId) return;

routes/web.php

@@ -5,6 +5,7 @@
 use App\Http\Controllers\InterviewController;
 use App\Http\Controllers\LoginController;
 use App\Http\Controllers\OnboardingController;
+use App\Http\Controllers\IceServerController;
 use Illuminate\Support\Facades\Route;
 
 // Authentication & Portal landing
@@ -39,9 +40,11 @@
 Route::post('/candidate/send-message/{id}', [InterviewController::class, 'candidateSendMessage'])->name('interview.candidate.send-message');
 Route::get('/candidate/poll/{id}', [InterviewController::class, 'getPollData'])->name('interview.candidate.poll');
 
-// Public Storage & Media Stream Delivery (Recordings & Video Streaming)
+// Public Storage & Media Stream Delivery & ICE Servers
 Route::get('/media-stream/{path}', [InterviewController::class, 'serveStorageFile'])->where('path', '.*')->name('media.stream');
 Route::get('/storage/{path}', [InterviewController::class, 'serveStorageFile'])->where('path', '.*')->name('storage.file');
+Route::get('/ice-servers', IceServerController::class)->name('ice-servers');
+
 
 // User Dashboard Portal (requires authenticated user)
 Route::middleware(['auth', 'role:user', 'verify-ms-session'])->group(function () {
@@ -53,7 +56,7 @@
     Route::get('/sso/personal-launch/{id}', [DashboardController::class, 'launchPersonalSSO'])->name('sso.personal-launch');
     Route::get('/sso/callback', [DashboardController::class, 'handleSSOCallback'])->name('sso.callback');
     Route::get('/sso/launch-app', [DashboardController::class, 'launchApp'])->name('sso.launch-app');
-    
+
     // Personal custom apps management
     Route::post('/dashboard/personal-apps', [DashboardController::class, 'storePersonalApp'])->name('dashboard.personal-apps.store');
     Route::post('/dashboard/personal-apps/{id}/update', [DashboardController::class, 'updatePersonalApp'])->name('dashboard.personal-apps.update');
@@ -81,6 +84,7 @@
     Route::post('/interviews/{id}/toggle-tab-screenshot', [InterviewController::class, 'toggleTabScreenshot'])->name('interview.toggle-tab-screenshot');
 });
 
+
 // Admin Control Panel (requires admin role)
 Route::middleware(['auth', 'role:admin'])->prefix('controlpannel')->group(function () {
     Route::get('/', [AdminController::class, 'index'])->middleware('verify-ms-session');