|
|
/**
|
|
|
* 摄像头管理器 - 优先通过API获取摄像头列表
|
|
|
* 支持降级到流列表显示
|
|
|
*/
|
|
|
class CameraManager {
|
|
|
constructor() {
|
|
|
this.cameras = [];
|
|
|
this.streams = [];
|
|
|
this.loadingIndicator = document.getElementById('loading-indicator');
|
|
|
this.cameraContainer = document.getElementById('camera-list-container');
|
|
|
this.streamContainer = document.getElementById('stream-list-container');
|
|
|
this.init();
|
|
|
}
|
|
|
|
|
|
async init() {
|
|
|
try {
|
|
|
// 优先尝试获取摄像头列表
|
|
|
await this.loadCameras();
|
|
|
} catch (error) {
|
|
|
console.warn('摄像头API不可用，降级到流列表:', error);
|
|
|
// 降级到流列表
|
|
|
await this.loadStreams();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async loadCameras() {
|
|
|
try {
|
|
|
const response = await fetch('/cameras');
|
|
|
if (!response.ok) {
|
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
|
}
|
|
|
|
|
|
const data = await response.json();
|
|
|
if (data.cameras && data.cameras.length > 0) {
|
|
|
this.cameras = data.cameras;
|
|
|
this.renderCameras();
|
|
|
this.updateTitle(`摄像头 (${this.cameras.length})`);
|
|
|
} else {
|
|
|
throw new Error('摄像头列表为空');
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('加载摄像头失败:', error);
|
|
|
throw error;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async loadStreams() {
|
|
|
try {
|
|
|
const response = await fetch('/streams');
|
|
|
if (!response.ok) {
|
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
|
}
|
|
|
|
|
|
const data = await response.json();
|
|
|
if (data.status === 1 && data.payload) {
|
|
|
this.streams = Object.entries(data.payload).map(([key, value]) => ({
|
|
|
id: key,
|
|
|
...value
|
|
|
}));
|
|
|
this.showStreamFallback();
|
|
|
this.updateTitle(`视频流 (${this.streams.length})`);
|
|
|
} else {
|
|
|
this.showEmptyState();
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('加载流列表失败:', error);
|
|
|
this.showEmptyState();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
renderCameras() {
|
|
|
this.hideLoading();
|
|
|
this.cameraContainer.style.display = 'flex';
|
|
|
this.cameraContainer.innerHTML = '';
|
|
|
|
|
|
this.cameras.forEach(camera => {
|
|
|
const cameraCard = this.createCameraCard(camera);
|
|
|
this.cameraContainer.appendChild(cameraCard);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
createCameraCard(camera) {
|
|
|
const col = document.createElement('div');
|
|
|
col.className = 'col-12 col-sm-6 col-md-3';
|
|
|
col.id = `camera-${camera.id || camera.camera_id}`;
|
|
|
|
|
|
const statusClass = camera.status === 'online' ? 'badge-success' : 'badge-secondary';
|
|
|
const statusText = camera.status === 'online' ? '在线' : '离线';
|
|
|
const enabledBadge = camera.enabled ?
|
|
|
'<span class="badge badge-success ml-1">已启用</span>' :
|
|
|
'<span class="badge badge-warning ml-1">已禁用</span>';
|
|
|
|
|
|
// 构建播放按钮
|
|
|
const playButtons = this.createPlayButtons(camera);
|
|
|
|
|
|
col.innerHTML = `
|
|
|
<div class="card card-outline ${camera.status === 'online' ? 'card-success' : 'card-secondary'}">
|
|
|
<div class="card-header">
|
|
|
<h3 class="card-title one-line-header">${camera.name || camera.camera_name || '未命名摄像头'}</h3>
|
|
|
<div class="card-tools">
|
|
|
<span class="badge ${statusClass}">${statusText}</span>
|
|
|
${enabledBadge}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card-body p-0">
|
|
|
<div class="camera-preview">
|
|
|
<img class="d-block w-100 stream-img fix-height"
|
|
|
src="/../static/img/noimage.svg"
|
|
|
alt="${camera.name || camera.camera_name}">
|
|
|
<div class="camera-info p-2">
|
|
|
<small class="text-muted">
|
|
|
<strong>IP:</strong> ${camera.ip}<br>
|
|
|
<strong>类型:</strong> ${camera.device_type || '网络摄像头'}<br>
|
|
|
${camera.unit_code ? `<strong>单位:</strong> ${camera.unit_code}<br>` : ''}
|
|
|
</small>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-12">
|
|
|
<div class="btn-group stream">
|
|
|
${playButtons}
|
|
|
<a class="btn btn-secondary btn-flat btn-xs" href="/pages/cameras" title="管理摄像头">
|
|
|
<i class="fas fa-cog"></i> 管理
|
|
|
</a>
|
|
|
${camera.enabled ?
|
|
|
`<a class="btn btn-info btn-flat btn-xs" href="/pages/player/all/${camera.id || camera.camera_id}/0" title="预览">
|
|
|
<i class="fas fa-eye"></i> 预览
|
|
|
</a>` :
|
|
|
'<span class="btn btn-secondary btn-flat btn-xs disabled">已禁用</span>'
|
|
|
}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
`;
|
|
|
|
|
|
return col;
|
|
|
}
|
|
|
|
|
|
createPlayButtons(camera) {
|
|
|
if (!camera.enabled || camera.status !== 'online') {
|
|
|
return '<span class="btn btn-secondary btn-flat btn-xs disabled">离线</span>';
|
|
|
}
|
|
|
|
|
|
const cameraId = camera.id || camera.camera_id;
|
|
|
return `
|
|
|
<a class="btn btn-info btn-flat btn-xs" href="/pages/player/mse/${cameraId}/0">
|
|
|
<i class="fas fa-play"></i> MSE
|
|
|
</a>
|
|
|
<a class="btn btn-info btn-flat btn-xs" href="/pages/player/hls/${cameraId}/0">
|
|
|
<i class="fas fa-play"></i> HLS
|
|
|
</a>
|
|
|
<a class="btn btn-info btn-flat btn-xs" href="/pages/player/webrtc/${cameraId}/0">
|
|
|
<i class="fas fa-play"></i> WebRTC
|
|
|
</a>
|
|
|
<a class="btn btn-info btn-flat btn-xs" href="/pages/player/all/${cameraId}/0">
|
|
|
<i class="fas fa-play"></i> ALL
|
|
|
</a>
|
|
|
`;
|
|
|
}
|
|
|
|
|
|
showStreamFallback() {
|
|
|
this.hideLoading();
|
|
|
this.streamContainer.style.display = 'flex';
|
|
|
console.info('使用流列表降级方案');
|
|
|
}
|
|
|
|
|
|
showEmptyState() {
|
|
|
this.hideLoading();
|
|
|
this.cameraContainer.style.display = 'flex';
|
|
|
this.cameraContainer.innerHTML = `
|
|
|
<div class="col-12">
|
|
|
<div class="alert alert-info text-center">
|
|
|
<i class="fas fa-info-circle"></i>
|
|
|
暂无可用的摄像头或视频流
|
|
|
<br><br>
|
|
|
<a href="/pages/cameras" class="btn btn-primary btn-sm">
|
|
|
<i class="fas fa-plus"></i> 添加摄像头
|
|
|
</a>
|
|
|
<a href="/pages/stream/add" class="btn btn-success btn-sm ml-2">
|
|
|
<i class="fas fa-plus"></i> 添加流
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
`;
|
|
|
}
|
|
|
|
|
|
hideLoading() {
|
|
|
if (this.loadingIndicator) {
|
|
|
this.loadingIndicator.style.display = 'none';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
updateTitle(title) {
|
|
|
const titleElement = document.querySelector('h5.mt-4.mb-2');
|
|
|
if (titleElement) {
|
|
|
titleElement.textContent = title;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 刷新摄像头列表
|
|
|
async refresh() {
|
|
|
this.showLoading();
|
|
|
await this.init();
|
|
|
}
|
|
|
|
|
|
showLoading() {
|
|
|
this.cameraContainer.style.display = 'none';
|
|
|
this.streamContainer.style.display = 'none';
|
|
|
this.loadingIndicator.style.display = 'flex';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 页面加载完成后初始化
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
// 确保在其他脚本加载后再初始化
|
|
|
setTimeout(() => {
|
|
|
window.cameraManager = new CameraManager();
|
|
|
}, 100);
|
|
|
});
|
|
|
|
|
|
// 为Java项目集成提供的全局API
|
|
|
window.RTSPtoWebAPI = {
|
|
|
// 获取摄像头列表
|
|
|
async getCameras() {
|
|
|
const response = await fetch('/cameras');
|
|
|
if (!response.ok) {
|
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
|
}
|
|
|
return await response.json();
|
|
|
},
|
|
|
|
|
|
// 获取流列表
|
|
|
async getStreams() {
|
|
|
const response = await fetch('/streams');
|
|
|
if (!response.ok) {
|
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
|
}
|
|
|
return await response.json();
|
|
|
},
|
|
|
|
|
|
// 获取特定摄像头信息
|
|
|
async getCamera(cameraId) {
|
|
|
const response = await fetch(`/camera/${cameraId}`);
|
|
|
if (!response.ok) {
|
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
|
}
|
|
|
return await response.json();
|
|
|
},
|
|
|
|
|
|
// 添加摄像头
|
|
|
async addCamera(cameraData) {
|
|
|
const response = await fetch('/camera/add', {
|
|
|
method: 'POST',
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json'
|
|
|
},
|
|
|
body: JSON.stringify(cameraData)
|
|
|
});
|
|
|
if (!response.ok) {
|
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
|
}
|
|
|
return await response.json();
|
|
|
},
|
|
|
|
|
|
// 更新摄像头
|
|
|
async updateCamera(cameraId, cameraData) {
|
|
|
const response = await fetch(`/camera/${cameraId}`, {
|
|
|
method: 'PUT',
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json'
|
|
|
},
|
|
|
body: JSON.stringify(cameraData)
|
|
|
});
|
|
|
if (!response.ok) {
|
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
|
}
|
|
|
return await response.json();
|
|
|
},
|
|
|
|
|
|
// 删除摄像头
|
|
|
async deleteCamera(cameraId) {
|
|
|
const response = await fetch(`/camera/${cameraId}`, {
|
|
|
method: 'DELETE'
|
|
|
});
|
|
|
if (!response.ok) {
|
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
|
}
|
|
|
return await response.json();
|
|
|
},
|
|
|
|
|
|
// 刷新摄像头状态
|
|
|
async refreshCameras() {
|
|
|
const response = await fetch('/cameras/refresh', {
|
|
|
method: 'POST'
|
|
|
});
|
|
|
if (!response.ok) {
|
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
|
}
|
|
|
return await response.json();
|
|
|
},
|
|
|
|
|
|
// 获取播放URL
|
|
|
getPlayUrl(cameraId, channel = 0, type = 'hls') {
|
|
|
const baseUrl = window.location.origin;
|
|
|
switch (type.toLowerCase()) {
|
|
|
case 'hls':
|
|
|
return `${baseUrl}/stream/${cameraId}/channel/${channel}/hls/live/index.m3u8`;
|
|
|
case 'webrtc':
|
|
|
return `${baseUrl}/pages/player/webrtc/${cameraId}/${channel}`;
|
|
|
case 'mse':
|
|
|
return `${baseUrl}/pages/player/mse/${cameraId}/${channel}`;
|
|
|
default:
|
|
|
return `${baseUrl}/pages/player/all/${cameraId}/${channel}`;
|
|
|
}
|
|
|
}
|
|
|
}; |
