记一次vue3实现TRSP大华相机拉流的经历

一、背景

业务场景,大华IP相机安装在A城市某建筑场所,工控机是内网通过4G流量卡上网,工控机通过相机采集数据后做故障识别并上传故障信息到地面服务器,地面服务器在B城市。
现需要在地面服务器提供的WEB界面上实现IP相机实时拉流显示。由于A城市相机环境没有固定IP,这里采用了花生壳内网穿透,成功打通了外网访问渠道,在浏览器上直接输入trsp网址可以用PotPlayer进行拉流播放,证明链路是通的。接下来是解决TRSP在WEB上播放的问题。

第一次做这样的功能,技术栈用的是vue3,面向百度编程后,找到一篇文章:
vue播放rtsp流(简单易操作,无flash,跨平台,小白可入)
https://blog.csdn.net/yunbabac/article/details/120740547
按照文章的实施步骤一步步尝试,却未能解决问题。技术思路大概是要部署一个媒体服务器借助ffmpeg进行解码。浏览器页面上提供trsp地址,并将地址转发到这个媒休服务器,媒体服务器拿到地址后拉流解析并返回给浏览器。遇到的问题 要么浏览器报跨域问题,要么媒体服务器视频解码出错。

转换思路:有没有可能每家厂商的相机会有一些定制导致通用解码失败?于是按相机厂商名称加技术类继续百度找到以下文章,里面有提到用大华官网插件实现:
Vue3下的视频直播流方法(RTSP和HLS流)
https://blog.csdn.net/python_small_pan/article/details/124944602
还找了很多其他相关文章,但无一例外没有试验成功。

最后在网上找到一个rtsp2web的开源项目。
github网址:https://github.com/Neveryu/rtsp2web

二、准备工作

1、安装node并配置环境变量

在cmd窗口的任意路径输入 node -v和npm -v能返回版本信息。如下

>node -v
v14.18.3
>npm -v
6.14.15

2、安装ffmpeg并配置环境变量

在cmd窗口任意路径输入ffmpeg --version能返回版本信息,如下:

>ffmpeg -version
ffmpeg version N-92308-g32d021cfa6 Copyright (c) 2000-2018 the FFmpeg developers
built with gcc 8.2.1 (GCC) 20181017
configuration: --enable-gpl --enable-version3 --enable-sdl2 --enable-fontconfig --enable-gnutls --enable-iconv --enable-libass --enable-libbluray --enable-libfreetype --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libopus --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libtheora --enable-libtwolame --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libzimg --enable-lzma --enable-zlib --enable-gmp --enable-libvidstab --enable-libvorbis --enable-libvo-amrwbenc --enable-libmysofa --enable-libspeex --enable-libxvid --enable-libaom --enable-libmfx --enable-amf --enable-ffnvcodec --enable-cuvid --enable-d3d11va --enable-nvenc --enable-nvdec --enable-dxva2 --enable-avisynth
libavutil      56. 21.100 / 56. 21.100
libavcodec     58. 34.100 / 58. 34.100
libavformat    58. 19.102 / 58. 19.102
libavdevice    58.  4.106 / 58.  4.106
libavfilter     7. 38.100 /  7. 38.100
libswscale      5.  2.100 /  5.  2.100
libswresample   3.  2.100 /  3.  2.100
libpostproc    55.  2.100 / 55.  2.100

三、代理服务搭建

我用的是windows电脑
根据github上的文档一步步实现如下
1、用CMD窗口创建并进入目录D:\rtsp-demo\rtsp-server
2、在CMD窗口执行npm init --yes
在这里插入图片描述
3、安装rtsp2web模块
npm i rtsp2web 如下图:
在这里插入图片描述

4、在该目录下创建main.js文件,并输入以下代码

// main.js
const RTSP2web = require('rtsp2web')// 服务端长连接占据的端口号;你也可以不传,默认是:9999
let port = 9999// 创建一个RTSP2web服务实例出来
new RTSP2web({port
})

在这里插入图片描述
5、在cmd窗口中执行node main.js启动服务,如下图:
在这里插入图片描述
此时,我们已经在本地启动了一个端口为9999的服务。

四、客户端搭建(浏览器端)

1、下载rtsp2web的源码(主要用它的example示例),如下图:

