vue中web端播放rtsp视频流(摄像头监控视频)(海康威视录像机)

本文主要是介绍vue中web端播放rtsp视频流(摄像头监控视频)(海康威视录像机),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、ffmpeg安装​​​​​​  

ffmpeg下载 https://ffmpeg.org/download.html找ffmpeg-release-essentials.zip点击下载,下载完解压ffmpeg.exe 程序运行

二、配置ffmpeg环境变量

添加成功后验证是否生效任意地方打开cmd窗口输入 ffmpeg 打印如下表示成功

 

三、node搭建websocket服务

新建一个app.js文件,同级目录下npm安装 node-rtsp-stream

我是直接写在项目里了,你们可以单独写在外面

npm install node-rtsp-stream -S

app.js内容

const stream = require('node-rtsp-stream')
const urls = ['rtsp://admin:123456@192.168.2.100:554/Streaming/Channels/101','rtsp://admin:123456@192.168.2.100:554/Streaming/Channels/201','rtsp://admin:123456@192.168.2.100:554/Streaming/Channels/301'
]; // 将此处替换为实际的RTSP流地址
let wsPort = 9999; // 初始端口号
urls.forEach((url) => {new stream({name: `video-stream-${urls.indexOf(url) + 1}`,streamUrl: url,wsPort: wsPort,ffmpegOptions: {'-stats': '','-r': 30,'-s': '1920*1080'}});wsPort++; // 每次递增端口号
});

运行

node app.js

这样就是成功了

四、vue播放视频

vue组件

jsmpeg.min.js下载地址

链接:https://pan.baidu.com/s/1_KgKM-sOzfrAVs_8LgCG1w?pwd=z7z5 
提取码:z7z5

<template><div class="view"><p>录像画面</p><div id="video-container"></div></div>
</template><script>
import '../../public/jsmpeg.min.js'
export default {data() {return {players: []};},methods: {},mounted() {//开始播放const container = document.getElementById('video-container');for (let i = 0; i < 3; i++) {const canvas = document.createElement('canvas');canvas.id = `video-${i + 1}`;canvas.style.width = '210px'; // 设置宽度为200pxcanvas.style.height = '210px'; // 设置高度为200pxcanvas.style.margin = '3px'; // 设置高度为200pxcontainer.appendChild(canvas);const url = `ws://127.0.0.1:${9999 + i}/video-stream-${i + 1}`;// const url = `ws://127.0.0.1:9999/video-stream-${i + 1}`;this.players.push(new JSMpeg.Player(url, { canvas }));this.players[i].play();}},watch: {},filters: {},beforeDestroy() {this.players.forEach(player => player.stop());}}</script>
<style scoped>
.view {background-color: rgb(43, 168, 188);box-sizing: border-box;}#video-container{height: 450px;}
</style>

jsmpeg.min.js建议在index.html引入,我只是不放心又引入了一遍,正常在index.html也要引入

这篇关于vue中web端播放rtsp视频流(摄像头监控视频)(海康威视录像机)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/932484

相关文章

Spring Boot Actuator应用监控与管理的详细步骤

《SpringBootActuator应用监控与管理的详细步骤》SpringBootActuator是SpringBoot的监控工具,提供健康检查、性能指标、日志管理等核心功能,支持自定义和扩展端... 目录一、 Spring Boot Actuator 概述二、 集成 Spring Boot Actuat

Python Web框架Flask、Streamlit、FastAPI示例详解

《PythonWeb框架Flask、Streamlit、FastAPI示例详解》本文对比分析了Flask、Streamlit和FastAPI三大PythonWeb框架:Flask轻量灵活适合传统应用... 目录概述Flask详解Flask简介安装和基础配置核心概念路由和视图模板系统数据库集成实际示例Stre

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

一文解密Python进行监控进程的黑科技

《一文解密Python进行监控进程的黑科技》在计算机系统管理和应用性能优化中,监控进程的CPU、内存和IO使用率是非常重要的任务,下面我们就来讲讲如何Python写一个简单使用的监控进程的工具吧... 目录准备工作监控CPU使用率监控内存使用率监控IO使用率小工具代码整合在计算机系统管理和应用性能优化中,监

Zabbix在MySQL性能监控方面的运用及最佳实践记录

《Zabbix在MySQL性能监控方面的运用及最佳实践记录》Zabbix通过自定义脚本和内置模板监控MySQL核心指标(连接、查询、资源、复制),支持自动发现多实例及告警通知,结合可视化仪表盘,可有效... 目录一、核心监控指标及配置1. 关键监控指标示例2. 配置方法二、自动发现与多实例管理1. 实践步骤

prometheus如何使用pushgateway监控网路丢包

《prometheus如何使用pushgateway监控网路丢包》:本文主要介绍prometheus如何使用pushgateway监控网路丢包问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录监控网路丢包脚本数据图表总结监控网路丢包脚本[root@gtcq-gt-monitor-prome

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

如何在Ubuntu 24.04上部署Zabbix 7.0对服务器进行监控

《如何在Ubuntu24.04上部署Zabbix7.0对服务器进行监控》在Ubuntu24.04上部署Zabbix7.0监控阿里云ECS服务器,需配置MariaDB数据库、开放10050/1005... 目录软硬件信息部署步骤步骤 1:安装并配置mariadb步骤 2:安装Zabbix 7.0 Server

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)