如何将海康威视摄像头SDK的视频流推送到前端Vue项目中进行实时播放？

@Service
public class HikvisionServiceImpl implements HikvisionService {

    // ... 其他代码 ...

    @PostConstruct
    public void register() {
        // 初始化海康SDK，获取视频流
        HikvisionClient client = new HikvisionClient();
        client.initPipedStream();
        client.clientInit();
        client.action(); // 开始预览，并通过回调获取视频流数据
    }

    // 海康SDK回调函数
    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.rewind();
                    buffer.get(bytes);
                    executor.execute(() -> pushToZLMediaKit(bytes)); // 推送到ZLMediaKit
                }
            }
        }
    }

    private void pushToZLMediaKit(byte[] data) {
        //  将数据推送到ZLMediaKit，这部分需要根据ZLMediaKit的API进行实现，
        //  可能需要将数据进行编码转换(例如H.264)，并通过网络发送到ZLMediaKit服务器。
        // ...  ZLMediaKit 推送代码 ...
    }
}

// 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>