前端(Vue) → 后端(SpringBoot) → ?？礢DK/ISAPI → ?？禂z像頭

<!-- 可選：WebSocket支持實(shí)時(shí)語音流 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

@Service
public class VoiceBroadcastService {
    
    // 加載海康SDK
    static {
        System.loadLibrary("hcnetsdk");
        System.loadLibrary("PlayCtrl");
        System.loadLibrary("HCNetSDK");
    }
    
    public boolean startBroadcast(String cameraIp, String text) {
        HCNetSDK hCNetSDK = HCNetSDK.INSTANCE;
        IntByReference loginHandle = new IntByReference(0);
        
        // 1. 登錄設(shè)備
        HCNetSDK.NET_DVR_DEVICEINFO_V30 deviceInfo = new HCNetSDK.NET_DVR_DEVICEINFO_V30();
        loginHandle.setValue(hCNetSDK.NET_DVR_Login_V30(
            cameraIp, (short)8000, "admin", "password", 
            deviceInfo, null
        ));
        
        if (loginHandle.getValue() < 0) {
            return false;
        }
        
        try {
            // 2. 開啟語音對(duì)講
            HCNetSDK.NET_DVR_VOICECOM_START voiceStart = new HCNetSDK.NET_DVR_VOICECOM_START();
            voiceStart.dwSize = voiceStart.size();
            voiceStart.dwVoiceChan = 1; // 通道號(hào)
            voiceStart.byVoiceMode = 0; // 0-客戶端發(fā)起
            
            int voiceHandle = hCNetSDK.NET_DVR_StartVoiceCom_V30(
                loginHandle.getValue(), voiceStart, null, null
            );
            
            if (voiceHandle < 0) {
                return false;
            }
            
            // 3. 發(fā)送語音數(shù)據(jù)（這里需要音頻輸入）
            // 實(shí)際實(shí)現(xiàn)需要從麥克風(fēng)獲取音頻流
            
            // 4. 停止對(duì)講
            hCNetSDK.NET_DVR_StopVoiceCom(voiceHandle);
            
            return true;
        } finally {
            // 5. 注銷登錄
            hCNetSDK.NET_DVR_Logout(loginHandle.getValue());
        }
    }
}

@Service
public class HikvisionISAPIService {
    
    @Value("${hikvision.username}")
    private String username;
    
    @Value("${hikvision.password}")
    private String password;
    
    /**
     * 文本轉(zhuǎn)語音廣播
     */
    public boolean textToSpeech(String cameraIp, String text) {
        String url = String.format("http://%s/ISAPI/System/Audio/channels/1/audioData", cameraIp);
        
        try {
            // 1. 構(gòu)建語音數(shù)據(jù)（需要將文本轉(zhuǎn)為G.711/G.726等格式）
            byte[] audioData = convertTextToAudio(text);
            
            // 2. 發(fā)送HTTP PUT請(qǐng)求
            HttpHeaders headers = new HttpHeaders();
            headers.setBasicAuth(username, password);
            headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
            
            HttpEntity<byte[]> entity = new HttpEntity<>(audioData, headers);
            RestTemplate restTemplate = new RestTemplate();
            
            ResponseEntity<String> response = restTemplate.exchange(
                url, HttpMethod.PUT, entity, String.class
            );
            
            return response.getStatusCode() == HttpStatus.OK;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }
    
    /**
     * 獲取音頻通道信息
     */
    public String getAudioChannels(String cameraIp) {
        String url = String.format("http://%s/ISAPI/System/Audio/channels", cameraIp);
        
        try {
            RestTemplate restTemplate = new RestTemplate();
            HttpHeaders headers = new HttpHeaders();
            headers.setBasicAuth(username, password);
            
            HttpEntity<String> entity = new HttpEntity<>(headers);
            ResponseEntity<String> response = restTemplate.exchange(
                url, HttpMethod.GET, entity, String.class
            );
            
            return response.getBody();
        } catch (Exception e) {
            return null;
        }
    }
}

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(voiceHandler(), "/voice")
                .setAllowedOrigins("*");
    }
    
    @Bean
    public WebSocketHandler voiceHandler() {
        return new VoiceWebSocketHandler();
    }
}

