vue实现监控流-rtsp转flv

最新推荐文章于 2024-09-12 09:45:29 发布
最新推荐文章于 2024-09-12 09:45:29 发布
阅读量7.9k 收藏 17
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xmt970324/article/details/123600324
版权
本文档指导读者如何验证RTSP流的可用性，通过VLC进行测试，然后详细介绍了下载和配置FFmpeg的过程。接着，展示了如何在Node环境中设置flvjs_test代码，并使用npm运行开发服务器。最后，提供了输入RTSP流地址进行播放的说明。
摘要由CSDN通过智能技术生成

一、先使用vlc等工具测试，确保rtsp流可连接（自行安装vlc）

rtsp://xxxx:xxxxxx@xxxxxxxxx:8554/live
在这里插入图片描述能播放，则进行下一步操作。

二、下载ffmpeg，地址 https://ffmpeg.zeranoe.com/builds/在这里插入图片描述在这里插入图片描述然后配置环境：

D:\ffmpeg_jsmpeg\ffmpeg-2021-10-07-git-b6aeee2d8b-essentials_build\bin

在这里插入图片描述
在这里插入图片描述

三、后端node环境以及前端配置

下载此代码：https://github.com/LorinHan/flvjs_test
在这里插入图片描述

安装node环境：node express
npm install express express-ws fluent-ffmpeg websocket-stream -S -D
在这里插入图片描述

其中index.js中setFfmpegPath这里是指明了ffmpeg的安装路径。

在这里插入图片描述

在这里插入图片描述

然后 npm run dev 运行即可

四、输入地址

在这里插入图片描述

