前端实现预览功能,播放rtsp视频流（node.js+ffmpeg+flv.js）

已于 2024-08-28 11:18:16 修改
阅读量1w 收藏 27
点赞数 7
分类专栏： 实时预览（直播） 流媒体 转码推流 文章标签： 经验分享 node.js vue.js
于 2022-04-21 10:15:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39389954/article/details/124313804
版权

实现思路

获取摄像头rtsp流→通过node.js+ffmpeg转码→通过哔哩哔哩flv.js播放

1.获取摄像机RTSP流（之前文章有说明不多阐述）

2.配置流媒体服务器

1.下载安装node.js,运行node.js（网上教程很多自行下载安装即可）

2.下载ffmpeg解压使用
在这里插入图片描述

3.使用flv.js播放rtsp流

3.1运行node.js
链接：https://download.csdn.net/donlod/qq_39389954/87430463?spm=1001.2014.301.5503
在这里插入图片描述
indes.js中修改成自己ffmpeg的文件路径
运行
在这里插入图片描述
3.2运行前端项目
链接：https://download.cdn.net/download/qq_3989954/87430455?spm=1001.2014.3001.5503在这里插入图片描述注:rtsp路径中一些特么字符需要使用使用转义符路示例中的？使用%3F,其他转义符可自行查找
运行项目
在这里插入图片描述
此时可以在上一步的窗口看到已经进行转码了

在这里插入图片描述
输入网址直接访问
在这里插入图片描述

