feat: enhance Cloudflare Stream player with PTZ control integration

- Add PTZ control panel to the Cloudflare Stream interface for camera movement
- Implement PTZ direction buttons with event handling for user interaction
- Update player layout to accommodate PTZ controls alongside the video player
- Introduce reactive PTZ configuration for camera connection management
- Enhance styling for PTZ controls to improve user experience

src/views/demo/cloudflare-stream.vue

@@ -37,28 +37,69 @@
       </el-form>
     </div>
 
-    <!-- 播放器区域 -->
-    <div class="player-section">
-      <div v-if="!currentSrc && !currentVideoId" class="player-placeholder">
-        <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
-        <p>请输入 Video ID 并点击播放</p>
+    <!-- 播放器和PTZ控制区域 -->
+    <div class="player-ptz-container">
+      <!-- 播放器区域 -->
+      <div class="player-section">
+        <div v-if="!currentSrc && !currentVideoId" class="player-placeholder">
+          <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
+          <p>请输入 Video ID 并点击播放</p>
+        </div>
+        <VideoPlayer
+          v-else
+          ref="playerRef"
+          :player-type="currentPlayerType"
+          :video-id="currentVideoId"
+          :customer-domain="cfConfig.customerDomain"
+          :src="currentSrc"
+          :use-iframe="useIframe"
+          :autoplay="playConfig.autoplay"
+          :muted="playConfig.muted"
+          :controls="true"
+          @play="onPlay"
+          @pause="onPause"
+          @error="onError"
+          @loadedmetadata="onLoaded"
+        />
+      </div>
+
+      <!-- PTZ 云台控制 -->
+      <div class="ptz-panel">
+        <div class="ptz-header">
+          <span>PTZ 云台控制</span>
+        </div>
+
+        <!-- PTZ 方向控制 九宫格 -->
+        <div class="ptz-controls">
+          <div class="ptz-btn" @mousedown="handlePTZ('UP_LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
+            <el-icon><TopLeft /></el-icon>
+          </div>
+          <div class="ptz-btn" @mousedown="handlePTZ('UP')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
+            <el-icon><Top /></el-icon>
+          </div>
+          <div class="ptz-btn" @mousedown="handlePTZ('UP_RIGHT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
+            <el-icon><TopRight /></el-icon>
+          </div>
+          <div class="ptz-btn" @mousedown="handlePTZ('LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
+            <el-icon><Back /></el-icon>
+          </div>
+          <div class="ptz-btn ptz-center" @click="handlePTZStop">
+            <el-icon><Refresh /></el-icon>
+          </div>
+          <div class="ptz-btn" @mousedown="handlePTZ('RIGHT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
+            <el-icon><Right /></el-icon>
+          </div>
+          <div class="ptz-btn" @mousedown="handlePTZ('DOWN_LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
+            <el-icon><BottomLeft /></el-icon>
+          </div>
+          <div class="ptz-btn" @mousedown="handlePTZ('DOWN')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
+            <el-icon><Bottom /></el-icon>
+          </div>
+          <div class="ptz-btn" @mousedown="handlePTZ('DOWN_RIGHT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
+            <el-icon><BottomRight /></el-icon>
+          </div>
+        </div>
       </div>
-      <VideoPlayer
-        v-else
-        ref="playerRef"
-        :player-type="currentPlayerType"
-        :video-id="currentVideoId"
-        :customer-domain="cfConfig.customerDomain"
-        :src="currentSrc"
-        :use-iframe="useIframe"
-        :autoplay="playConfig.autoplay"
-        :muted="playConfig.muted"
-        :controls="true"
-        @play="onPlay"
-        @pause="onPause"
-        @error="onError"
-        @loadedmetadata="onLoaded"
-      />
     </div>
 
     <!-- 播放控制 -->
@@ -109,8 +150,20 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import { ElMessage } from 'element-plus'
-import { VideoPlay } from '@element-plus/icons-vue'
+import {
+  VideoPlay,
+  Top,
+  Bottom,
+  Back,
+  Right,
+  TopLeft,
+  TopRight,
+  BottomLeft,
+  BottomRight,
+  Refresh
+} from '@element-plus/icons-vue'
 import VideoPlayer from '@/components/VideoPlayer.vue'
+import { startPTZ, stopPTZ, PTZ_DIRECTIONS } from '@/api/ptz'
 
 const playerRef = ref<InstanceType<typeof VideoPlayer>>()
 
@@ -128,6 +181,13 @@ const playConfig = reactive({
   muted: true
 })
 
+// PTZ 配置
+const ptzConfig = reactive({
+  host: '192.168.0.64',
+  username: 'admin',
+  password: 'Wxc767718929'
+})
+
 // 当前播放状态
 const currentSrc = ref('')
 const currentVideoId = ref('')
@@ -234,6 +294,43 @@ function onLoaded() {
 function onError(error: any) {
   addLog(`播放错误: ${JSON.stringify(error)}`, 'error')
 }
+
+// PTZ 控制
+async function handlePTZ(direction: keyof typeof PTZ_DIRECTIONS) {
+  if (!ptzConfig.host || !ptzConfig.username || !ptzConfig.password) {
+    ElMessage.warning('请先配置摄像头信息')
+    return
+  }
+
+  const result = await startPTZ(
+    {
+      host: ptzConfig.host,
+      username: ptzConfig.username,
+      password: ptzConfig.password
+    },
+    direction
+  )
+
+  if (result.success) {
+    addLog(`PTZ 移动: ${direction}`, 'info')
+  } else {
+    addLog(`PTZ 控制失败: ${result.error}`, 'error')
+  }
+}
+
+async function handlePTZStop() {
+  if (!ptzConfig.host) return
+
+  const result = await stopPTZ({
+    host: ptzConfig.host,
+    username: ptzConfig.username,
+    password: ptzConfig.password
+  })
+
+  if (!result.success) {
+    addLog(`PTZ 停止失败: ${result.error}`, 'error')
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -264,9 +361,15 @@ function onError(error: any) {
   border-radius: var(--radius-base);
 }
 
+.player-ptz-container {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
 .player-section {
+  flex: 1;
   height: 500px;
-  margin-bottom: 20px;
   border-radius: var(--radius-base);
   overflow: hidden;
   background-color: #000;
@@ -286,6 +389,64 @@ function onError(error: any) {
   }
 }
 
+.ptz-panel {
+  width: 200px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
+  padding: 15px;
+
+  .ptz-header {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 15px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .ptz-controls {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+  }
+
+  .ptz-btn {
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--bg-hover);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: all 0.2s;
+    color: var(--text-regular);
+
+    &:hover {
+      background-color: var(--color-primary-light-9);
+      border-color: var(--color-primary);
+      color: var(--color-primary);
+    }
+
+    &:active {
+      background-color: var(--color-primary);
+      color: #fff;
+    }
+
+    .el-icon {
+      font-size: 20px;
+    }
+  }
+
+  .ptz-center {
+    background-color: var(--bg-page);
+
+    &:hover {
+      background-color: var(--color-primary-light-9);
+    }
+  }
+}
+
 .control-section {
   padding: 15px 20px;
   background-color: var(--bg-container);