当前位置: 首页 > news >正文

vue播放rtsp流方案

前言
如果rtsp没有H265的,建议直接使用webrtc-stream,简单好用,参考我之前的笔记:基于WebRtc的web播放大华海康rtsp视频流(延迟一秒以内) - Stitchhhhh - 博客园
项目地址:https://github.com/mpromonet/webrtc-streamer/releases
使用方法参考(感谢博主):https://blog.csdn.net/qq_20937557/article/details/129879697

 

如果有H265的视频流,可用以下几种方式实现:

一、rtsp2web+ffmpeg

参考:rtsp2web https://blog.csdn.net/csdn_yudong/article/details/124124137
优点:使用方法简单,传入rtsp视频流,直接播放;支持H265;前端使用jsmpeg.js延迟低;能使用H5直接播放;
个人使用认为的不足之处:
1、前端使用jsmpeg.js时,延迟很低,没有卡顿花屏,但是没有全屏功能,不过使用js实现一下也很简单;
使用flv.js时,延迟较大,卡顿比较严重,没有找到合适的办法解决;
2、在windows中部署没有问题,但是我在ubuntu18(其它linux的没有试)中没有部署成功,试过了安装ffmpeg从3、4、5、6各种版本的各种安装方式,使用ffmpeg命令都能正常处理视频流,但是在rtsp2web都没能成功;因为没有日志,没有办法找到问题和解决问题,虽然付费作者也没有给解决办法;
3、作者在视频加了水印,需找作者付费去除水印,知识付费也能理解,但是遇到的问题作者都没有给出解决办法,加上没有日志的处理,有问题时难以解决;

二、node-rtsp-stream+ffmpeg

前端也是使用jsmpeg.js,跟rtsp2web类似,也使用websocket;使用vue的可以使用此方法。

三、重点推荐:mediamtx(原rtsp-simple-server)

项目地址:https://github.com/bluenviron/mediamtx/tree/main
参考(感谢博主):https://blog.csdn.net/qq_20937557/article/details/132271507?spm=1001.2014.3001.5501

先说优点:

不管是在windows还是linux,安装和使用都极其简单;
作者写的文档比较详细,使用过程中遇到的问题很少,不需要去参考其他文档;
在github上进行提问以及bug提交作者都能回复并及时修复bug,非常赞;
支持rtsp、rtmp、hsl;并且延迟处理的比较好;
集成webrtc可直接播放视频;
可进行视频访问加密处理;

1.安装ffmpeg
这个比较简单,网上教程也比较多,此处不做介绍。
ubuntu18.04上安装ffmpeg5.1可以参考:ubuntu18安装ffmpeg5 https://blog.csdn.net/haixiangyun/article/details/132583757

2.下载运行mediamtx_v1.0.0
下载地址:mediamtx下载地址

image

 不管是windows还是linux,都是有三个文件

image

 运行方式:

windows直接双击mediamtx.exe;
linux下在当前目录直接运行sudo ./mediamtx

mediamtx.yml文件的配置:配置成功后使用webrtc可以直接在网页中浏览视频
具体配置根据需求查询,下面内容主要讲webrtc的方式,hls方式延迟比较严重

 工作原理

RTSP 源 → mediamtx (WebRTC 转码) → WHEP/WHIP 协议 → 前端 WebRTC 播放

前端安装webrtc-player.js

<script setup lang="ts">
import { onMounted, onUnmounted, ref, nextTick } from "vue";
import { WebRTCPlayer } from "@eyevinn/webrtc-player";const count = ref(0);
let player: WebRTCPlayer | null = null;
let retryTimer: any = null;
const loading = ref(true); // 控制加载中提示的状态