阔乐猫
关注
专栏目录
【vue2】前端如何播放rtsp 视频流，拿到rtsp视频流地址如何处理，海康视频rtsp h264 如何播放
amoureux555的博客
11-16 1万+
【vue2】前端如何播放rtsp 视频流，拿到rtsp视频流地址如何处理，海康视频rtsp h264 如何播放
使用ffmpeg+flv.js + websokect播放rtsp格式视频流
qq_52703909的博客
01-04 1382
对于rtsp的视频流网上有很多种的解决方案，但是大的趋势还是利用ffmpeg的工具进行rtsp的视频解析进行一个推流，我最终选择bilibili开源的flv.js，代码十分的简单全部都在底层封装好了。实现的方式也比较容易理解，ffmpeg进行rtsp的视频流解析转为flv视频流通过websocket通信把flv的流推给前端。其中两个地方比较坑需要注意，一定要安装编译后的版本，不能取源码。一、搭建服务端1、安装node服务端主要是用node运行解析rtsp转为flv的服务。
前端使用WebRtc播放rtsp视频流
最新发布
tony_stark的博客
09-12 433
项目中需要使用前端播放RTSP视频流，网上找了不少资料，最后决定用WebRtc进行播放。
前端播放rtsp流附件
07-18
使用这附件可以在前端播放流媒体（rtsp）， 怎么使用在博客上有。
前端播放RTSP视频流，使用FLV请求RTSP视频流播放（Vue项目，在Vue中使用插件flv.js请求RTSP视频流播放）
weixin_65793170的博客
07-01 3776
在浏览器中请求 RTSP 视频流并进行播放时，直接使用原生的浏览器 API 是行不通的，因为它们不支持 RTSP 协议。为了解决这个问题，开发者通常会选择使用像 flv.js 这样的库，它专为在浏览器中播放 FLV 和其他流媒体格式设计。然而，flv.js 本身并不直接支持 RTSP，这意味着我们需要一个额外的步骤来桥接 RTSP 和 flv.js。
【前端】rtsp 与 rtmp 视频流的播放方法
热门推荐
热爱思考、活力满满、开朗爱笑的年轻人
02-20 3万+
【前端】rtsp 与 rtmp 视频流的播放方法导读写在前面前端如何在网页上播放 rtsp 视频流 导读 RTSP（Real Time Streaming Protocal），RFC2326，实时流传输协议，是 TCP/IP 协议体系中的一个应用层协议。… 额，算了，不写这些了；想了解科普知识的，自己去网上查；而且这也不是我写博文的风格，咋们直接上干货！ 写在前面 如何生成一个 rtsp 的视频流？如何播放 rtsp 视频流？ 你可以在网上搜一下 rtsp 测试视频流，看有没有现成的 rtsp 视频流连接可
前端播放rtsp视频流（最后使用WebRtc）
LJF330的博客
07-27 3362
​ 项目需要将实验室里的摄像头画面引入到前端页面中，故对目前常见的几种方法进行了尝试，虽然过程坎坷但结局是好的。
前端播放RTSP流视频
人和代码有一个能跑
08-11 987
jsmpeg+node+ffmpeg
使用后端node.js转流服务 通过ffmpeg将rtsp视频流转成flv通过websocket推送给前端数据流
04-21
使用后端node.js转流服务 通过ffmpeg将rtsp视频流转成flv通过websocket推送给前端数据流
后端node.js转流服务 通过ffmpeg将rtsp视频流转成flv通过websocket推送给前端
02-28
后端node.js转流服务 通过ffmpeg将rtsp视频流转成flv通过websocket推送给前端
使用flv.js + websokect播放rtsp格式视频流
yinshipin007的博客
11-26 5335
-----------------------------------------------------------------分割线，我又来了，还是视频的问题，这次优化了，提出了新的方案----------------------------------------------------------------------------------------------------------------------因为我是写成的一个组件，所以我的rtsp地址是传进来的。
html 播放rtsp流
02-18
这是一个通过html播放rtsp流的文件，可以在IE浏览器和 google4.5以下版本的浏览器运行。 主要内容：1.可以设置vlc的视频的缓冲时间， 2.可以设置取RTSP/TCP流
前端播放视频流（rtsp，rtmp,hls）.html
07-30
我這個内容就是博客上门的内容
html5播放rtsp视频流.zip
05-27
html5播放rtsp，需要简单的搭建node.js和ffmpeg环境，直接运行index.js并修改html网页中的url即可
express-ffmpeg-flv:浏览器显示海康摄像头实时预览画面纯前端解决方案
05-12
将海康设备的 rtsp 协议视频流通过 ffmpeg 转码为 flv 实时视频流，并将实时视频流通过 express 服务生成 http 长链接或 ws 返回。 最后通过b站开源的 flv.js 插件在浏览器上显示直播画面。 安装 ffmpeg 安装 fluent...
前端播放流媒体（RTSP）
weixin_41869700的博客
07-18 2万+
目标：在你的浏览器（浏览器）上播放的RTSP视频流 问题：然而，H5的标签<视频>不支持这样的播放 方案： 1，这里利用我们的流媒体在你的服务端开启一个websocket代理（代理），负责接收rtsp流，并转播给你的浏览器客户端，流媒体在客户端利用中间件（Media Sources Extensions）将经过转播收到的RTP H264和AAC包转化成MP4包，“喂...
浏览器flv.js实时播放rtsp转码视频，浏览器内存泄露问题排查并解决
每天进步一点
06-26 768
由于浏览器无法直接播放rtsp协议，需要通过转码服务进行推送给前端，技术采用的转码服务+websocket+flv进行浏览器播放，有很多现场都没有出现浏览器崩溃的情况，最近遇到一个现场反馈说系统经常崩溃，无法打开，最后排查的原因是客户的浏览器直接崩溃了，经过和客户沟通复现这一过程，反向客户有个使用习惯，打开实时视频不会关闭，也不会刷新，就一直播放；当向后缓冲区持续时间超过此值(以秒为单位)时，对SourceBuffer执行自动清理。如果采用其他的组件，原理应该都差不过，自行阅读文档或者源码进行设置。
【前端】rtsp 与 rtmp 视频流的播放方法，最终入职阿里
HUAXIAL的博客
03-30 2365
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件VUE组件库级组件封装-高复用弹窗组件。
rtsp 获取视频流 java_浏览器无插件播放rtsp视频流 java后台 + js + html
06-10
要在Java后台中获取RTSP视频流，可以使用JavaCV这个开源库。它提供了一个名为FFmpeg的Java接口，可以让你直接在Java中使用FFmpeg的功能。 以下是获取RTSP视频流的示例代码： ```java import org.bytedeco.javacv.*; import javax.swing.*; public class RTSPTest { public static void main(String[] args) throws Exception { String rtspUrl = "rtsp://example.com/stream.mp4"; // RTSP流地址 FFmpegFrameGrabber grabber = new FFmpegFrameGrabber(rtspUrl); grabber.start(); CanvasFrame canvas = new CanvasFrame("RTSP Stream"); // 创建一个窗口用于显示视频流 canvas.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); while (true) { Frame frame = grabber.grab(); if (frame == null) { break; } canvas.showImage(frame); } grabber.stop(); canvas.dispose(); } } ``` 这个代码片段使用JavaCV的FFmpegFrameGrabber类从RTSP地址获取视频流，并将每一帧显示到一个Swing窗口上。 如果你想在浏览器中无插件播放RTSP视频流，可以使用WebRTC技术。WebRTC是一种基于Web的实时通信技术，它可以让你在浏览器中直接播放RTSP视频流，而不需要使用任何插件。 以下是使用WebRTC播放RTSP视频流的示例代码： ```html <!DOCTYPE html> <html> <head> <title>RTSP Stream</title> </head> <body> <video id="video" autoplay></video> <script> const video = document.getElementById('video'); const stream = new MediaStream(); // RTSP地址 const rtspUrl = 'rtsp://example.com/stream.mp4'; // 创建RTSP客户端 const client = new rtsp.RTSPClient(); client.connect(rtspUrl); client.onMedia = ({ track, type }) => { // 将RTSP流添加到MediaStream中 stream.addTrack(track); // 如果是视频流，则将其绑定到video元素 if (type === 'video') { video.srcObject = stream; } }; client.start(); </script> </body> </html> ``` 这个代码片段使用了一个名为rtsp.js的开源库来实现WebRTC播放RTSP流。它创建了一个RTSP客户端，并将获取到的视频流添加到一个MediaStream中，最终将视频流绑定到一个video元素上，从而在浏览器中无插件播放RTSP视频流。
评论 26
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值