首页 > 网络编程 > JavaScript > javascript类库 > vue.js > 前端接入海康威视摄像头

前端使用rtsp视频流接入海康威视摄像头的具体步骤

2025-09-16 08:57:08 作者：啃火龙果的兔子

这篇文章主要介绍了前端使用rtsp视频流接入海康威视摄像头的具体步骤,前端调用海康威视摄像头的过程中,主要涉及到摄像头的连接、视频流的获取以及前端页面的展示,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

在纯前端（Vue 2）中直接通过 RTSP 协议接入海康威视摄像头是不可行的，因为：

浏览器限制：现代浏览器（Chrome、Firefox等）不支持直接播放 RTSP 流（基于 TCP/UDP 的协议）。
安全策略：浏览器通常禁止直接访问本地网络设备（如摄像头）。

可行的前端解决方案

需要借助中转服务将 RTSP 转成浏览器支持的格式（如 HLS、WebRTC 或 FLV）。以下是具体实现方案：

方案 1：RTSP → WebSocket + flv.js（推荐）

使用 FFmpeg 或 Node.js 中转服务 将 RTSP 转成 FLV，前端用 flv.js 播放。

步骤

1. 后端中转服务（Node.js + FFmpeg）

安装 node-rtsp-stream 或自行搭建转流服务：

npm install node-rtsp-stream

示例代码（Node.js 服务端）：

const NodeRTSPStream = require('node-rtsp-stream');
const stream = new NodeRTSPStream({
  name: '海康摄像头',
  streamUrl: 'rtsp://admin:password@192.168.1.64:554/Streaming/Channels/101', // 海康 RTSP 地址
  wsPort: 9999, // WebSocket 端口
  ffmpegOptions: { // FFmpeg 转码选项
    '-stats': '',
    '-r': 30,
    '-f': 'flv',
  },
});

注意：streamUrl 格式通常为：
rtsp://[用户名]:[密码]@[IP地址]:[端口]/Streaming/Channels/[通道号]
海康默认端口 554，通道号 101 通常代表主码流。

2. 前端 Vue 2 使用flv.js播放

安装 flv.js：

npm install flv.js

Vue 组件示例：

<template>
  <div>
    <video ref="videoPlayer" controls autoplay muted width="800"></video>
  </div>
</template>

<script>
import flvjs from 'flv.js';

export default {
  mounted() {
    this.initVideo();
  },
  methods: {
    initVideo() {
      if (flvjs.isSupported()) {
        const videoElement = this.$refs.videoPlayer;
        const flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: 'ws://localhost:9999', // 对应 Node.js 服务的 WebSocket
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
      }
    },
  },
  beforeDestroy() {
    if (this.flvPlayer) {
      this.flvPlayer.destroy();
    }
  },
};
</script>

方案 2：RTSP → HLS（HTTP Live Streaming）

使用 FFmpeg 将 RTSP 转成 HLS（.m3u8 + .ts），前端用 hls.js 播放。

步骤

1. FFmpeg 转码

ffmpeg -i "rtsp://admin:password@192.168.1.64:554/Streaming/Channels/101" \
  -c:v libx264 -c:a aac -f hls \
  -hls_time 2 -hls_list_size 3 -hls_flags delete_segments \
  ./stream/stream.m3u8

2. 前端 Vue 使用hls.js

<template>
  <video ref="videoPlayer" controls></video>
</template>

<script>
import Hls from 'hls.js';

export default {
  mounted() {
    const video = this.$refs.videoPlayer;
    const hls = new Hls();
    hls.loadSource('http://your-server/stream.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      video.play();
    });
  },
};
</script>

方案 3：WebRTC 实时流（更复杂，需后端支持）

使用 WebRTC（如 Janus Gateway 或 Mediasoup）实现低延迟播放，但需要额外搭建信令服务器。

海康 RTSP 地址格式

海康威视摄像头的 RTSP URL 通常为：

rtsp://[用户名]:[密码]@[IP地址]:[端口]/Streaming/Channels/[通道号]

主码流：/Streaming/Channels/101
子码流：/Streaming/Channels/102（低分辨率）
默认用户名/密码：admin + 设备背面密码

总结

方案	技术	延迟	适用场景
RTSP → WebSocket + flv.js	Node.js + FFmpeg	2-5s	局域网/内网
RTSP → HLS	FFmpeg + hls.js	10-30s	录播/高兼容
WebRTC	Janus/Mediasoup	<1s	超低延迟

您可能感兴趣的文章:

前端接入海康威视摄像头的3种方案示例代码