rtsp解析视频流

这里先说一下 播放rtsp 视频流,尽量让后端转换一下其他格式的流进行播放。因为rtsp的流需要flash支持,现在很多浏览器不支持flash。
先说一下这里我没有用video-player插件,因为它需要用flash ,在一个是我下载flash后,还是无法播放,一个错接着一个错。所以我放弃了这个插件

目前我实现了rtsp流播放是用webrtc-streamer(这个的缺点是起webrtc-streamer会卡,所以尽量让后端转一下流)
首先需要安装

rtsp流播放是用webrtc-streamer

npm i  video.js 

这我使用的是webrtc-streamer实现简单,这个不需要后端转流。

下载webrtc-streamer
在这里插入图片描述
下载后打开文件找到html文件打开html后,下有一个webrtcstreamer.js、和libs文件下有一个adapter.min.js,
在这里插入图片描述
在这里插入图片描述
复制到自己的项目中的静态文件下去
在这里插入图片描述
在静态文件的index.html文件中引入webrtcstreamer.js和adapter.min.js文件
在这里插入图片描述
vue文件代码

 <video  :id="`video`"  autoplay width="100%"  :src="mp4Url" :poster="cover"  height="100%"></video>data() {return {webRtcServer: null,}
},mounted() {this.webRtcServer = new WebRtcStreamer( `video`,location.protocol + "//127.0.0.1:8000")this.webRtcServer.connect('rtsp://rtspstream:e1e5e887cb08291cd943f5caa81dd8bc@zephyr.rtsp.stream/movie')},beforeDestroy() {this.webRtcServer.disconnect();this.webRtcServer = null;},

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/324233.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JVM篇:直接内存

直接内存 直接内存并不是JVM的内存结构&#xff0c;直接内存是操作系统的内存&#xff0c;Java本身并不能对操作系统的内存进行操作&#xff0c;而是通过调用本地方法。直接内存常用于NIO作为缓冲区存在&#xff0c;分配成本较高但是读写性能好&#xff0c;并且不受JVM内存回收…

Linux下NUMA 内存管理初步理解

LINUX 系统在多核下,以及NUMA架构技术下 如何管理物理内存? 经过初步了解 发现系统对内存有以下工作 1 映射 2 内存碎片 3 内存回收 4 内存池 5 冷热页 6 水位线和保留内存 7 支持内存条热插拔 8 大页管理 这些功能给人感觉,尤其是DBA感觉是重新实现了数据缓存池的功…

如何访问GitHub快的飞起?两步解决访问超时GitHub,无法访问GitHub的问题

1.查找国内访问比较快的IP 站长工具网址&#xff1a; https://tool.chinaz.com 测速链接: https://tool.chinaz.com/speedtest/github.com 输入 github.com 点击查看分析 往下滑动&#xff0c;找一个比较快的IP&#xff0c;然后去修改hosts配置文件 &#xff08;例如&#xff…

【JAVA】泛型和Object的区别

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a; JAVA ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 前言 在Java编程中&#xff0c;我们常常需要处理不同类型的数据&#xff0c;而泛型和Object是两种处理类型的主要机制。本文…

Java超高精度无线定位技术--UWB (超宽带)人员定位系统源码

UWB室内定位技术是一种全新的、与传统通信技术有极大差异的通信新技术。它不需要使用传统通信体制中的载波&#xff0c;而是通过发送和接收具有纳秒或纳秒级以下的极窄脉冲来传输数据&#xff0c;从而具有GHz量级的带宽。 UWB&#xff08;超宽带&#xff09;高精度定位系统是一…

每日软测知识:自动化测试重运行是好是坏?

如果有人手动运行测试&#xff0c;那么他们会暂停并了解更多信息。但是&#xff0c;当自动测试失败时&#xff0c;其余部分可能会继续运行。在套件完成之前&#xff0c;你是没有办法看到测试报告的&#xff0c;并且自动化程序不会在故障时执行任何额外的操作尝试找出问题。当剩…

非接触式红外测温MLX90614

1.MLX90614简介 MX90614是一款由迈来芯公司提供的低成本&#xff0c;无接触温度计。输出数据和物体温度呈线性比例&#xff0c;具有高精度和高分辨率。TO-39金属封装里同时集成了红外感应热电堆探测器芯片MLX81101&#xff08;温度是通过PTC或是PTAT元件测量&#xff09;和信号…

imgaug库指南(四):从入门到精通的【图像增强】之旅

引言 在深度学习和计算机视觉的世界里&#xff0c;数据是模型训练的基石&#xff0c;其质量与数量直接影响着模型的性能。然而&#xff0c;获取大量高质量的标注数据往往需要耗费大量的时间和资源。正因如此&#xff0c;数据增强技术应运而生&#xff0c;成为了解决这一问题的…

2024年某书最新x-s-common签名算法分析以及点赞api接口测试nodejs(2024-01-05)

2024年某书又更新了x-s-common算法&#xff0c;现在的版本是&#xff1a;3.6.8。这个签名算法现在是越来越重要了&#xff0c;许多接口都要用到。比如&#xff1a;评论&#xff0c;点赞等接口&#xff0c;没有这个算法采集不到数据。 一、chrome逆向x-s-common算法 1、x-s-comm…

AES加密数据:Python加密Java解密

总体步骤&#xff0c;分2步&#xff1a; 1.Python加密存入数据库 1.1 AES加密&#xff0c;CBC模式 1.2 秘钥Key 和 向量异或 IV 1.3数据加盐PKCS5Padding 1.4 Base64转码 2.Java解密API传前端展示 代码示例&#xff1a; 1.Python加密存入数据库 needAESText "需要…

NLP one-hot编码

&#x1f368; 本文为[&#x1f517;365天深度学习训练营学习记录博客\n&#x1f366; 参考文章&#xff1a;365天深度学习训练营\n&#x1f356; 原作者&#xff1a;[K同学啊 | 接辅导、项目定制]\n&#x1f680; 文章来源&#xff1a;[K同学的学习圈子](https://www.yuque.co…

记录第一次在GitHub上面提交Issue

第一次在GitHub上面提交Issue&#xff0c;记录一下。 对着源码调了好久才发现&#xff0c;问题并不在程序而在模型&#xff08;虽然只是一个很小的问题&#xff0c;但是能够解决问题&#xff0c;并且做出了自己的一点小小贡献&#xff0c;还是很开心。嘻嘻&#xff0c;发博客记…