前端使用rtsp視頻流接入海康威視攝像頭的具體步驟
前言
在純前端（Vue 2）中直接通過(guò) RTSP 協(xié)議接入?？低晹z像頭是不可行的，因?yàn)椋?/p>
- 瀏覽器限制：現(xiàn)代瀏覽器（Chrome、Firefox等）不支持直接播放 RTSP 流（基于 TCP/UDP 的協(xié)議）。
- 安全策略：瀏覽器通常禁止直接訪問(wèn)本地網(wǎng)絡(luò)設(shè)備（如攝像頭）。
可行的前端解決方案
需要借助中轉(zhuǎn)服務(wù)將 RTSP 轉(zhuǎn)成瀏覽器支持的格式（如 HLS、WebRTC 或 FLV）。以下是具體實(shí)現(xiàn)方案：
方案 1：RTSP → WebSocket + flv.js（推薦）
使用 FFmpeg 或 Node.js 中轉(zhuǎn)服務(wù) 將 RTSP 轉(zhuǎn)成 FLV，前端用 flv.js 播放。
步驟
1. 后端中轉(zhuǎn)服務(wù)（Node.js + FFmpeg）
安裝 node-rtsp-stream 或自行搭建轉(zhuǎn)流服務(wù)：
npm install node-rtsp-stream
示例代碼（Node.js 服務(wù)端）：
const NodeRTSPStream = require('node-rtsp-stream');
const stream = new NodeRTSPStream({
name: '?？禂z像頭',
streamUrl: 'rtsp://admin:password@192.168.1.64:554/Streaming/Channels/101', // ?？?RTSP 地址
wsPort: 9999, // WebSocket 端口
ffmpegOptions: { // FFmpeg 轉(zhuǎn)碼選項(xiàng)
'-stats': '',
'-r': 30,
'-f': 'flv',
},
});
注意：
streamUrl格式通常為：rtsp://[用戶名]:[密碼]@[IP地址]:[端口]/Streaming/Channels/[通道號(hào)]
?？的J(rèn)端口554，通道號(hào)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', // 對(duì)應(yīng) Node.js 服務(wù)的 WebSocket
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
},
},
beforeDestroy() {
if (this.flvPlayer) {
this.flvPlayer.destroy();
}
},
};
</script>
方案 2：RTSP → HLS（HTTP Live Streaming）
使用 FFmpeg 將 RTSP 轉(zhuǎn)成 HLS（.m3u8 + .ts），前端用 hls.js 播放。
步驟
1. FFmpeg 轉(zhuǎn)碼
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 實(shí)時(shí)流（更復(fù)雜，需后端支持）
使用 WebRTC（如 Janus Gateway 或 Mediasoup）實(shí)現(xiàn)低延遲播放，但需要額外搭建信令服務(wù)器。
?？?RTSP 地址格式
?？低晹z像頭的 RTSP URL 通常為：
rtsp://[用戶名]:[密碼]@[IP地址]:[端口]/Streaming/Channels/[通道號(hào)]
- 主碼流：
/Streaming/Channels/101 - 子碼流：
/Streaming/Channels/102（低分辨率） - 默認(rèn)用戶名/密碼：
admin+ 設(shè)備背面密碼
總結(jié)
| 方案 | 技術(shù) | 延遲 | 適用場(chǎng)景 |
|---|---|---|---|
| RTSP → WebSocket + flv.js | Node.js + FFmpeg | 2-5s | 局域網(wǎng)/內(nèi)網(wǎng) |
| RTSP → HLS | FFmpeg + hls.js | 10-30s | 錄播/高兼容 |
| WebRTC | Janus/Mediasoup | <1s | 超低延遲 |
推薦：
- 內(nèi)網(wǎng)/低延遲 → flv.js
- 公網(wǎng)/高兼容 → HLS
如果有后端支持，可進(jìn)一步優(yōu)化（如鑒權(quán)、CDN 分發(fā)）。
到此這篇關(guān)于前端使用rtsp視頻流接入?？低晹z像頭的文章就介紹到這了,更多相關(guān)前端接入?？低晹z像頭內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)戰(zhàn)記錄
聽說(shuō)有的公司已經(jīng)開始用vue3了 趕緊打開B站學(xué)一下,下面這篇文章主要給大家介紹了關(guān)于Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)戰(zhàn)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
Electron+Vue實(shí)現(xiàn)截屏功能的兩種方式
在Electron環(huán)境下,截屏功能相對(duì)強(qiáng)大,可以通過(guò)desktopCapturer獲取應(yīng)用視頻流,實(shí)現(xiàn)對(duì)整個(gè)應(yīng)用的截屏,而在非Electron環(huán)境下,截屏功能受限,只能截取瀏覽器內(nèi)容,且存在iframe或base64圖片加載問(wèn)題2024-10-10
Vue3播放m3u8視頻的兩種實(shí)現(xiàn)方式示例
這篇文章主要介紹了Vue3播放m3u8視頻的兩種實(shí)現(xiàn)方式,兩種視頻播放器組件分別是vue3-video-play和chimee-player,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
這篇文章主要介紹了Vue組件封裝方案實(shí)現(xiàn)，我們將從分析組件封裝的優(yōu)勢(shì)開始，然后依次介紹 vue.js 的基本概念，以及如何創(chuàng)建、封裝和使用自定義組件2023-03-03
Vue服務(wù)端渲染實(shí)踐之Web應(yīng)用首屏耗時(shí)最優(yōu)化方案
這篇文章主要介紹了Vue服務(wù)端渲染實(shí)踐之Web應(yīng)用首屏耗時(shí)最優(yōu)化方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要給大家介紹了關(guān)于Vue自定義加水波紋效果指令的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
vue中用js如何實(shí)現(xiàn)循環(huán)可編輯表格
這篇文章主要介紹了vue中用js如何實(shí)現(xiàn)循環(huán)可編輯表格，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
VUE使用draggable實(shí)現(xiàn)組件拖拽
這篇文章主要為大家詳細(xì)介紹了VUE使用draggable實(shí)現(xiàn)組件拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue實(shí)現(xiàn)分環(huán)境打包步驟(給不同的環(huán)境配置相對(duì)應(yīng)的打包命令)
這篇文章主要介紹了vue實(shí)現(xiàn)分環(huán)境打包步驟(給不同的環(huán)境配置相對(duì)應(yīng)的打包命令)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)展示tab欄切換
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)展示tab欄切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04