<template>
<div class="camera-container">
<!-- 视频播放区域 -->
<video ref="videoPlayer" controls autoplay muted playsinline></video><!--autoplay是规定一旦视频就绪马上开始播放。muted
输出视频静音，playsinline指明视频将内嵌（inline）播放,controls会在视频底部提供一个控制面板-->
<!-- 控制面板 -->
<div class="controls">
<input
v-model="camera
Url"
placeholder="rtsp
://username
:password@ip
:port/
stream"
class="
url-input"
/>
<button @click="connectCamera"
:disabled="isConnecting">
{{ isConnecting ? &
#39;连接中
...&
#39;
: &
#39;连接摄像头&
#39; }}
</button>
<button @click="disconnectCamera"
: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 &
#39;vue&
#39;;
import flvjs from &
#39;flv
.js&
#39;; // 安装
: npm install flv
.js
// 定义摄像头连接状态类型
type ConnectionStatus = &
#39;disconnected&
#39; | &
#39;connecting&
#39; | &
#39;connected&
#39; | &
#39;
error&
#39;;
export default defineComponent({
name
: &
#39;IpCameraViewer&
#39;,
setup() {
//
使用TypeScript类型声明
const videoPlayer = ref<HTMLVideoElement | null>(null);
const flvPlayer = ref<any>(null);
const camera
Url = ref(&
#39;rtsp
://admin
:123
45@192
.168
.1
.100
:55
4/
Streaming/Channels/101&
#39;);
const connectionStatus = ref<ConnectionStatus>(&
#39;disconnected&
#39;);
const
errorMessage = ref<string>(&
#39;&
#39;);
const reconnectAttempts = ref(0);
const maxReconnectAttempts = 3;
// 计算属性：连接状态文本
const connectionStatusText = computed(() => {
switch (connectionStatus
.value) {
case &
#39;disconnected&
#39;
: return &
#39;未连接&
#39;;
case &
#39;connecting&
#39;
: return &
#39;连接中
...&
#39;;
case &
#39;connected&
#39;
: return &
#39;已连接&
#39;;
case &
#39;
error&
#39;
: return &
#39;连接错误&
#39;;
default
: return &
#39;未知状态&
#39;;
}
});
// 计算属性：连接状态对应的CSS类
const connectionStatusClass = computed(() => {
return `status-${connectionStatus
.value}`;
});
// 计算属性：是否正在连接
const isConnecting = computed(() => {
return connectionStatus
.value === &
#39;connecting&
#39;;
});
// 计算属性：是否已连接
const isConnected = computed(() => {
return connectionStatus
.value === &
#39;connected&
#39;;
});
// 连接摄像头
const connectCamera = async () => {
try {
// 重置状态
errorMessage
.value = &
#39;&
#39;;
connectionStatus
.value = &
#39;connecting&
#39;;
reconnectAttempts
.value = 0;
// 断开现有连接
disconnectCamera();
// 验证
URL格式
if (!validateCamera
Url(camera
Url.value)) {
throw new
Error(&
#39;摄像头
URL格式无效&
#39;);
}
// 检查FLV支持
if (!flvjs
.isSupported()) {
throw new
Error(&
#39;当前浏览器不支持FLV播放&
#39;);
}
// 创建FLV播放器
flvPlayer
.value = flvjs
.createPlayer({
type
: &
#39;flv&
#39;,
isLive
: true,
url: get
StreamProxy
Url(camera
Url.value)
}, {
enableStashBuffer
: false, // 禁用缓冲以减少延迟
autoCleanupSourceBuffer
: true
});
// 添加事件监听器
flvPlayer
.value
.on(flvjs
.Events
.ERROR, handlePlayer
Error);
flvPlayer
.value
.on(flvjs
.Events
.METADATA_ARRIVED, () => {
console
.log(&
#39;流媒体元数据已接收&
#39;);
});
// 绑定视频元素并播放
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 = &
#39;connected&
#39;;
}
} catch (
error) {
handleConnection
Error(
error as
Error);
}
};
// 断开连接
const disconnectCamera = () => {
if (flvPlayer
.value) {
flvPlayer
.value
.pause();
flvPlayer
.value
.unload();
flvPlayer
.value
.detachMediaElement();
flvPlayer
.value
.destroy();
flvPlayer
.value = null;
}
connectionStatus
.value = &
#39;disconnected&
#39;;
};
// 处理播放器错误
const handlePlayer
Error = (type
: string, detail
: any) => {
console
.error(&
#39;FLV播放器错误
:&
#39;, type, detail);
// 根据错误类型处理
if (type === flvjs
.ErrorTypes
.NETWORK_
ERROR) {
errorMessage
.value = &
#39;网络错误
: 无法连接到视频流&
#39;;
} else if (type === flvjs
.ErrorTypes
.MEDIA_
ERROR) {
errorMessage
.value = &
#39;媒体错误
: 流格式不受支持&
#39;;
} else {
errorMessage
.value = `播放器错误
: ${detail || &
#39;未知错误&
#39;}`;
}
connectionStatus
.value = &
#39;
error&
#39;;
// 尝试重新连接
if (reconnectAttempts
.value < maxReconnectAttempts) {
reconnectAttempts
.value += 1;
setTimeout(() => {
if (connectionStatus
.value !== &
#39;connected&
#39;) {
connectCamera();
}
}, 2000 * reconnectAttempts
.value); // 指数退避重连
}
};
// 处理连接错误
const handleConnection
Error = (
error: Error) => {
console
.error(&
#39;摄像头连接错误
:&
#39;,
error);
errorMessage
.value =
error.message || &
#39;连接摄像头失败&
#39;;
connectionStatus
.value = &
#39;
error&
#39;;
// 尝试重新连接
if (reconnectAttempts
.value < maxReconnectAttempts) {
reconnectAttempts
.value += 1;
setTimeout(connectCamera, 3000);
}
};
// 验证摄像头
URL格式
const validateCamera
Url = (
url: string)
: boolean => {
try {
const rtspRegex = /^rtsp
:\/\/
.+/i;
return rtspRegex
.test(
url);
} catch {
return false;
}
};
// 获取流代理
URL（实际项目中应调用后端API）
const get
StreamProxy
Url = (original
Url: string)
: string => {
// 在实际应用中，这里应该调用后端服务将RTSP转为HTTP-FLV
// 示例中仅做
URL编码处理
return `http
://your-proxy-server/live?
url=${encodeURIComponent(original
Url)}`;
};
// 组件卸载时自动断开连接
onBeforeUnmount(() => {
disconnectCamera();
});
return {
videoPlayer,
camera
Url,
connectionStatus,
connectionStatusText,
connectionStatusClass,
errorMessage,
isConnecting,
isConnected,
connectCamera,
disconnectCamera
};
}
});
</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>
本文探讨了在Flex4 Cookbook中遇到的SWFLoader事件处理问题。作者尝试使用Flex编译SWF文件作为加载目标时遇到了运行错误。通过调整编译设置，将资源文件一并编译进SWF，成功解决了“Error#2032: StreamError.URL”错误。
扫一扫
3134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
