前端视频流终极方案:Vue3 实现 RTSP 毫秒级低延迟播放 🔥
📝 背景在视频监控、直播等场景中,RTSP (Real Time Streaming Protocol) 是一种广泛使用的视频流传输协议。然而,痛点在于:**浏览器原生并不支持 RTSP 协议 **,传统的 <video> 标签无法直接播放 RTSP 流。
为了在 Web 前端实现 RTSP 视频播放,我们需要“曲线救国”:将 RTSP 流转换为浏览器原生支持的 WebRTC 协议。
本文将手把手教你如何使用 MediaMTX 作为流媒体服务器,在 Vue3 前端项目中实现丝滑的 RTSP 视频流播放。
🛠️ 解决方案我们需要两个核心工具:
MediaMTX : 一个轻量级的开源流媒体服务器,核心能力是支持 RTSP 转 WebRTC。
**FFmpeg **: 强大的音视频处理瑞士军刀,用于模拟 RTSP 视频流进行开发测试。
技术架构图:
1RTSP源流 --> MediaMTX服务器 --> WebRTC协议 --> 浏览器播放
💻 实操演练1. 视频流模拟首先,下载并启动 MediaMTX。
然后,下载 FFmpeg 工具, ...
宝塔面板真香警告!Vue+SpringBoot项目部署全流程详细指南,30分钟搞定上线
在当今快速迭代的开发环境中,如何高效部署项目是每个开发者必须掌握的技能。宝塔面板作为一款强大的服务器管理工具,能够极大简化部署流程。本文将以Vue前端+SpringBoot后端项目为例,手把手带你完成从零到一的完整部署过程。
1.环境安装1.1 安装nginx在应用商店搜索nginx,点击安装即可
1.2 安装数据库同样在应用商店搜索,根据你使用的数据库,安装对应的即可,这里以mysql为例:
1.3 安装java环境这个稍微有点区别,在左侧菜单栏选择网站,然后再顶部二级菜单栏选择java项目,点击Java环境管理,选择你java项目依赖的版本安装:
2.数据库迁移2.1 创建数据库:点击数据库>选择你使用的数据库>点击添加数据库>点击确定创建:
2.2 迁移数据和表结构上传生成的数据库迁移sql文件,点击导入即可
3.后端部署3.1 上传jar包点击文件,在www/wwwroot目录下,新建一个文件夹,作为后端项目的文件目录:
然后将jar包传到该目录下:
3.2 添加java项目选择网站>Java项目>添加项目,在项目路径一项, ...
别再傻傻分不清!5分钟搞懂像素、分辨率、PPI、码率
在数字时代,我们每天都会接触到大量的图片和视频。无论是手机、电脑屏幕,还是电视、相机,都离不开一些关键的技术术语,例如:像素、分辨率、码率、PPI和DPI。这些概念虽然常见,但很多人对它们的具体含义和区别不甚了解。本文将用通俗易懂的方式,带你一次性搞懂这些令人困惑的术语。
1. 像素 (Pixel) - 构成图像的基石像素(Pixel,简称px)是“Picture Element”(图像元素)的缩写。你可以把它想象成构成一幅数字图像的最小单位,就像是用无数个微小的、单一颜色的“马赛克”方块拼凑出一幅完整的图画。
核心特点:
它是数字图像的最小组成部分。
每个像素只能显示一种颜色。
一张图片由成千上万甚至数百万个像素组成,像素越多,图像的细节就越丰富。
当你把一张图片放大到极致时,你看到的那些小方格就是一个个的像素。
2. 分辨率 (Resolution) - 图像的尺寸与清晰度分辨率(Resolution)通常用来描述一幅图像所包含的像素数量,是衡量图像细节表现能力的重要指标。它通常表示为“宽度像素数 × 高度像素数”。
常见表示:
**1080p (Full HD)**: ...
[bug]记录前端项目中依赖冲突bug的解决过程
bug描述在cesium+vue3项目开发时,安装依赖后跑不起来,报错提示如下:
排错过程:根据错误提示知道:Cesium引用了@zip.js/zip.js中的zip-no-worker.js文件,推测可能是@zip.js/zip.js的版本无正确,导致cesium拿不到这个引用的文件。
于是到node_modules中查看了@zip.js/zip.js依赖的文件夹:
果然没有,验证了我的推测,于是又查看了cesium中依赖的zip包版本,和实际安装的zip包版本,进一步确认了两者的版本不一致:
问题解决1.先用了npm,把@zip.js/zip.js包删了以后,想用npm i命令指定版本安装一下,发现npm报错,很离谱。
2.直接放弃npm,选择了pnpm安装依赖,在package.json中添加一项配置,强制项目中所有对@zip.js/zip.js的依赖使用该版本:
12345"pnpm": { "overrides": { "@cesium ...
45-[bug]跳转页面时,pinia状态被异常清空
问题背景与描述为了跟上时代的步伐,最近在开发一个vue3+vite+pinia的新项目开发过程中,体验了下vscode的copilot生成代码,不得不说效率真的牛逼!但同时,也会有一些小缺点小问题,需要我们去微调代码,就比如我今天遇到的坑。
我在某个页面组件中使用了useStore中的方法,为store中的某个状态初始化了数据,但跳转到另一个页面时,发现store中的状态被清空了。
解决方法使用router.push方法替代原来的window.location.href做页面跳转即可解决
12345// 跳转到评分页面const jumpToGrade = (item: Contestant) => { // window.location.href = `/grade?id=${item.id}` router.push({ path: '/grade', query: { id: item.id } })}
问题排查过程拷问了deepseek,豆包等AI,都说要对stor ...
vue项目启动报错-Multiple assets emit different content to the same filename index.html
问题描述:启动vue项目时,报如下错误:
问题解决:查阅资料后发现,可能是文件路径中有括号导致
1D:\work\17_ym(vue3)\szgc-gcym-server\yj_ym_tdp_ui //路径中含有英文括号
尝试重命名路径(删除路径中的括号)后重新启动,出现了新的报错:
点进node_modules里点了一下依赖,发现无法跳转,推测可能是重命名路径后导致pnpm依赖链接失效,尝试执行命令重新安装依赖:
1pnpm install
安装成功后运行项目:
1npm run serve
问题解决,成功启动项目:
Nginx静态网站部署配置详解 | 新手必看指南 🚀
✨ 前言:作为一名从零开始学习Nginx配置的开发者,我在初次部署静态网站时,面对Nginx复杂的配置文件结构感到十分困惑。nginx.conf、sites-available、sites-enabled等目录和文件各自承担着什么职责?它们之间又是如何协同工作的?经过深入研究和实践验证,我整理出了一些初学nginx时的常见问题,以问题的形式为新手建立对nginx的整体认识,希望能帮助初学者快速掌握Nginx的核心配置逻辑。
🛠️环境:操作系统:Ubuntu 22.04 LTS🐧
nginx版本:nginx/1.18.0 (Ubuntu)
❓常见问题解答:Q1:nginx配置文件有哪些 ?📂Nginx 配置文件结构总览
配置文件/目录
路径示例
主要作用
核心配置项/内容
使用说明
nginx.conf (主配置文件)
/etc/nginx/nginx.conf
全局配置入口,定义Nginx运行的基础参数
- user, worker_processes - events块 - http块 - include指令
相当于程序的 main 函数 ...
🚀 前端项目部署小白教程:从打包到上线的完整指南
✨ 前言作为一名前端开发者,我们通常只需要将打包好的文件交给后端或运维同学即可完成部署。但在某些场景下,我们也需要亲自将前端资源部署到服务器上。本文将以最直观的方式,带你一步步完成前端项目的完整部署流程,并解释其中涉及的关键概念!🎯
📚 核心概念解析在开始实操前,先了解几个基础概念,这将帮助你更好地理解整个部署过程:
1. 什么是 Nginx?🌐Nginx(发音为”engine-x”)是一款高性能的开源Web服务器,同时具备反向代理、负载均衡和HTTP缓存等强大功能。它最初是为了解决C10K问题(即单服务器处理万级并发连接)而设计。
以下是Nginx的核心功能概览:
功能类别
核心能力
典型应用场景
Web服务器
高效处理静态资源(HTML、CSS、JS、图片等)
托管静态网站、作为前端资源服务器
反向代理
接收客户端请求并转发给后端服务器,隐藏真实服务器信息
作为后端应用的统一入口和安全屏障
负载均衡
将请求分发到多个后端服务器
分散高并发流量,提高应用可用性
HTTP缓存
缓存静态内容及后端响应,加速访问速度
提升用户体验,减少服务器负载
SSL& ...
「SSL证书管理自动化」使用acme.sh+tccli实现全自动证书申请、上传腾讯云CDN配置(多图+长文)
前言我之前已经写过一篇certbot申请ssl证书的文章,为什么这次还要再写一遍呢? 原因在于,certbot 虽能实现服务器内部的 SSL 证书申请与自动更新,但在使用 CDN 的场景下,无法自动将证书上传并配置到腾讯云 CDN(或许有方法但我未曾深入研究)。相比之下,acme.sh 在这一场景下表现更为出色,不仅灵活性强,还能满足我的定制化需求。
acme.sh与certbot的横向对比
特性维度
acme.sh
certbot
核心设计
纯 Shell 脚本编写
由 Let’s Encrypt 官方推荐,使用 Python 编写
安装与复杂度
安装简单,配置相对复杂,尤其在使用 DNS API 时
安装与配置较为简单,但对复杂或特殊环境的支持较弱
自动化与续期
自动设置定时任务,自动化程度高
更新证书需要手动设置 cron 任务
验证方式
支持多种验证方式(如 DNS、HTTP),尤其擅长通过 DNS API 进行验证,适合通配符证书
支持 HTTP 和 DNS 验证
灵活性
非常灵活,支持众多 DNS 服务商 API,可指定证书存放路径
与主流 Web ...
41-linux安装docker全过程记录
背景Docker——容器化技术,作为现代化运维技术的一环,其重要性不言而喻。最近我在优化个人网站的过程中,发现之前使用twikoo云函数部署的方式不太能满足我对网站的性能要求,每次发送获取twikoo云函数的请求时,耗时都在一秒多甚至两秒以上。于是考虑使用docker来进行私有化部署twikoo,另外,我的腾讯云服务器快到期了,到时候续费如果涨价太厉害,我也考虑迁移服务器,届时如果把我的nginx服务也托管到docker,到时候服务器迁移起来应该会比较轻松(仅是我的想象);
系统环境系统版本:Ubuntu 22.04 LTS
过程记录1.首先打开Docker官方文档,找到了docker安装部分的教程:https://docs.docker.com/engine/install/ubuntu/#install-using-the-repository
2.遵照教程,卸载可能冲突的包123456789101112131415161718192021222324252627282930313233343536ubuntu@VM-16-3-ubuntu:~$ for pkg in docker ...
记录一个ts值导入和类型导入混淆造成的bug
问题描述vue3+ts项目开发过程中遇到一个奇怪的bug,如下图所示
排查过程:查看源代码,可以发现有两个style.ts文件,且内容不一样:
询问AI后了解到:
继续拷问AI,了解到:
解决办法:
总结:ts中值导入和类型导入需要区分清楚,如果将类型当做值导入,比如:
1import { MyInterface } from './myInterface.ts' //错误地将interface当做值导入
那么在运行时可能会出现文章开头的错误。
mapboxgl地形切片制作全流程记录
背景:内网环境下使用mapboxgl开发需要加载本地部署的离线地形切片
mapbox支持的地形瓦片规范
Mapbox 地形 RGB 瓦片。更多信息参见 https://www.mapbox.com/help/access-elevation-data/#mapbox-terrain-rgb。
Terrarium 格式的 PNG 瓦片。更多信息参见 https://aws.amazon.com/es/public-datasets/terrain/。
实践步骤:1.DEM下载使用QGIS插件STRM-Downloader可以下载全球任意经纬度范围的DEM切片
注意:使用该插件需要科学上网,如果没有科学上网没有下载成功也不会报错,这个比较坑,我科学上网以后就能正常下载了
下载完成后,在qgis中打开vrt索引文件,长这样
2.地形切片有了DEM数据后,就可以开始地形切片了,这里使用了国内大佬开发的开源地形切片工具:https://github.com/FreeGIS/dem2terrain
根据readme文档一步步操作:
1.工具下载先使用npm全局安装dem2terrai ...



![[bug]记录前端项目中依赖冲突bug的解决过程](https://picture.cyanfish.site/20251113161832.png)
![45-[bug]跳转页面时,pinia状态被异常清空](https://picture.cyanfish.site/20250826160516.png)




