草庐IT

Vue-Instant

全部标签

vue中播放rtsp流

实现vue中播放rtsp视频流的问题实现vue中播放rtsp视频流的问题开始科普了解一下使用下载ffmpeg(链接:[https://www.ffmpeg.org/download.html#build-windows](https://www.csdn.net/))使用rtsp2web在serve下初始化和下载在serve下创建index.js前端代码问题最后参考。[^1]实现vue中播放rtsp视频流的问题背景:项目中通过摄像机提供的rtsp流来显示画面,但是在编写项目中,需要将rtsp实时流画面传输到web前端页面中。于是找了很多方法,都是后台转码转成rtmp来播放,现在大部分插件和浏览

基于Vue3的数据可视化低代码平台

经过技术调整与迁移,JNPF快速开发平台升级为Vue3.0技术。Vue3.0作为最新版本的Vue.js框架,拥有更强大的性能和更丰富的功能,为低代码开发平台注入了全新的活力。而JNPF快速开发平台作为其应用的典范之一,利用Vue3.0的优势,在低代码开发领域斩获巨大成功。一、什么是Vue.js?Vue.js是一款基于MVVM模式的JavaScript框架,通过其简洁、高效的语法和强大的功能,帮助开发者构建出更加灵活、快速和可维护的Web应用。与其他框架相比,Vue区别于市场上的繁杂,它注重易用性和迅速上手的优势,给开发者提供了更大的自由度。无论是用于构建简单的个人项目,还是复杂的企业级应用,V

vue3使用websocket(亲测解决)

1.需要后端给你一个ws的接口比如:ws://192.168.2.19:8080/chat/${name}我这里的name是后端要求登录成功后搞得2.后端给我个登录的接口,需要登录后才能实现长链接constlogin=(name)=>{toLogin(data).then(res=>{console.log(res);init(name)}).catch(err=>{console.log(err);})}3.封装init方法constinit=(name)=>{if(typeof(WebSocket)==="undefined"){alert("您的浏览器不支持socket")}else{c

Vue 3 + ffmpeg + wasm 实现前端视频剪辑、音频剪辑、音波展示、视频抽帧、gif抽帧、帧播放器、字幕、贴图、时间轴、素材轨道

预览www.bilibili.com/video/BV1YT411Y7YJ技术栈:💪Vue3、Vue-Router4、Vite、pnpm、esbuild、TypeScript☀️Pinia状态管理🌪Tailwind原子css集成💥ffmpeg、wasm底层音视频处理集成功能多轨道时间轴,支持帧缩放,时间缩放支持多种类型轨道的添加删除多功能轨道调节,支持音视频轨道内裁剪,支持轨道拖拽调整顺序、起止帧可伸缩轨道列表,灵活调整轨道列表高度可配置参数容器,轨道属性调节全部由配置文件生成ffmpeg核心API封装管理调用队列封装,支持并发运行rungif抽帧、视频抽帧、视频裁切、音视频分离、文件下载音频

毕业设计So Easy:Java Vue SpringCloud实现博客系统

目录1、项目功能2、项目架构设计3、项目数据库设计4、项目架构实现4.1、Vue架构的实现4.2、SpringCloud架构的实现4.3、博客的高可用的实现5、用户的个人中心5.1、登录的智能验证5.2、博客的登录注册5.3、登录的权限验证6、用户的安全中心6.1、用户的安全布局6.2、用户的邮箱注册6.3、用户的手机注册6.4、用户的安全认证6.5、用户的密码安全6.6、用户的账号申诉7、用户的文件中心7.1、用户的头像存储7.2、博客的图片存储8、用户的签到中心9、用户的会员中心10、用户的支付中心11、用户的博客中心11.1、用户的访问主页11.2、用户的文章中心11.3、发表个人的博客

vue中js实现点击复制文本到剪贴板-三种方案

vue中js实现点击复制文本到剪贴板-三种方案因为在网上找了一些很杂乱不适用所以自己写一篇记录分享一下vue中js实现点击复制文本到剪贴板-三种方案效果:方案一:使用原生API(clipboard)首先,我们需要安装clipboard库,它是一个轻量级的JavaScript库,用于复制/粘贴文本到剪贴板。命令行运行npminstallclipboard--save进行安装。npminstallclipboard--save使用该库实现代码如下:template>div>button@click="copyText">复制文本/button>/div>/template>script>impor

Vue3 中 keepAlive 如何搭配 VueRouter 来更自由的控制页面的状态缓存?

在vue中,默认情况下,一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时,会创建一个只带有初始状态的新实例。但是vue提供了keep-alive组件,它可以将一个动态组件包装起来从而实现组件切换时候保留其状态。本篇文章要介绍的并不是它的基本使用方法(这些官网文档已经写的很清楚了),而是它如何结合VueRouter来更自由的控制页面状态的缓存全部缓存我们先搭建一个Vue项目,里面有三个页面a,b,c,并给它们一些相互跳转的逻辑和状态a页面A页面跳转B跳转Cimport{ref}from"vue";import{useRouter,useRoute}

Vue——路由守卫(全局前置路由守卫beforeEach、全局后置路由守卫router.afterEach、独享路由守卫beforeEnter、组件内路由守卫 )

 作用:对路由进行权限控制分类:全局守卫、独享守卫、组件内守卫目录一、全局前置路由守卫router.beforeEach(切换之前调用,to、from、next参数)改进代码二、全局后置路由守卫router.afterEach(切换之后调用,to、from参数,没有next参数)三、独享路由守卫beforeEnter(某一个路由所单独享用的,只有前置没有后置)四、组件内路由守卫(在组件内编写) beforeRouteEnter进入前  beforeRouteLeave离开后 一、全局前置路由守卫router.beforeEach(切换之前调用,to、from、next参数) 全局前置路由守卫—

【万字长文】Vue+SpringBoot实现大文件秒传、断点续传和分片上传完整教程(提供Gitee源码)

前言:最近在实际项目中碰到一个需求,客户可能会上传比较大的文件,如果采用传统的文件上传方案可能会存在服务器压力大、资源浪费甚至内存溢出的一些安全风险,所以为了解决一系列问题,需要采用新的技术方案来实现大文件的上传;空闲的时候参考了网上的一些相关教程,最后自己归纳总结了一下,本篇博客我就逐步讲解了我是如何一步步去实现大文件秒传、断点续传和分片的这三个功能的,每段代码都会进行讲解,在博客的最后我会提供Gitee源码供大家下载。目录一、为什么要使用该技术方案 二、什么是秒传三、什么是断点续传 四、什么是分片上传五、上传流程六、搭建SpringBoot项目6.1、准备工作 6.1.1、导入pom依赖6

vue 脚手架文件结构及加载过程浅谈

1.初始化脚手架  1.1 全局安装@vue/cli npminstall-g @vue/cli  1.2切换到创建项目的目录,执行vuecreateprojectname  1.3选择符合自己要求的项进行Y/N,最终生成项目文件2.脚手架文件结构|--node_modules:存放下载依赖的文件夹|--public:存放不会变动静态的文件,它与src/assets的区别在于,public目录中的文件不被webpack打包处理,会原样拷贝到dist目录下|--index.html:主页面文件|--favicon.ico:在浏览器上显示的图标|--src:源码文件夹|--assets:存放组件中