@Component
public class VoiceWebSocketHandler extends BinaryWebSocketHandler {
    
    @Autowired
    private VoiceBroadcastService voiceService;
    
    @Override
    protected void handleBinaryMessage(WebSocketSession session, BinaryMessage message) {
        // 接收前端發(fā)送的音頻流，轉(zhuǎn)發(fā)給攝像頭
        ByteBuffer payload = message.getPayload();
        byte[] audioData = new byte[payload.remaining()];
        payload.get(audioData);
        
        // 這里實(shí)現(xiàn)將音頻流發(fā)送給攝像頭
        voiceService.sendAudioToCamera(audioData);
    }
}

<template>
  <div class="voice-broadcast">
    <!-- 文本喊話 -->
    <div v-if="mode === 'text'">
      <el-input
        v-model="textMessage"
        type="textarea"
        placeholder="輸入要喊話的內(nèi)容"
        :rows="4"
      />
      <el-button @click="sendText" :loading="loading">
        發(fā)送喊話
      </el-button>
    </div>
    
    <!-- 實(shí)時(shí)語音 -->
    <div v-else>
      <el-button 
        @mousedown="startRecording"
        @mouseup="stopRecording"
        :disabled="recording"
        type="primary"
        size="large"
      >
        ?? {{ recording ? '正在喊話...' : '按住說話' }}
      </el-button>
      
      <div v-if="recordingTime > 0" class="recording-indicator">
        錄音時(shí)長(zhǎng): {{ recordingTime }}秒
      </div>
    </div>
    
    <!-- 模式切換 -->
    <div class="mode-switch">
      <el-radio-group v-model="mode" size="small">
        <el-radio-button label="text">文本喊話</el-radio-button>
        <el-radio-button label="voice">實(shí)時(shí)語音</el-radio-button>
      </el-radio-group>
    </div>
    
    <!-- 設(shè)備選擇 -->
    <div class="device-select">
      <el-select v-model="selectedCamera" placeholder="選擇攝像頭">
        <el-option
          v-for="camera in cameras"
          :key="camera.id"
          :label="camera.name"
          :value="camera.ip"
        />
      </el-select>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { textToSpeech, startVoiceStream, stopVoiceStream } from '@/api/broadcast'

// 狀態(tài)
const mode = ref<'text' | 'voice'>('text')
const textMessage = ref('')
const selectedCamera = ref('')
const cameras = ref<any[]>([])
const loading = ref(false)
const recording = ref(false)
const recordingTime = ref(0)
let recorder: MediaRecorder | null = null
let audioChunks: Blob[] = []
let timer: number | null = null
let ws: WebSocket | null = null

// 發(fā)送文本喊話
const sendText = async () => {
  if (!textMessage.value.trim()) {
    ElMessage.warning('請(qǐng)輸入喊話內(nèi)容')
    return
  }
  
  if (!selectedCamera.value) {
    ElMessage.warning('請(qǐng)選擇攝像頭')
    return
  }
  
  loading.value = true
  try {
    const res = await textToSpeech(selectedCamera.value, textMessage.value)
    if (res.success) {
      ElMessage.success('喊話發(fā)送成功')
      textMessage.value = ''
    } else {
      ElMessage.error('喊話失敗')
    }
  } catch (error) {
    ElMessage.error('發(fā)送失敗')
  } finally {
    loading.value = false
  }
}

// 開始錄音
const startRecording = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ 
      audio: {
        sampleRate: 8000, // 8kHz適合語音
        channelCount: 1,
        echoCancellation: true,
        noiseSuppression: true
      }
    })
    
    recorder = new MediaRecorder(stream, {
      mimeType: 'audio/webm;codecs=opus' // 或 'audio/ogg;codecs=opus'
    })
    
    recorder.ondataavailable = (event) => {
      if (event.data.size > 0) {
        audioChunks.push(event.data)
        // 通過WebSocket發(fā)送音頻數(shù)據(jù)
        sendAudioData(event.data)
      }
    }
    
    recorder.start(100) // 每100ms發(fā)送一次數(shù)據(jù)
    recording.value = true
    recordingTime.value = 0
    
    // 計(jì)時(shí)器
    timer = setInterval(() => {
      recordingTime.value++
    }, 1000)
    
  } catch (error) {
    ElMessage.error('無法訪問麥克風(fēng)')
  }
}

