將海康威視攝像頭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庫播放視頻流。后端接口處理需異步,避免阻塞請求。
- 前端請求: 向后端請求流媒體地址。
- 后端處理: 異步處理請求,使用FFmpeg將RTSP流轉碼為FLV,并通過http-FLV推送到前端。
- 前端播放: 使用flv.js播放接收到的FLV流。
此方案中,后端代碼需要引入必要的依賴,例如ffmpeg和海康威視SDK的Java庫。 請根據實際情況調整代碼和依賴。 前端也需要安裝flv.js。 確保ZLMediaKit已正確配置和運行。
? 版權聲明
文章版權歸作者所有,未經允許請勿轉載。
THE END