如何將海康威視攝像頭SDK的視頻流傳輸到前端Vue項目中?

如何將海康威視攝像頭SDK的視頻流傳輸到前端Vue項目中?

將海康威視攝像頭SDK視頻流集成到vue前端項目

本文介紹如何將通過海康威視攝像頭SDK獲取的視頻流,傳輸到Vue前端項目進行展示。 海康威視SDK的Demo通常基于Java Swing,不適用于直接集成到前端項目。我們將采用后端流媒體服務器作為橋梁,實現視頻流的傳輸。

開發環境

本方案基于spring Boot后端框架,攝像頭直接連接到本地電腦,無需云端視頻服務。 我們使用ZLMediaKit作為流媒體服務器。

技術方案

后端使用Java代碼,通過海康威視SDK獲取視頻流,并將流數據推送到ZLMediaKit服務器。Vue前端項目則從ZLMediaKit拉取RTSP流進行播放。

后端實現

核心代碼片段展示了SDK初始化、設備連接、視頻流獲取及推流過程。

立即學習前端免費學習筆記(深入)”;

@Service public class HikvisionServiceImpl implements HikvisionService {      @PostConstruct     public void register() {         HikvisionClient client = new HikvisionClient();         client.initPipedStream();         client.clientInit();         client.action();     } }

HikvisionClient類包含初始化和連接設備的邏輯:

public class HikvisionClient {      ExecutorService executor = Executors.newFixedThreadPool(5);     ffmpegFrameGrabber grabber;     FFmpegFrameRecorder recorder;     PipedInputStream inputStream = new PipedInputStream();     PipedOutputStream outputStream = new PipedOutputStream();     String pushAddress = "rtsp://127.0.0.1:554/live/1";      public void initPipedStream() {         try {             outputStream.connect(inputStream);             System.out.println("Piped stream connected successfully.");         } catch (IOException e) {             throw new RuntimeException(e);         }     }      public void clientInit() {         // SDK初始化代碼     }      public void register() {         // 設備注冊代碼     }      public void action() {         // 獲取視頻流并預覽     }      class RealDataCallBack implements HCNetSDK.FRealDataCallBack_V30 {         @Override         public void invoke(int lRealHandle, int dwDataType, ByteByReference pBuffer, int dwBufSize, Pointer pUser) {             if (dwDataType == HCNetSDK.NET_DVR_STREAMDATA) {                 if (dwBufSize > 0) {                     ByteBuffer buffer = pBuffer.getPointer().getByteBuffer(0, dwBufSize);                     byte[] bytes = new byte[dwBufSize];                     buffer.get(bytes);                     executor.execute(() -> push(bytes, dwBufSize));                 }             }         }     }      public void push(byte[] data, int size) {         try {             outputStream.write(data, 0, size);             handle();         } catch (IOException | InterruptedException e) {             throw new RuntimeException(e);         }     }      public void handle() throws InterruptedException, IOException {         // 處理流數據并推送到ZLMediaKit         grabber = new FFmpegFrameGrabber(inputStream);         grabber.setOption("rtsp_transport", "tcp");         grabber.setOption("stimeout", "2000000");         grabber.setPixelFormat(AV_PIX_FMT_YUV420P);         grabber.setVideoCodec(AV_CODEC_ID_H264);         grabber.setAudioStream(Integer.MIN_VALUE);         grabber.setFormat("mpegts"); // or other suitable format         long startTime = System.currentTimeMillis();          do {             Thread.sleep(100);             if (System.currentTimeMillis() - startTime > 2000) {                 System.out.println("No video stream from SDK callback.");                 return;             }         } while (inputStream.available() == 0);          grabber.start();         recorder = new FFmpegFrameRecorder(pushAddress, grabber.getImageWidth(), grabber.getImageHeight());         recorder.setVideoCodec(AV_CODEC_ID_H264);         recorder.setFormat("flv"); // Output as FLV for easier frontend integration         recorder.setFrameRate(grabber.getFrameRate());         recorder.start();          Frame frame;         while ((frame = grabber.grab()) != null) {             recorder.record(frame);         }          grabber.stop();         recorder.stop();         recorder.release();         grabber.release();     } }

前端vue項目

Vue前端通過調用后端接口獲取流地址,并使用flv.JS庫播放視頻流。后端接口處理需異步,避免阻塞請求。

  1. 前端請求: 向后端請求流媒體地址。
  2. 后端處理: 異步處理請求,使用FFmpeg將RTSP流轉碼為FLV,并通過http-FLV推送到前端。
  3. 前端播放: 使用flv.js播放接收到的FLV流。

此方案中,后端代碼需要引入必要的依賴,例如ffmpeg和海康威視SDK的Java庫。 請根據實際情況調整代碼和依賴。 前端也需要安裝flv.js。 確保ZLMediaKit已正確配置和運行。

? 版權聲明
THE END
喜歡就支持一下吧
點贊9 分享