 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/lavocat.ca/public_html/public/ |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Call Help</title>
<style>
body {
font-family: system-ui, -apple-system, sans-serif;
max-width: 800px;
margin: 40px auto;
padding: 20px;
line-height: 1.6;
}
.step {
background: #f8f9fa;
padding: 15px;
margin: 10px 0;
border-left: 4px solid #007bff;
border-radius: 4px;
}
.error-type {
background: #fff3cd;
border-left-color: #ffc107;
border-radius: 8px;
margin: 15px 0;
padding: 15px;
}
.success {
background: #d4edda;
border-left-color: #28a745;
}
.code {
background: #f8f9fa;
padding: 2px 6px;
border-radius: 3px;
font-family: monospace;
}
h1 { color: #333; }
h2 { color: #555; }
</style>
</head>
<body>
<h1>🎥 Video Call Troubleshooting</h1>
<p>Having trouble with video calls? This guide will help you fix common camera and microphone issues.</p>
<h2>📋 Common Error Messages</h2>
<div class="error-type">
<h3>❌ "NotAllowedError" - Permission Denied</h3>
<p><strong>Problem:</strong> Your browser is blocking camera/microphone access.</p>
<p><strong>Solution:</strong></p>
<div class="step">
<strong>Chrome/Edge:</strong> Click the camera icon in the address bar → Allow camera and microphone → Refresh page
</div>
<div class="step">
<strong>Firefox:</strong> Click the shield icon → Permissions → Allow camera and microphone → Refresh page
</div>
<div class="step">
<strong>Safari:</strong> Safari menu → Settings for this website → Camera/Microphone: Allow → Refresh page
</div>
</div>
<div class="error-type">
<h3>❌ "NotFoundError" - No Camera/Microphone Found</h3>
<p><strong>Problem:</strong> Your device doesn't have a camera or microphone, or they're not properly connected.</p>
<p><strong>Solution:</strong></p>
<div class="step">
1. Check that your camera/microphone is properly connected
</div>
<div class="step">
2. Try unplugging and reconnecting external devices
</div>
<div class="step">
3. Check device manager (Windows) or System Preferences (Mac) to ensure devices are recognized
</div>
</div>
<div class="error-type">
<h3>❌ "NotReadableError" - Device In Use</h3>
<p><strong>Problem:</strong> Another application is using your camera or microphone.</p>
<p><strong>Solution:</strong></p>
<div class="step">
1. Close other video calling apps (Zoom, Teams, Skype, etc.)
</div>
<div class="step">
2. Close other browser tabs that might be using camera/microphone
</div>
<div class="step">
3. Restart your browser if the issue persists
</div>
</div>
<div class="error-type">
<h3>❌ "navigator.mediaDevices is undefined" - HTTPS Required</h3>
<p><strong>Problem:</strong> Your browser can't access camera/microphone because the connection is not secure.</p>
<p><strong>Solution:</strong></p>
<div class="step">
<strong>Check your URL:</strong> Video calls require HTTPS (secure connection)
<br>❌ <code>http://localhost:3000</code> - Won't work
<br>✅ <code>https://localhost:3000</code> - Will work
</div>
<div class="step">
<strong>For localhost development:</strong> Use HTTPS certificates or run on 127.0.0.1
</div>
<div class="step">
<strong>For production:</strong> Ensure your website uses HTTPS (SSL certificate)
</div>
</div>
<h2>✅ How to Test Your Camera/Microphone</h2>
<div class="step success">
<strong>Quick Test:</strong> Go to <a href="https://webrtc.github.io/samples/src/content/devices/input-output/" target="_blank">WebRTC Test Page</a> to check if your devices work in the browser.
</div>
<h2>🔧 Reset Browser Permissions</h2>
<div class="step">
<strong>Chrome:</strong> Settings → Privacy and Security → Site Settings → Camera/Microphone → Find your site → Reset permissions
</div>
<div class="step">
<strong>Firefox:</strong> Settings → Privacy & Security → Permissions → Camera/Microphone → Find your site → Remove website
</div>
<h2>🚀 Quick Fix for HTTPS</h2>
<div class="step success">
<strong>For Developers:</strong> If you're running the development server, use the HTTPS version:
<br><br>
<code>npm run dev:https</code>
<br><br>
Then access: <strong>https://localhost:3443</strong> instead of http://localhost:3000
</div>
<h2>💡 Pro Tips</h2>
<div class="step">
✅ Use HTTPS (secure connection) - video calls require a secure connection
</div>
<div class="step">
✅ Use a modern browser - Chrome, Firefox, Safari, or Edge work best
</div>
<div class="step">
✅ Check your internet connection - poor connection can cause call failures
</div>
<p style="margin-top: 40px; text-align: center; color: #666;">
<a href="javascript:history.back()" style="color: #007bff; text-decoration: none;">← Back to Chat</a>
</p>
</body>
</html>