diff --git a/src/App.vue b/src/App.vue
index 2571479..eb46699 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,8 +3,13 @@
     <!-- 顶部导航 -->
     <header class="nav-bar">
       <span class="nav-title">Real-time Monitoring</span>
+      <select v-model="selectedDeviceId" class="device-select" @change="onDeviceChange">
+        <option v-for="device in deviceList" :key="device.DeviceId" :value="device.DeviceId">
+          {{ device.DeviceName }}
+        </option>
+      </select>
       <!-- <button class="layout-btn" @click="toggleLayout">
-        {{ layout === 1 ? '⊞ 四画面' : '⊡ 单画面' }}
+        {{ layout === 1 ? '⊞ Quad View' : '⊡ Single View' }}
       </button> -->
     </header>
 
@@ -15,8 +20,6 @@
         :key="i - 1"
         :ref="(el) => setBoxRef(el, i - 1)"
         :source="playingSources[i - 1] ? sourcesMap[playingSources[i - 1]!] : null"
-        :server-ip="config.serverIp"
-        :media-port="config.media_http_api"
         @close="closeVideo(i - 1)"
         @ready="onVideoReady($event, i - 1)"
       />
@@ -51,26 +54,33 @@
 import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
 import VideoBox from './components/VideoBox.vue'
 import { createApis } from './api'
-import type { GlobalConfig, SourceItem, VideoInfo } from './types'
+import type { GlobalConfig, SourceItem, VideoInfo, DeviceItem } from './types'
 
 declare const mqtt: any
 
 const deviceId = 'fcfabf1d5dd036033419057075a56304' // 设备 ID，实际使用中可动态获取
+const selectedDeviceId = ref<string>('')
+const deviceList = ref<DeviceItem[]>([])
+
+// const config = reactive<GlobalConfig>({
+//   serverIp: '118.145.200.78',
+//   getSources: ':3000/ks/source',
+//   subscribe: ':3000/stream/live/subscribe',
+//   resultTopic: 'ks/video_detection',
+//   streamInfoTopic: 'ks/stream_local',
+//   media_http_api: 3001,
+//   websocket: 8083,
+//   mqttAuth: ['work', 'Bjhmdys@202010'],
+//   accessKey: '6952564ceb712e2daeea7039',
+//   accessSecret: 'df717a60-85b7-4a63-b638-0aed4605d277',
+//   token: '',
+//   getToken: ':3000/ks/system/user/token',
+//   getTime: ':3000/ks/system/time',
+// })】
 
 const config = reactive<GlobalConfig>({
-  serverIp: '118.145.200.78',
-  getSources: ':3000/ks/source',
-  subscribe: ':3000/stream/live/subscribe',
   resultTopic: 'ks/video_detection',
   streamInfoTopic: 'ks/stream_local',
-  media_http_api: 3001,
-  websocket: 8083,
-  mqttAuth: ['work', 'Bjhmdys@202010'],
-  accessKey: '6952564ceb712e2daeea7039',
-  accessSecret: 'df717a60-85b7-4a63-b638-0aed4605d277',
-  token: '',
-  getToken: ':3000/ks/system/user/token',
-  getTime: ':3000/ks/system/time',
 })
 
 const layout = ref<1 | 4>(1)
@@ -83,7 +93,7 @@ const playingSources = reactive<(string | null)[]>([null, null, null, null])
 const boxRefs: (InstanceType<typeof VideoBox> | null)[] = [null, null, null, null]
 
 let mqttClient: any = null
-let apis = createApis(config)
+let apis = createApis()
 
 function setBoxRef(el: any, index: number) {
   boxRefs[index] = el
@@ -197,21 +207,35 @@ async function connectMqtt() {
   })
 }
 