const initVideo = async () => {const video = document.querySelector("video") as HTMLVideoElement;if (!video) return;video.muted = true;// 如果之前存在 player,销毁它,确保不复用旧连接if (player) {player.destroy();player = null;}player = new WebRTCPlayer({video,type: "whep",statsTypeFilter: "^candidate-*|^inbound-rtp",});player.on("connectionstatechange", (state: any) => {console.log("Connection:", state);if (state === "failed" || state === "disconnected") {clearTimeout(retryTimer);retryTimer = setTimeout(initVideo, 2000);}});try {// 设置加载提示loading.value = true;// 防止缓存问题,确保请求不被缓存const videoUrl = new URL("http://192.168.137.131:8889/cam_h264/whep");videoUrl.searchParams.set('nocache', Date.now().toString());  // 添加唯一参数防止缓存// 加载视频流
    await player.load(videoUrl);player.unmute();await video.play();// 视频播放成功,隐藏加载提示loading.value = false;} catch (err) {console.warn("Playback failed:", err);loading.value = false;}
};onMounted(() => {nextTick(() => setTimeout(initVideo, 200));setInterval(() => count.value++, 1000);
});onUnmounted(() => {clearTimeout(retryTimer);if (player) {player.destroy();  // 确保销毁 WebRTC 连接player = null;}
});
</script><template><div class="app-container"><div><h2>视频展示{{ count }}s</h2><!-- 加载中提示 --><div v-if="loading" class="loading-overlay"><span>加载中...</span></div><video style="width: 100%; height: 700px" playsinline /></div></div>
</template><style scoped>
.loading-overlay {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 24px;color: white;background: rgba(0, 0, 0, 0.5);padding: 20px;border-radius: 8px;
}
</style>

但是这种方式有个问题就是切换页面可以重新正常加载播放了,但是刷新就会直接加载失败,抛出错误:Playback failed: NotAllowedError: play() failed because the user didn't interact with the document first.
这是因为浏览器(特别是 Chrome、Edge、Safari)在执行 自动播放策略(Autoplay Policy)

 一句话解释原因

浏览器禁止页面在“用户未与页面交互(click、touch、key)”之前自动播放带声音的视频。

即使你设置了 video.muted = true,某些浏览器在页面 刚刷新 时,仍可能认为你没有“主动操作页面”,从而阻止自动播放。
解决方案只有使用“点击播放”等交互提示,在刷新时引导用户手动允许播放(最稳定)。
如果实在不愿意用交互的方式解决,最终版也可以直接使用iframe

 

 

 


参考原文出处链接:https://blog.csdn.net/haixiangyun/article/details/132489160

 

http://www.hskmm.com/?act=detail&tid=30119

相关文章:

  • 2025年GEO(AI搜索优化)源头厂家权威推荐榜单:云视有客科技领跑行业
  • 2025年GEO(AI搜索优化)公司口碑推荐排行榜单
  • 基于MATLAB的天线方向图综合与雷达天线设计
  • ​个人微信机器人开发
  • Kong Gateway 实操实例:代理上游服务并配置限流插件 - 指南
  • 2025 年最新二手手机交易公司推荐排行榜:聚焦企业的专业与诚信实力,为消费者精选可靠选择
  • 项目管理中的批量更新如何帮助节省时间和工作量?
  • 第三届大数据与数据挖掘国际会议(IEEE BDDM 2025)
  • CSS学习日记
  • 基于MATLAB的波导杆超声波传播仿真程序集设计与实现
  • for 循环中range的部分
  • JAVA函数式编程
  • 2025中国不锈钢反应釜厂家TOP5权威推荐(附技术参数对比)
  • MySQL数据库
  • 中电金信 :源启数据建模平台:自定义功能上线,实现高效模型管理
  • 国产软件项目管理革命:Gitee PPM如何重塑开发效率
  • 网关本质论
  • 用最通俗易懂的方式解读以太坊的dAI团队和ERC-8004标准
  • 赋能智慧农业:ISUP协议视频平台EasyCVR智慧农业视频远程监控管理方案
  • 集成开发工具 IDEA下载
  • 10.12一周观察
  • 视频融合平台EasyCVR在智慧水利中的实战应用:构建全域感知与智能预警平台
  • 数据流图和uml九张图 - f
  • 03_mysql运维核心基础
  • 2025.10.13+7
  • Adobe Animate 2025 中文破解版下载|HTML5 动画开发 + 2D 交互设计工具(附安装教程)
  • 2025年10月双氧水厂家最新权威推荐榜:高效消毒与环保品质之选
  • GSPO
  • 2025 年制袋机源头厂家最新推荐排行榜权威发布:30 项专利加持企业领衔,细分领域新锐品牌深度盘点
  • 日记6