Bagaimana cara menolak aliran video SDK kamera Hikvision ke projek VUE depan untuk main balik masa nyata?

Hikvision Camera SDK Video Streaming Live Playback dalam Vue Project

Artikel ini memperkenalkan cara menstrim video yang diperolehi oleh SDK kamera Hikvision melalui pelayan media streaming (ZLMediakit) dan akhirnya bermain dalam projek front-end Vue dalam masa nyata. Seluruh proses tidak bergantung pada perkhidmatan video awan, dan kamera disambungkan terus ke komputer tempatan.

Idea Senibina dan Pelaksanaan Sistem

Sistem ini mengamalkan seni bina tiga lapisan:

1. Kamera dan Backend Hikvision (Spring Boot): Gunakan Hikvision SDK untuk mendapatkan streaming video kamera.
2. Server Media Streaming (ZLMediakit): Sebagai middleware, ia menerima aliran video yang ditolak oleh backend dan meneruskannya.
3. Front-END (VUE): Tarik aliran RTSP dari ZLMediakit untuk main balik.

Butiran pelaksanaan backend (Java)

Backend menggunakan kerangka boot Spring, dan logik teras adalah untuk menolak data video hikvision sdk callback ke Zlmediakit. Coretan kod adalah seperti berikut:

 @Service
Kelas HikvisionserviceImpl melaksanakan Hikvisionservice {

    // ... kod lain ...

    @PostConstruct
    pendaftaran tidak sah awam () {
        // Inisialisasi klien HikVisionClient = HikVisionClient baru ();
        client.InitPipedStream ();
        client.clientInit ();
        client.action (); // Mulakan Pratonton dan dapatkan data aliran video melalui panggilan balik}

    // Hikvision SDK Callback Function Class RealDataCallback melaksanakan hcnetsdk.FreaLdataCallback_v30 {
        @Override
        public void invoke (int lrealhandle, int dwdatatype, bytebyReference pbuffer, int dwbufsize, penunjuk penter) {
            jika (dwdatatype == hcnetsdk.net_dvr_streamdata) {
                jika (dwbufsize> 0) {
                    ByteBuffer buffer = pbuffer.getPointer (). GetByTeBuffer (0, dwBufsize);
                    byte [] bytes = byte baru [dwbufsize];
                    buffer.rewind ();
                    buffer.get (bait);
                    executor.Execute (() -> pushTozlMediakit (bytes)); // tolak ke zlmediakit
                }
            }
        }
    }

    kekosongan peribadi pushTozlmediakit (byte [] data) {
        // Tolak data ke zlmediakit, bahagian ini perlu dilaksanakan mengikut API ZLMediakit.
        // Data mungkin perlu dikodkan (mis. H.264) dan dihantar melalui rangkaian ke pelayan ZLMediakit.
        // ... kod tolak zlmediakit ...
    }
}

Kaedah pushToZLMediaKit adalah kunci, dan data video yang diterima perlu ditolak ke alamat pelayan streaming yang ditentukan mengikut dokumen API ZLMediakit. Ini mungkin melibatkan penukaran format data (mis., Menukar data mentah ke aliran H.264).

Butiran pelaksanaan depan (VUE)

Bahagian depan menggunakan rangka kerja VUE dan menggabungkan perpustakaan pemain video yang sesuai seperti flv.js atau hls.js untuk memainkan aliran RTSP yang diperoleh dari Zlmediakit.

 // coretan kod komponen vue<template>
  <video ref="videoPlayer" autoplay></video>
</template>

<script>
import flvjs from 'flv.js'; // 或hls.js

export default {
  mounted() {
    this.initPlayer();
  },
  methods: {
    initPlayer() {
      const rtspUrl = '/api/rtspStream'; // 后端提供的RTSP流地址接口
      fetch(rtspUrl)
        .then(response => response.json())
        .then(data => {
          const flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: data.rtspUrl // 获取到的RTSP流地址
          });
          flvPlayer.attachMediaElement(this.$refs.videoPlayer);
          flvPlayer.load();
          flvPlayer.play();
        })
        .catch(error => console.error('Error fetching RTSP URL:', error));
    }
  }
};
</script>

/api/rtspStream adalah antara muka backend yang mengembalikan alamat aliran RTSP yang dihasilkan di ZLMediakit.

Suplemen penyelesaian lengkap

Untuk mencapai streaming video yang stabil, backend mungkin perlu menggunakan FFMPEG untuk transcoding untuk menukar output aliran video asal oleh Hikvision SDK ke format yang disokong oleh ZLMediakit (seperti FLV). Backend perlu terus menulis data ke aliran respons, sementara frontend parses dan bermain melalui perpustakaan seperti flv.js. Ini memerlukan pemprosesan yang teliti terhadap penghantaran rangkaian dan penimbunan data untuk memastikan main balik video yang lancar. Pengendalian ralat dan pelepasan sumber juga penting.

Atas ialah kandungan terperinci Bagaimana cara menolak aliran video SDK kamera Hikvision ke projek VUE depan untuk main balik masa nyata?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!