<template>
<div class="
camera-container">
<!
-- 视频播放区域
-->
<video ref="videoPlayer" controls autoplay muted playsinline></video><!
--autoplay是规定一旦视频就绪马上开始播放。muted
输出视频静音，playsinline指明视频将内嵌（inline）播放,controls会在视频底部提供一个控制面板
-->
<!
-- 控制面板
-->
<div class="controls">
<input
v
-model="
cameraUrl"
placeholder="rtsp://username:password@ip:port/stream"
class="url
-input"
/>
<button @click="connect
Camera" :disabled="isConnecting">
{{ isConnecting ? '连接中...' : '连接摄像头' }}
</button>
<button @click="disconnect
Camera" :disabled="!isConnected">断开连接</button>
<!
-- 状态指示器
-->
<div class="status
-indicator" :class="connectionStatusClass">
{{ connectionStatusText }}
</div>
</div>
<!
-- 错误提示
-->
<div v
-if="
errorMessage" class="
error-message">
{{
errorMessage }}
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, computed, onBeforeUnmount } from 'vue';
import flvjs from 'flv.js'; // 安装: npm install flv.js
// 定义摄像头连接状态类型
type ConnectionStatus = 'disconnected' | 'connecting' | 'connected' | '
error';
export default defineComponent({
name: 'Ip
CameraViewer',
setup() {
// 使用TypeScript类型声明
const videoPlayer = ref<HTMLVideoElement | null>(null);
const flvPlayer = ref<any>(null);
const
cameraUrl = ref('rtsp://admin:12345@192.168.1.100:554/Streaming/Channels/101');
const connectionStatus = ref<ConnectionStatus>('disconnected');
const
errorMessage = ref<string>('');
const reconnectAttempts = ref(0);
const maxReconnectAttempts = 3;
// 计算属性：连接状态文本
const connectionStatusText = computed(() => {
switch (connectionStatus.value) {
case 'disconnected': return '未连接';
case 'connecting': return '连接中...';
case 'connected': return '已连接';
case '
error': return '连接错误';
default: return '未知状态';
}
});
// 计算属性：连接状态对应的CSS类
const connectionStatusClass = computed(() => {
return `status
-${connectionStatus.value}`;
});
// 计算属性：是否正在连接
const isConnecting = computed(() => {
return connectionStatus.value === 'connecting';
});
// 计算属性：是否已连接
const isConnected = computed(() => {
return connectionStatus.value === 'connected';
});
// 连接摄像头
const connect
Camera = async () => {
try {
// 重置状态
errorMessage.value = '';
connectionStatus.value = 'connecting';
reconnectAttempts.value = 0;
// 断开现有连接
disconnect
Camera();
// 验证URL格式
if (!validate
CameraUrl(
cameraUrl.value)) {
throw new
Error('摄像头URL格式无效');
}
// 检查FLV支持
if (!flvjs.isSupported()) {
throw new
Error('当前浏览器不支持FLV播放');
}
// 创建FLV播放器
flvPlayer.value = flvjs.createPlayer({
type: 'flv',
isLive: true,
url: getStreamProxyUrl(
cameraUrl.value)
}, {
enableStashBuffer: false, // 禁用缓冲以减少延迟
autoCleanupSourceBuffer: true
});
// 添加事件监听器
flvPlayer.value.on(flvjs.Events.
ERROR, handlePlayer
Error);
flvPlayer.value.on(flvjs.Events.METADATA_ARRIVED, () => {
console.log('流媒体元数据已接收');
});
// 绑定视频元素并播放
if (videoPlayer.value) {
flvPlayer.value.attachMediaElement(videoPlayer.value);
flvPlayer.value.load();
// 尝试播放
const playPromise = flvPlayer.value.play();
if (playPromise !== undefined) {
playPromise.catch((err: unknown) => {
handlePlayer
Error(flvjs.
ErrorTypes.NETWORK_
ERROR, err);
});
}
connectionStatus.value = 'connected';
}
} catch (
error) {
handleConnection
Error(
error as
Error);
}
};
// 断开连接
const disconnect
Camera = () => {
if (flvPlayer.value) {
flvPlayer.value.pause();
flvPlayer.value.unload();
flvPlayer.value.detachMediaElement();
flvPlayer.value.destroy();
flvPlayer.value = null;
}
connectionStatus.value = 'disconnected';
};
// 处理播放器错误
const handlePlayer
Error = (type: string, detail: any) => {
console.
error('FLV播放器错误:', type, detail);
// 根据错误类型处理
if (type === flvjs.
ErrorTypes.NETWORK_
ERROR) {
errorMessage.value = '网络错误: 无法连接到视频流';
} else if (type === flvjs.
ErrorTypes.MEDIA_
ERROR) {
errorMessage.value = '媒体错误: 流格式不受支持';
} else {
errorMessage.value = `播放器错误: ${detail || '未知错误'}`;
}
connectionStatus.value = '
error';
// 尝试重新连接
if (reconnectAttempts.value < maxReconnectAttempts) {
reconnectAttempts.value += 1;
setTimeout(() => {
if (connectionStatus.value !== 'connected') {
connect
Camera();
}
}, 2000 * reconnectAttempts.value); // 指数退避重连
}
};
// 处理连接错误
const handleConnection
Error = (
error:
Error) => {
console.
error('摄像头连接错误:',
error);
errorMessage.value =
error.message || '连接摄像头失败';
connectionStatus.value = '
error';
// 尝试重新连接
if (reconnectAttempts.value < maxReconnectAttempts) {
reconnectAttempts.value += 1;
setTimeout(connect
Camera, 3000);
}
};
// 验证摄像头URL格式
const validate
CameraUrl = (url: string): boolean => {
try {
const rtspRegex = /^rtsp:\/\/.+/i;
return rtspRegex.
test(url);
} catch {
return false;
}
};
// 获取流代理URL（实际项目中应调用后端API）
const getStreamProxyUrl = (originalUrl: string): string => {
// 在实际应用中，这里应该调用后端服务将RTSP转为HTTP
-FLV
// 示例中仅做URL编码处理
return `http://your
-proxy
-server/live?url=${encodeURIComponent(originalUrl)}`;
};
// 组件卸载时自动断开连接
onBeforeUnmount(() => {
disconnect
Camera();
});
return {
videoPlayer,
cameraUrl,
connectionStatus,
connectionStatusText,
connectionStatusClass,
errorMessage,
isConnecting,
isConnected,
connect
Camera,
disconnect
Camera
};
}
});
</script>
<style scoped>
.
camera-container {
max
-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
border
-radius: 8px;
}
video {
width: 100%;
background: #000;
border
-radius: 4px;
}
.controls {
margin
-top: 15px;
display: flex;
flex
-wrap: wrap;
gap: 10px;
align
-items: center;
}
.url
-input {
flex: 1;
min
-width: 300px;
padding: 8px 12px;
border: 1px solid #ddd;
border
-radius: 4px;
}
button {
padding: 8px 15px;
background: #42b983;
color: white;
border: none;
border
-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
button:disabled {
background: #cccccc;
cursor: not
-allowed;
}
button:not(:disabled):hover {
background: #359c6f;
}
.status
-indicator {
padding: 5px 10px;
border
-radius: 4px;
font
-size: 0.9em;
}
.status
-disconnected {
background: #ffdddd;
color: #cc0000;
}
.status
-connecting {
background: #fff8dd;
color: #e6b800;
}
.status
-connected {
background: #ddffdd;
color: #00aa00;
}
.status
-error {
background: #ffdddd;
color: #cc0000;
}
.
error-message {
margin
-top: 10px;
padding: 10px;
background: #ffebee;
color: #b71c1c;
border
-radius: 4px;
}
</style>
本文介绍了epuck机器人中摄像头驱动出现的错误及其解决方案。主要问题是驱动无法正确获取摄像头的帧宽度和高度，并出现了VIDIOC_QUERYMENU: Invalid argument错误。通过调整摄像头的访问权限和重新安装v4lc-utils及重新编译OpenCV来解决这些问题。
扫一扫
1558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