猿民
关注
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
10-14
主要介绍了vue-video-player实现实时视频播放方式(监控设备-rtmp流)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
javacv实现rtsp转flv用于网页前端播放验证可用
05-10
rtsp地址不同的nvr有不通的拼接方式 rtsp转flv用于网页前端播放 经验证可用
在vue2中使用webrtcstreamer解析播放rtsp流
最新发布
zero_er的博客
09-12 523
adapter.min.js文件位置：webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Debug\html\libs中。webrtcstreamer.js文件位置：webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Debug\html中。测试输入流是否可以播放（这里可以播放，但有些原因嵌入到页面里也无法播放）启动完成后可以在浏览器中输入设置的ip和端口打开，看看是否启动成功。播放成功了，右键，打开编码器信息，查看是否是h264编码。
rtsp转flv
刚入视频监控行业的菜鸡2090741348
10-30 1801
rtsp转flv
rtsp转成flv实现http播放
weixin_37985149的博客
07-11 1472
以上完成安装ffmpeg，详细可参考https://blog.csdn.net/jxhaha/article/details/127428026。http://NGINX地址:8085/live?下载地址：https://github.com/arut/nginx-rtmp-module.git。3、下载nginx-http-flv-module。6、安装libfdk_aac。7、安装libmp3lame。4、安装libx264。5、安装libx265。8、安装libopus。9、安装ffmpeg。
rtsp流直接保存为FLV，ts,avi文件
07-13
把rtsp流直接保存为文件，目前支持AVI，FLV，TS等格式
摄像头rtsp流转http-flv实现低延迟实时在线播放
weixin_47914635的博客
03-22 5199
因使用大华摄像头，需要在系统中实时播放视频，因此通过自己搭建一个流媒体服务器，将rtsp流转为flv格式，前端再使用flv.js实现在线播放功能。
前端rtsp转flv格式视频播放
qq_22266389的博客
08-15 959
附带云台按钮和预置点页面，仅供参考。
Java 实现Rtsp 转rtmp,hls,flv
@chenk的博客
08-13 7988
服务支撑：FFmpeg + srs(流媒体服务器)整个流程是 FFmpeg 收流转码 推 rtmp 到流媒体服务 流媒体服务再 分发流到公网。
Web H5 接入海康录像机 (rtsp转flv)
izhaong
12-14 8207
最终效果 开始了~ 私网映射为公网 如果你需要非局域网内访问就需要做这一步 映射好公网后 ip 可能会变动 建议用域名做动态映射 搭建转流服务器(RTSP => RTMP) 可参考其他方法 通过FFmpeg将rtsp流摄像头视频转码为rtmp播放 https://blog.csdn.net/u012492535/article/details/79220398 我用的现成的docker镜像部署的服务 原理一样的 GitHub地址: https://github.com/ossr
Windows上搭建Nginx-http-flv实现rtsp视频流推流到rtmp流媒体服务器并转换和前端拉取http-flv视频流
BADAO_LIUMANG_QIZHI的博客
03-14 2721
上面两篇文章实现将本地视频文件模拟上传至rtmp流媒体服务器并转换为http-flv视频流格式在前端进行播放，如果是要对接摄像头实现rtsp视频流格式视频上传，并可进行拉取和前端播放。
海康摄像头rtsp转rtmp,使用flv播放.zip
05-14
前端经过好多的尝试，终于在谷歌上把海康视频流rtsp转成rtmp成功播放了，不足之处在于视频有0.3秒延迟
实现ffmpeg将RTSP流封装成mp4、avi、flv文件的源码
07-28
实现ffmpeg将RTSP流封装成mp4、avi、flv文件的源码，也只封装格式转换，希望对你有用.........
RTSPtoHTTP-FLV:使用JavaCV开发的rtsp流转http-flv流(rtmp已不支持)并进行推流的流媒体服务
05-11
RTSPtoHTTP-FLV 使用JavaCV开发的rtsp流转http-flv流（rtmp已不推荐）并进行推流的流媒体服务 求star！！！ 提问求助等优先提交issues，让其他遇到同样问题的朋友可以很方便找到解决方式，尽量避免直接加微信qq咨询。业务合作可发邮件到或添加微信qq咨询。 各大浏览器目前均已不再支持flash，故推荐使用http-flv来代替rtmp使用。 只需修改本项目controller中rtmp地址生成的地方改为生成http-flv地址即可，各流媒体服务器对于http-flv地址规则可能会有差异，根据所选流媒体服务器来制定http-flv地址。 个人博客： csdn博客： gitee地址： 可以实现各h264编码的监控设备rtsp流转rtmp流（只需要改动controller中rtsp指令的拼接格式） 接口调用方式： [注]： 该项目中的一些处理是为了满足公司项目需
vue播放rtmp视频流
03-06
本文将详细介绍如何在基于Vue.js的应用中实现RTMP视频流的播放。 #### 技术栈 1. **Vue.js**: Vue 是一种用于构建用户界面的渐进式框架。 2. **Video.js**: Video.js 是一个开源的 HTML5 和 Flash 视频播放器项目...
rtsp流视频实现网页播放
03-15
总结起来，实现"rtsp流视频实现网页播放"需要对RTSP协议、流媒体服务器、前端音视频处理以及WebRTC有一定理解，并结合如Streamedian这样的工具进行适配和转换。这个过程涉及到的技术栈广泛，对于前端开发者来说，是...
Java 监控直播流rtsp协议转rtmp、hls、httpflv协议返回浏览器
java1527的博客
09-08 2879
Java 监控直播流rtsp协议转rtmp、hls、httpflv协议返回浏览器目录。
使用FFmpeg结合srs4将rtsp流转换为FLV&HLS
沧海之巅的专栏
06-22 3038
伊拉克 Al Sharqiya 电视台：rtmp://ns8.indexforce.com/home/mystream]视频播放地址：http://192.168.32.245:18080:players/srs_player.html。由于使用了 entrypoint bash , 所以此时应该已经进入了 ffmpeg的 Container里。就能看到你的转码视频流，点击前面的 蓝色ID，就能在线播放，同时你也能看到它给你的播放地址。登录 http://192.168.32.245:18080/
13 rtsp视频服务 基于node+ffmpeg 转换为 flv 视频服务
970655147的专栏
10-24 5488
接上一篇文章继续讨论 前端播放 rtsp 视频服务会使用到 ffmpeg 来实现 rtsp 服务转换为 rtmp 服务, nginx-http-flv 来实现 rtmp 服务转换为 http-flv 服务, 因此 前端可以直接播放视频这里使用 node 作为后台服务, 使用 ffmpeg 基于 websocket 协议将 rtsp 直接转换为 前端可用的 flv 视频数据我们这里 参考的代码来自于主要包含一个 node 作为代理服务器, 加上一个测试的前端项目。
vue实现rtsp转flv
06-06
要实现rtsp转flv，可以使用一些开源的JavaScript库，例如flv.js、hls.js等。下面是一个使用flv.js的示例代码： 1. 首先需要安装flv.js库，在命令行中输入： ``` npm install flv.js --save ``` 2. 然后在Vue组件中引入flv.js： ``` import flvjs from 'flv.js'; ``` 3. 在Vue的mounted生命周期函数中创建flv.js的实例： ``` mounted() { if (flvjs.isSupported()) { const videoElement = document.getElementById('video'); const flvPlayer = flvjs.createPlayer({ type: 'flv', url: 'rtsp://your_rtsp_stream_url', isLive: true }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); } } ``` 其中，'rtsp://your_rtsp_stream_url'是你的rtsp流的地址。该代码会创建一个flv.js的实例，将rtsp流转换为flv流，并播放在id为'video'的HTML5 video元素上。 需要注意的是，由于浏览器的安全限制，直接从rtsp流中获取数据可能会被浏览器阻止。因此，你需要将rtsp流转换为flv流，并通过HTTP服务器传输。你可以使用开源的RTSP转发工具，例如live555、ffmpeg等来实现。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值