Blog

无人机巡检系统

# 技术难点

# 1. 实时通信与控制的复杂性

该项目的一个主要技术难点是如何实现低延迟、高可靠性的无人机实时控制。系统采用了MQTT协议进行实时通信，通过DRC（Drone Remote Control）链路实现对无人机的精确控制。

在[use-manual-control.ts](javascript:void(0))中可以看到，系统通过MQTT发送控制指令，需要处理按键事件并将其转换为无人机控制命令。代码中实现了50ms间隔的定时发送机制，确保控制指令的实时性:

myInterval = setInterval(() => {
  body.data.seq = seq++
  seq++
  window.console.log('keyCode>>>>', activeCodeKey.value, body)
  mqttHooks?.publishMqtt(deviceTopicInfo.pubTopic, body, { qos: 0 })
}, 50)

这种实现需要处理多个复杂问题:

确保控制指令的低延迟传输
处理网络不稳定情况下的指令丢失和重传
实现控制权的管理和切换

# 2. 多种视频流协议的集成与兼容

系统支持多种视频流协议，包括RTMP、RTSP、GB28181、WebRTC以及Agora等。在[livestream-others.vue](javascript:void(0))中可以看到对多种播放方式的支持，包括使用[flv.js](javascript:void(0))、WebRTC以及自研的视频播放器。

const playWebrtc = (videoElement: HTMLMediaElement, url: string) => {
  if (webrtc) {
    webrtc.close();
  }
  webrtc = new srs.SrsRtcWhipWhepAsync();
  videoElement.srcObject = webrtc.stream;
  webrtc
    .play(url)
    .then(function (session: any) {
      console.info(session);
    })
    .catch(function (reason: any) {
      webrtc.close();
      console.error(reason);
    });
};

这种多协议支持带来了以下挑战:

需要适配不同协议的特性和限制
处理不同浏览器对各种协议的支持差异
确保视频播放的稳定性和流畅性

# 3. 复杂的状态管理和实时数据同步

系统需要处理大量实时数据，包括无人机状态、设备信息、飞行控制数据等。在[control.vue](javascript:void(0))中，通过MQTT接收各种实时数据并更新UI:

watch(() => mqttCacheData.sub_device?.device_online_status, (newVal: string | number) => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
  if (newVal == 1) {
    timer.value = setInterval(async () => {
      try {
        const res = await getDroneStatus(window._sn);
        if (res.code === 0) {
          deviceInfo5.value = res.data || {};
          localStorage.setItem('deviceInfo', JSON.stringify(res.data))
        }
      } catch (error) {
        console.error('Failed to fetch drone status:', error);
      }
    }, 5000)
  } else {
    clearInterval(timer.value)
    timer.value = null
  }
}, {
  immediate: true,
  deep: true
})

这种复杂的状态管理需要处理:

大量实时数据的接收和处理
多个组件间的数据共享和同步
数据一致性和可靠性的保证

# 技术亮点

# 1. 统一的实时通信架构

项目采用了MQTT作为主要的实时通信协议，并设计了统一的通信架构。通过[use-mqtt.ts](javascript:void(0))封装了MQTT操作，提供了统一的发布/订阅接口，使得不同组件可以方便地进行实时通信。

export function useMqtt(deviceTopicInfo: DeviceTopicInfo) {
  // ...
  function publishMqtt(topic: string, data: any, options: IClientPublishOptions) {
    // ...
  }
  
  function subscribeMqtt(topic: string) {
    // ...
  }
  // ...
}

这种架构的优势包括:

提供了统一的实时通信接口
便于管理和维护大量订阅/发布操作
支持心跳检测和连接状态管理

# 2. 模块化的无人机控制实现

系统将无人机控制功能模块化，通过[use-manual-control.ts](javascript:void(0))、[use-payload-control.ts](javascript:void(0))等Hook实现了不同方面的控制功能。

例如，键盘控制被封装为独立的Hook，可以方便地在不同组件中使用:

function startKeyboardManualControl () {
  window.addEventListener('keydown', onKeydown)
  window.addEventListener('keyup', onKeyup)
}

function closeKeyboardManualControl () {
  resetControlState()
  window.removeEventListener('keydown', onKeydown)
  window.removeEventListener('keyup', onKeyup)
}

这种模块化设计的优点:

提高代码复用性
便于功能扩展和维护
降低各模块之间的耦合度

# 3. 多样化的视频播放解决方案

系统集成了多种视频播放方案，包括自研的[hy-video-player](javascript:void(0))组件，可以满足不同场景下的视频播放需求。

在[AircraftCameraDia.vue](javascript:void(0))中，根据不同的设备类型选择不同的播放器:

<template v-if="airportOrDrone(currentCamera) === 'drone'">
  <hy-video-player-live
    :url="currentCamera"
    :controlAutoHide="true"
    :isAi="true"
    :autoPlay="true"
    style="width: 100%; height: 100%;"
  />
</template>
<template v-else>
  <hy-video-player
    :contentList="contentList"
    :url="currentCamera"
    :controlAutoHide="true"
    :isAi="true"
    :autoPlay="true"
    style="width: 100%; height: 100%;"
  />
</template>

这种多样化的播放方案提供了:

对不同设备类型的良好支持
AI功能的集成（如温度点显示）
更好的用户体验

# 4. 灵活的UI架构

系统采用了Vue 3 Composition API和组件化设计，构建了灵活的UI架构。通过自定义Hook（如[use-gis-edit.ts](javascript:void(0))）封装业务逻辑，使得UI组件更加简洁和可维护。

const { setFlyPoint, liveFly, useNewPopup, initWay, removeWayLine } = useGisEdit(store);

这种架构的优势:

逻辑和视图分离，提高代码可读性
便于测试和调试
支持更好的代码复用

本章目录