+function onDeviceChange() {
+  // 切换设备时关闭所有视频
+  for (let i = 0; i < 4; i++) {
+    if (playingSources[i]) closeVideo(i)
+  }
+  // 清空列表
+  sourceList.value = []
+  // 重新加载设备源
+  loadSources(selectedDeviceId.value)
+}
+
 onMounted(async () => {
   try {
     //const tokenRes = await apis.getToken()
     // if (tokenRes.error_code === 0) {
       //config.token = tokenRes.data
-      apis = createApis(config)
-      const sourcesRes = await apis.getSources(deviceId)
-      sourceList.value = sourcesRes.map((item) => {
-        item.sourceId = item.id
-        item.title = item.desc
-        item.type = item.type
-        item.checked = false
-        sourcesMap[item.id] = item
-        return item
-      })
+      apis = createApis()
+      
+      // 加载设备列表
+      const devicesRes = await apis.getDevices()
+      deviceList.value = devicesRes
+      if (devicesRes.length > 0) {
+        selectedDeviceId.value = devicesRes[0].DeviceId
+      }
+      
+      // 加载第一个设备的源列表
+      if (selectedDeviceId.value) {
+        await loadSources(selectedDeviceId.value)
+      }
     //}
   } catch (e) {
     console.error('初始化失败', e)
@@ -219,6 +243,22 @@ onMounted(async () => {
   connectMqtt()
 })
 
+async function loadSources(deviceId: string) {
+  try {
+    const sourcesRes = await apis.getSources(deviceId)
+    sourceList.value = sourcesRes.map((item) => {
+      item.sourceId = item.id
+      item.title = item.desc
+      item.type = item.type
+      item.checked = false
+      sourcesMap[item.id] = item
+      return item
+    })
+  } catch (e) {
+    console.error('加载源列表失败', e)
+  }
+}
+
 onBeforeUnmount(() => {
   mqttClient?.end()
 })
@@ -275,6 +315,23 @@ html, body {
   letter-spacing: 1px;
 }
 
+.device-select {
+  background: rgba(0, 180, 255, 0.15);
+  border: 1px solid #0af;
+  color: #0af;
+  border-radius: 6px;
+  padding: 4px 10px;
+  font-size: 12px;
+  cursor: pointer;
+  outline: none;
+  margin-left: 10px;
+}
+
+.device-select option {
+  background: #0d1b2e;
+  color: #e0f0ff;
+}
+
 .layout-btn {
   background: rgba(0, 180, 255, 0.15);
   border: 1px solid #0af;
diff --git a/src/api/index.ts b/src/api/index.ts
index 7578249..a9c0baa 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,7 +1,7 @@
 import type { GlobalConfig, SourceItem, MqttServerInfo, DeviceItem } from '../types'
 // import { generateSignature, generateRandomString } from '../utils/signature'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function createApis(config: GlobalConfig) {
+export function createApis() {
   // const baseUrl = () => `http://${config.serverIp}`
   // const authHeader = () => ({ Authorization: `Bearer ${config.token}` })
 
@@ -43,5 +43,5 @@ export function createApis(config: GlobalConfig) {
     return await window.HybridWebView.InvokeDotNet<DeviceItem[]>('GetDevicesAsync')
   }
 
-  return { getSources, subscribeLive, GetMqttServerProxyInfo }
+  return { getSources, subscribeLive, GetMqttServerProxyInfo, getDevices }
 }
diff --git a/src/components/VideoBox.vue b/src/components/VideoBox.vue
index 7f1cbd1..bd3392f 100644
--- a/src/components/VideoBox.vue
+++ b/src/components/VideoBox.vue
@@ -44,8 +44,6 @@ declare const ZLMRTCClient: any
 
 const props = defineProps<{
   source: SourceItem | null
-  serverIp: string
-  mediaPort: number
 }>()
 
 const emit = defineEmits<{
@@ -151,14 +149,10 @@ function playVideo(stream: string) {
   const video = videoRef.value
   if (!video) return
 
-  const streamUrl = stream
-    .replace('127.0.0.1', props.serverIp)
-    .replace('1985', String(props.mediaPort))
-
   const srsrtc = new ZLMRTCClient.Endpoint({
     element: video,
     debug: false,
-    zlmsdpUrl: streamUrl,
+    zlmsdpUrl: stream,
     simulcast: false,
     useCamera: true,
     audioEnable: true,
diff --git a/src/types/index.ts b/src/types/index.ts
index 4c481e1..8a2b8f4 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,17 +1,17 @@
 export interface GlobalConfig {
-  serverIp: string
-  getSources: string
-  subscribe: string
+  // serverIp: string
+  // getSources: string
+  // subscribe: string
   resultTopic: string
   streamInfoTopic: string
-  media_http_api: number
-  websocket: number
-  mqttAuth: [string, string]
-  accessKey: string
-  accessSecret: string
-  token: string
-  getToken: string
-  getTime: string
+  // media_http_api: number
+  // websocket: number
+  // mqttAuth: [string, string]
+  // accessKey: string
+  // accessSecret: string
+  // token: string
+  // getToken: string
+  // getTime: string
 }
 
 export interface AlgInfo {