|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>🌐 浏览器兼容性指南</title>
|
|
|
<style>
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
color: white;
|
|
|
min-height: 100vh;
|
|
|
padding: 20px;
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
max-width: 900px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
text-align: center;
|
|
|
padding: 30px 0;
|
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
|
|
|
margin-bottom: 30px;
|
|
|
}
|
|
|
|
|
|
.section {
|
|
|
background: rgba(0, 0, 0, 0.3);
|
|
|
border-radius: 15px;
|
|
|
padding: 25px;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.section h3 {
|
|
|
color: #4CAF50;
|
|
|
margin-bottom: 15px;
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
|
|
|
.compatibility-table {
|
|
|
width: 100%;
|
|
|
border-collapse: collapse;
|
|
|
margin: 20px 0;
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
border-radius: 8px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.compatibility-table th,
|
|
|
.compatibility-table td {
|
|
|
padding: 12px;
|
|
|
text-align: left;
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
}
|
|
|
|
|
|
.compatibility-table th {
|
|
|
background: rgba(0, 0, 0, 0.3);
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.support-yes {
|
|
|
color: #4CAF50;
|
|
|
}
|
|
|
|
|
|
.support-partial {
|
|
|
color: #FF9800;
|
|
|
}
|
|
|
|
|
|
.support-no {
|
|
|
color: #f44336;
|
|
|
}
|
|
|
|
|
|
.solution-box {
|
|
|
background: rgba(76, 175, 80, 0.2);
|
|
|
border-left: 4px solid #4CAF50;
|
|
|
padding: 15px;
|
|
|
margin: 15px 0;
|
|
|
border-radius: 0 8px 8px 0;
|
|
|
}
|
|
|
|
|
|
.warning-box {
|
|
|
background: rgba(255, 152, 0, 0.2);
|
|
|
border-left: 4px solid #FF9800;
|
|
|
padding: 15px;
|
|
|
margin: 15px 0;
|
|
|
border-radius: 0 8px 8px 0;
|
|
|
}
|
|
|
|
|
|
.error-box {
|
|
|
background: rgba(244, 67, 54, 0.2);
|
|
|
border-left: 4px solid #f44336;
|
|
|
padding: 15px;
|
|
|
margin: 15px 0;
|
|
|
border-radius: 0 8px 8px 0;
|
|
|
}
|
|
|
|
|
|
.btn {
|
|
|
display: inline-block;
|
|
|
padding: 12px 24px;
|
|
|
background: #4CAF50;
|
|
|
color: white;
|
|
|
text-decoration: none;
|
|
|
border-radius: 8px;
|
|
|
font-weight: bold;
|
|
|
margin: 5px;
|
|
|
transition: background 0.3s;
|
|
|
}
|
|
|
|
|
|
.btn:hover {
|
|
|
background: #45a049;
|
|
|
}
|
|
|
|
|
|
.btn-secondary {
|
|
|
background: #2196F3;
|
|
|
}
|
|
|
|
|
|
.btn-secondary:hover {
|
|
|
background: #1976D2;
|
|
|
}
|
|
|
|
|
|
.feature-list {
|
|
|
list-style: none;
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
.feature-list li {
|
|
|
padding: 8px 0;
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
}
|
|
|
|
|
|
.feature-list li:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
|
|
|
.status-indicator {
|
|
|
display: inline-block;
|
|
|
width: 12px;
|
|
|
height: 12px;
|
|
|
border-radius: 50%;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.status-ok {
|
|
|
background: #4CAF50;
|
|
|
}
|
|
|
|
|
|
.status-warning {
|
|
|
background: #FF9800;
|
|
|
}
|
|
|
|
|
|
.status-error {
|
|
|
background: #f44336;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
<div class="header">
|
|
|
<h1>🌐 浏览器兼容性指南</h1>
|
|
|
<p>移动侦察终端摄像头功能兼容性说明与解决方案</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="section">
|
|
|
<h3>📋 当前浏览器检测</h3>
|
|
|
<div id="browserInfo">
|
|
|
<p>正在检测您的浏览器兼容性...</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="section">
|
|
|
<h3>🔍 "设备扫描失败: 浏览器不支持设备枚举功能" 问题说明</h3>
|
|
|
|
|
|
<div class="warning-box">
|
|
|
<h4>⚠️ 问题原因</h4>
|
|
|
<p>这个错误表示您的浏览器不支持 <code>navigator.mediaDevices.enumerateDevices()</code> API，这个API用于列出可用的摄像头设备。</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="solution-box">
|
|
|
<h4>✅ 系统自动解决方案</h4>
|
|
|
<p>我们的系统已经自动启用了兼容模式，为您提供以下设备选项：</p>
|
|
|
<ul style="margin: 10px 0 0 20px;">
|
|
|
<li>📱 <strong>默认摄像头</strong> - 使用系统默认摄像头</li>
|
|
|
<li>📹 <strong>后置摄像头</strong> - 尝试使用后置摄像头</li>
|
|
|
<li>🤳 <strong>前置摄像头</strong> - 尝试使用前置摄像头</li>
|
|
|
</ul>
|
|
|
<p style="margin-top: 10px;">您可以通过设备选择器逐个测试这些选项，找到适合的摄像头配置。</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="section">
|
|
|
<h3>📱 浏览器兼容性列表</h3>
|
|
|
<table class="compatibility-table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>浏览器</th>
|
|
|
<th>getUserMedia</th>
|
|
|
<th>enumerateDevices</th>
|
|
|
<th>Permissions API</th>
|
|
|
<th>总体支持</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<td><strong>Chrome 53+</strong></td>
|
|
|
<td class="support-yes">✅ 完全支持</td>
|
|
|
<td class="support-yes">✅ 完全支持</td>
|
|
|
<td class="support-yes">✅ 完全支持</td>
|
|
|
<td class="support-yes"><strong>推荐</strong></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><strong>Firefox 36+</strong></td>
|
|
|
<td class="support-yes">✅ 完全支持</td>
|
|
|
<td class="support-yes">✅ 完全支持</td>
|
|
|
<td class="support-partial">⚠️ 部分支持</td>
|
|
|
<td class="support-yes"><strong>推荐</strong></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><strong>Safari 11+</strong></td>
|
|
|
<td class="support-yes">✅ 完全支持</td>
|
|
|
<td class="support-yes">✅ 完全支持</td>
|
|
|
<td class="support-no">❌ 不支持</td>
|
|
|
<td class="support-partial">⚠️ 基本可用</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><strong>Edge 17+</strong></td>
|
|
|
<td class="support-yes">✅ 完全支持</td>
|
|
|
<td class="support-yes">✅ 完全支持</td>
|
|
|
<td class="support-yes">✅ 完全支持</td>
|
|
|
<td class="support-yes"><strong>推荐</strong></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><strong>旧版浏览器</strong></td>
|
|
|
<td class="support-partial">⚠️ 需要前缀</td>
|
|
|
<td class="support-no">❌ 不支持</td>
|
|
|
<td class="support-no">❌ 不支持</td>
|
|
|
<td class="support-partial">⚠️ 兼容模式</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
<div class="section">
|
|
|
<h3>🔧 解决方案与建议</h3>
|
|
|
|
|
|
<h4>1. 最佳解决方案 - 升级浏览器</h4>
|
|
|
<div class="solution-box">
|
|
|
<p><strong>推荐使用以下现代浏览器：</strong></p>
|
|
|
<ul style="margin: 10px 0 0 20px;">
|
|
|
<li>🌐 <strong>Chrome</strong> 版本 53 或更高</li>
|
|
|
<li>🦊 <strong>Firefox</strong> 版本 36 或更高</li>
|
|
|
<li>🧭 <strong>Safari</strong> 版本 11 或更高（iOS/macOS）</li>
|
|
|
<li>⭐ <strong>Edge</strong> 版本 17 或更高</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<h4>2. 兼容模式使用方法</h4>
|
|
|
<div class="warning-box">
|
|
|
<p><strong>如果无法升级浏览器，请按以下步骤操作：</strong></p>
|
|
|
<ol style="margin: 10px 0 0 20px;">
|
|
|
<li>忽略"设备扫描失败"的提示</li>
|
|
|
<li>点击"📷 选择设备"按钮</li>
|
|
|
<li>在设备列表中选择"默认摄像头"、"后置摄像头"或"前置摄像头"</li>
|
|
|
<li>点击"使用选中设备"测试摄像头功能</li>
|
|
|
<li>如果某个选项不工作，尝试其他选项</li>
|
|
|
</ol>
|
|
|
</div>
|
|
|
|
|
|
<h4>3. 移动设备特别说明</h4>
|
|
|
<div class="solution-box">
|
|
|
<p><strong>移动设备用户请注意：</strong></p>
|
|
|
<ul style="margin: 10px 0 0 20px;">
|
|
|
<li>📱 <strong>Android</strong>：建议使用 Chrome 浏览器</li>
|
|
|
<li>🍎 <strong>iOS</strong>：建议使用 Safari 浏览器</li>
|
|
|
<li>🔒 确保在 HTTPS 环境下访问（已自动配置）</li>
|
|
|
<li>🎥 允许摄像头权限访问</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="section">
|
|
|
<h3>🚨 常见问题排除</h3>
|
|
|
|
|
|
<div class="feature-list">
|
|
|
<li>
|
|
|
<span class="status-indicator status-error"></span>
|
|
|
<strong>完全无法访问摄像头</strong>
|
|
|
<br><small>检查浏览器是否支持getUserMedia，尝试升级浏览器或使用HTTPS访问</small>
|
|
|
</li>
|
|
|
<li>
|
|
|
<span class="status-indicator status-warning"></span>
|
|
|
<strong>无法枚举设备但能使用摄像头</strong>
|
|
|
<br><small>正常现象，使用兼容模式的默认设备选项即可</small>
|
|
|
</li>
|
|
|
<li>
|
|
|
<span class="status-indicator status-warning"></span>
|
|
|
<strong>权限被拒绝</strong>
|
|
|
<br><small>检查浏览器权限设置，清除网站数据后重新允许权限</small>
|
|
|
</li>
|
|
|
<li>
|
|
|
<span class="status-indicator status-error"></span>
|
|
|
<strong>摄像头被占用</strong>
|
|
|
<br><small>关闭其他使用摄像头的应用程序或浏览器标签页</small>
|
|
|
</li>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="section">
|
|
|
<h3>🧪 测试工具</h3>
|
|
|
<p>使用以下工具测试您的浏览器兼容性和摄像头功能：</p>
|
|
|
<div style="margin-top: 20px;">
|
|
|
<a href="camera_permission_test.html" class="btn">📷 摄像头权限测试</a>
|
|
|
<a href="mobile_client.html" class="btn btn-secondary">🚁 返回移动终端</a>
|
|
|
<button class="btn" onclick="testCurrentBrowser()">🔍 重新检测浏览器</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
function testCurrentBrowser() {
|
|
|
const browserInfo = document.getElementById('browserInfo');
|
|
|
|
|
|
const compatibility = {
|
|
|
mediaDevices: !!navigator.mediaDevices,
|
|
|
getUserMedia: !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia),
|
|
|
enumerateDevices: !!(navigator.mediaDevices && navigator.mediaDevices.enumerateDevices),
|
|
|
permissions: !!navigator.permissions,
|
|
|
isSecure: location.protocol === 'https:' || location.hostname === 'localhost',
|
|
|
userAgent: navigator.userAgent
|
|
|
};
|
|
|
|
|
|
// 检测浏览器类型
|
|
|
let browserName = 'Unknown Browser';
|
|
|
let browserVersion = 'Unknown Version';
|
|
|
|
|
|
if (navigator.userAgent.includes('Chrome') && !navigator.userAgent.includes('Edg')) {
|
|
|
browserName = 'Chrome';
|
|
|
const match = navigator.userAgent.match(/Chrome\/(\d+)/);
|
|
|
if (match) browserVersion = match[1];
|
|
|
} else if (navigator.userAgent.includes('Firefox')) {
|
|
|
browserName = 'Firefox';
|
|
|
const match = navigator.userAgent.match(/Firefox\/(\d+)/);
|
|
|
if (match) browserVersion = match[1];
|
|
|
} else if (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')) {
|
|
|
browserName = 'Safari';
|
|
|
const match = navigator.userAgent.match(/Version\/(\d+)/);
|
|
|
if (match) browserVersion = match[1];
|
|
|
} else if (navigator.userAgent.includes('Edg')) {
|
|
|
browserName = 'Edge';
|
|
|
const match = navigator.userAgent.match(/Edg\/(\d+)/);
|
|
|
if (match) browserVersion = match[1];
|
|
|
}
|
|
|
|
|
|
// 生成检测结果
|
|
|
let resultHtml = `
|
|
|
<h4>🔍 检测结果</h4>
|
|
|
<p><strong>浏览器：</strong> ${browserName} ${browserVersion}</p>
|
|
|
<div style="margin: 15px 0;">
|
|
|
`;
|
|
|
|
|
|
const features = [
|
|
|
{ name: 'MediaDevices API', supported: compatibility.mediaDevices, critical: true },
|
|
|
{ name: 'getUserMedia方法', supported: compatibility.getUserMedia, critical: true },
|
|
|
{ name: '设备枚举功能', supported: compatibility.enumerateDevices, critical: false },
|
|
|
{ name: '权限查询API', supported: compatibility.permissions, critical: false },
|
|
|
{ name: 'HTTPS安全环境', supported: compatibility.isSecure, critical: true }
|
|
|
];
|
|
|
|
|
|
features.forEach(feature => {
|
|
|
const status = feature.supported ?
|
|
|
'<span class="status-indicator status-ok"></span>✅ 支持' :
|
|
|
'<span class="status-indicator status-error"></span>❌ 不支持';
|
|
|
const importance = feature.critical ? ' (必需)' : ' (可选)';
|
|
|
resultHtml += `<div style="margin: 8px 0;">${status} <strong>${feature.name}</strong>${importance}</div>`;
|
|
|
});
|
|
|
|
|
|
resultHtml += '</div>';
|
|
|
|
|
|
// 给出建议
|
|
|
const criticalIssues = features.filter(f => f.critical && !f.supported);
|
|
|
if (criticalIssues.length === 0) {
|
|
|
if (compatibility.enumerateDevices) {
|
|
|
resultHtml += '<div class="solution-box"><strong>✅ 您的浏览器完全兼容！</strong><br>可以正常使用所有摄像头功能。</div>';
|
|
|
} else {
|
|
|
resultHtml += '<div class="warning-box"><strong>⚠️ 基本兼容</strong><br>摄像头功能正常，但需要使用兼容模式进行设备选择。</div>';
|
|
|
}
|
|
|
} else {
|
|
|
resultHtml += `<div class="error-box"><strong>❌ 兼容性问题</strong><br>检测到 ${criticalIssues.length} 个关键功能不支持，建议升级浏览器。</div>`;
|
|
|
}
|
|
|
|
|
|
browserInfo.innerHTML = resultHtml;
|
|
|
}
|
|
|
|
|
|
// 页面加载时自动检测
|
|
|
window.onload = function () {
|
|
|
testCurrentBrowser();
|
|
|
};
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
</html> |