在这里插入图片描述
将下载后的文件解压到D:/rtsp-demo目录,解压后目录结构如下:
在这里插入图片描述
用Vscode打开D:/rtsp-demo/rtsp2web-master目录,并编辑里面的example/index.html文件。
修改变量rtsp1的值为自己的rtsp路径。示意如下:
在这里插入图片描述
点击鼠标右键,选择Open with Live Server如下图:
在这里插入图片描述
看到运行的效果大失所望,因为页面上并没有显示出视频窗口。
其实之前找了好多篇指南,按所有步骤走完都是这样的结果。这不禁让人感到非常困惑,如果这些指南有错,为什么那么多网友去写这样的指南?如果指南没有错,是不是我忽略了什么呢?
经过一番苦苦思索,仍然没有结果。后来想起”穷则呼天“的古训,于是我向神祈祷,求祂则给我智慧悟性和灵感,使我能够找到问题的关键。解决办法看后面。
在这里插入图片描述
后来我经过反复查看官网文档,找到一个transportType,如文档所述,它是用来配置网络传输协议的,并且默认值是“无”。 也就是说直接根据文档描述的步骤,默认真的是什么都看不到的。
在这里插入图片描述
于是我尝试修改main.js中的代码,然后重新启用 node main.js服务。如下所示:
在这里插入图片描述
再次刷新网页,相机视频能够播放了。
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux套接字选项API

获取套接字的选项值(getsockopt) 【头文件】 #include <sys/types.h> #include <sys/socket.h> 【函数原型】 int getsockopt(int sockfd, int level, int optname,void *optval, socklen_t *optlen); 【函数功能】 用于获取一个套接字的选项 【参数含义】 […

P1025 [NOIP2001 提高组] 数的划分 题解

文章目录 题目描述输入格式输出格式样例样例输入样例输出 数据范围提示思路与部分实现完整代码 题目描述 将整数 n n n 分成 k k k 份&#xff0c;且每份不能为空&#xff0c;任意两个方案不相同&#xff08;不考虑顺序&#xff09;。 例如&#xff1a; n 7 n7 n7&#xf…

C++编译与运行:其一、静态类型和动态类型

一、什么是静态类型和动态类型&#xff1f; 先说结论&#xff1a;编译期间可以明确的类型是静态类型&#xff1b;运行期间才能明确的类型是动态类型。 后半句可能有点不好理解&#xff0c;通俗地说&#xff0c;需要通过执行代码才能明确的类型是动态类型。 假如我们有两个类&…

【前端】NodeJS核心知识点整理

1.Node.js入门案例 1.1.什么是Node.js JS是脚本语言&#xff0c;脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS&#xff0c;浏览器充当了解析器的角色。而对于需要独立运行的JS&#xff0c;NodeJS就是一个解析器。 每一种解析器都是一个运行环境&#xff0c;不但…

[Qt之“MMM dd yyyyhh:mm:ss“]时间格式

这是时间格式字符串&#xff0c;用于表示日期和时间的显示格式。具体解释如下&#xff1a; “MMM”&#xff1a;表示月份的缩写&#xff0c;例如Jan、Feb、Mar等。“dd”&#xff1a;表示日期的两位数&#xff0c;例如01、02、03等。“yyyy”&#xff1a;表示年份的四位数&…

数据特征工程 | 主成分分析(Python)