// 停止錄音
const stopRecording = () => {
  if (recorder && recording.value) {
    recorder.stop()
    recorder.stream.getTracks().forEach(track => track.stop())
    recording.value = false
    
    if (timer) {
      clearInterval(timer)
      timer = null
    }
    
    // 關(guān)閉WebSocket連接
    if (ws) {
      ws.close()
      ws = null
    }
  }
}

// 通過WebSocket發(fā)送音頻數(shù)據(jù)
const sendAudioData = (audioBlob: Blob) => {
  if (!ws) {
    // 建立WebSocket連接
    ws = new WebSocket(`ws://${location.host}/voice?cameraIp=${selectedCamera.value}`)
    
    ws.onopen = () => {
      console.log('WebSocket連接已建立')
    }
    
    ws.onerror = (error) => {
      console.error('WebSocket錯(cuò)誤:', error)
    }
  }
  
  // 轉(zhuǎn)換為ArrayBuffer發(fā)送
  const reader = new FileReader()
  reader.onload = () => {
    if (ws && ws.readyState === WebSocket.OPEN) {
      ws.send(reader.result as ArrayBuffer)
    }
  }
  reader.readAsArrayBuffer(audioBlob)
}

// 加載攝像頭列表
const loadCameras = async () => {
  // 這里調(diào)用API獲取攝像頭列表
  cameras.value = [
    { id: 1, name: '大門攝像頭', ip: '192.168.1.100' },
    { id: 2, name: '停車場(chǎng)攝像頭', ip: '192.168.1.101' }
  ]
}

onMounted(() => {
  loadCameras()
})

onUnmounted(() => {
  if (recorder) {
    recorder.stop()
  }
  if (ws) {
    ws.close()
  }
})
</script>

<style scoped>
.voice-broadcast {
  padding: 20px;
  max-width: 500px;
  margin: 0 auto;
}

.recording-indicator {
  margin-top: 10px;
  color: #f56c6c;
  font-weight: bold;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.mode-switch, .device-select {
  margin-top: 20px;
}
</style>

import request from '@/utils/request'

// 文本轉(zhuǎn)語音喊話
export const textToSpeech = (cameraIp: string, text: string) => {
  return request.post('/api/broadcast/text-to-speech', {
    cameraIp,
    text
  })
}

// 開始語音流
export const startVoiceStream = (cameraIp: string) => {
  return request.post('/api/broadcast/voice/start', { cameraIp })
}

// 停止語音流
export const stopVoiceStream = (cameraIp: string) => {
  return request.post('/api/broadcast/voice/stop', { cameraIp })
}

// 獲取攝像頭列表
export const getCameras = () => {
  return request.get('/api/cameras')
}

hikvision:
  default-username: admin
  default-password: 123456
  isapi-port: 80
  audio:
    format: G711  # 音頻格式：G711, G726, AAC
    sample-rate: 8000

@Component
public class AudioConverter {
    
    /**
     * 將文本轉(zhuǎn)為語音音頻
     * 需要集成TTS引擎，如訊飛、百度、阿里云等
     */
    public byte[] textToAudio(String text, AudioFormat format) {
        // 這里調(diào)用第三方TTS服務(wù)
        // 1. 調(diào)用TTS API獲取音頻流
        // 2. 轉(zhuǎn)換為攝像頭支持的格式（G.711/G.726）
        // 3. 返回音頻字節(jié)數(shù)組
        
        return convertToG711(text);
    }
    
    /**
     * PCM轉(zhuǎn)G.711
     */
    private byte[] convertToG711(byte[] pcmData) {
        // 實(shí)現(xiàn)PCM到G.711的轉(zhuǎn)換邏輯
        // 可以使用Jave、FFmpeg等庫
        return pcmData;
    }
}