特征抽取(feature extraction)和特征选择(feature selection)不一样,特征抽取是从原特征集中推导出有用的信息构成新的特征集。特征选择是从原特征集中选择一部分子集作为训练特征。 特征抽取将数据集从一个特征空间投影到了一个更低维度的特征空间。 主成分分析(princ…

Debezium日常分享系列之:Debezium2.4版本之用于 MongoDB的Debezium 连接器

Debezium日常分享系列之&#xff1a;Debezium2.4版本之用于 MongoDB的Debezium 连接器 一、综述二、改变流三、阅读偏好四、MongoDB 连接器的工作原理五、支持的 MongoDB 拓扑六、所需的用户权限七、逻辑连接器名称八、执行快照九、临时快照十、增量快照1.增量快照流程2.Debezi…

Kubernetes - Ingress HTTP 负载搭建部署解决方案(新版本v1.21+)

在看这一篇之前&#xff0c;如果不了解 Ingress 在 K8s 当中的职责&#xff0c;建议看之前的一篇针对旧版本 Ingress 的部署搭建&#xff0c;在开头会提到它的一些简介Kubernetes - Ingress HTTP 负载搭建部署解决方案_放羊的牧码的博客-CSDN博客 开始表演 1、kubeasz 一键安装…

十大排序算法(C语言)

参考文献 https://zhuanlan.zhihu.com/p/449501682 https://blog.csdn.net/mwj327720862/article/details/80498455?ops_request_misc%257B%2522request%255Fid%2522%253A%2522169837129516800222848165%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&…

ffmpeg x264 x265 fdk-aac 编译记录

ffmpeg 裁剪定制编译过多次了 这里记录下 主题部分 关于ffmpeg自定义编解码器 FFmpeg codec HOWTO - MultimediaWiki 一 环境 ubuntu 18.04 ffmpeg: v4.2.2 ndk :android-ndk-r20b-linux-x86_64 fdk-aac 0.1.5 x264: 0.164.x 1.1 下载编译fdk-aac wget http://ja…

星闪技术 NearLink 一种专门用于短距离数据传输的新型无线通信技术

本心、输入输出、结果 文章目录 星闪技术 NearLink 一种专门用于短距离数据传输的新型无线通信技术前言星闪技术 NearLink 的诞生背景星闪技术 NearLink 简介星闪技术 NearLink 技术是一种蓝牙技术吗星闪技术 NearLink 优势星闪技术 NearLink 应用前景弘扬爱国精神星闪技术 Nea…

互联多区域电网的负荷频率控制研究

摘要 电力行业的发展程度是衡量国民经济水平以及国家安全保障的一项重要指标。多区域负荷频率控制系统作为现代电力系统发展的重要趋势&#xff0c;在可靠性、经济性和稳定性上都具备一定的优势。保证系统稳定和输出电能的质量是电网运行的关键。电力系统输出电能质量的优劣取决…

10000字!图解机器学习特征工程

文章目录 引言特征工程1.特征类型1.1 结构化 vs 非结构化数据1.2 定量 vs 定性数据 2.数据清洗2.1 数据对齐2.2 缺失值处理 原文链接&#xff1a;https://www.showmeai.tech/article-detail/208 作者&#xff1a;showmeAI 引言 上图为大家熟悉的机器学习建模流程图&#xff0c;…

技术资料MF74:将图像插入单元格注释

【分享成果&#xff0c;随喜正能量】须知往生净土&#xff0c;全仗信、愿。有信、愿&#xff0c;即未得三昧、未得一心不乱&#xff0c;亦可往生。且莫只以一心不乱&#xff0c;及得念佛三昧为志事&#xff0c;不复以信、愿、净念为事。。 我给VBA的定义&#xff1a;VBA是个人…

通过Vue自带服务器实现Ajax请求跨域(vue-cli)

通过Vue自带服务器实现Ajax请求跨域&#xff08;vue-cli&#xff09; 跨域 原理&#xff1a;从A页面访问到B页面&#xff0c;并且要获取到B页面上的数据&#xff0c;而两个页面所在的端口、协议和域名中哪怕有一个不对等&#xff0c;那么这种行为就叫跨域。注意&#xff1a;类…

23种设计模式(10)——门面模式

门面模式(Facade Pattern)又叫作外观模式&#xff0c;提供了一个统一的接口&#xff0c;用来访问子系统中的一群接口。其主要特征是定义了一个高层接口&#xff0c;让子系统更容易使用&#xff0c;属于结构型设计模式。 其实&#xff0c;在日常编码工作中&#xff0c;我们都在有…

[LaTeX] [数学符号] \mathbb{1}的各种替代方案:解决在 LaTeX 中输入黑板粗体的数字

[LaTeX] [数学符号] \mathbb{1}的各种替代方案&#xff1a;解决在 LaTeX 中输入黑板粗体的数字_latex mathbb-CSDN博客文章浏览阅读5w次&#xff0c;点赞36次&#xff0c;收藏80次。本文介绍如何在 LaTeX 中输入黑板粗体的数字。_latex mathbbhttps://blog.csdn.net/xovee/arti…

Python爬虫-经典案例详解

爬虫一般指从网络资源的抓取&#xff0c;通过Python语言的脚本特性&#xff0c;配置字符的处理非常灵活&#xff0c;Python有丰富的网络抓取模块&#xff0c;因而两者经常联系在一起Python就被叫作爬虫。爬虫可以抓取某个网站或者某个应用的内容提取有用的价值信息。有时还可以…

Android Studio 查看Framework源码

1、背景 安卓系统源码量很庞大&#xff0c;选择好的开发工具和方式去开发可以提升开发效率&#xff0c;常用的开发工具有Source Insight 、Visual Studio Code、Android Studio&#xff0c;vscode适合C和C代码开发&#xff0c;java层代码无法跳转和提示&#xff0c;因此&#…

2023 年江西省职业院校技能大赛软件测试(高职组)赛项样题

2023 年江西省职业院校技能大赛软件测试&#xff08;高职组&#xff09;赛项样题 任务一&#xff1a;功能测试&#xff08;45 分&#xff09; 1、测试计划&#xff08;5 分&#xff09; 任务描述 针对功能测试任务&#xff0c;划分和界定测试范围&#xff0c;分解测试任务&…