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.mfbz.cn/a/291934.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++多态性——(4)纯虚函数与抽象类

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 我们不能选择命运&#xff0c;但我们可…

【Python机器学习】k近邻——k近邻分类

k-NN算法最简单的版本是只考虑一个最近邻&#xff0c;也就是想要预测的数据点最近的训练数据点&#xff0c;预测结果就是这个训练数据点的已知输出。 除了仅考虑最近邻&#xff0c;还可以考虑任意&#xff08;k个&#xff09;邻居&#xff0c;这也是k近邻算法名字的由来。在考…

Python正则表达式急速入门~正则居然这么容易掌握!

正则表达式在程序开发中会经常用到&#xff0c;比如数据&#xff08;格式&#xff09;验证、替换字符内容以及提取字符串内容等等情况都会用到&#xff0c;但是目前许多开发人员对于正则表达式只是处于了解或者是基本会用的阶段。一旦遇到大批量使用正则表达式的情况&#xff0…

Linux基础知识点-(七-线程)

目录 一、线程和进程 1.1 线程的基本概念 1.2 线程的优缺点 二、创建线程 2.1 pthread_create() - 创建线程函数 三、线程属性 四、线程退出 4.1 pthread_exit() 4.2 pthread_join() 4.3 pthread_detach() 一、线程和进程 1.1 线程的基本概念 在很多Linux的书籍基…

搜维尔科技:深入研究工作场所人体工程学中的动作捕捉

创造安全舒适的工作环境对于员工的健康和组织的整体成功至关重要。这就是为什么我们很高兴举办有关“在工作场所人体工程学中利用动作捕捉技术”的网络研讨会。 通过利用动作捕捉的力量&#xff0c;组织可以彻底改变工作场所人体工程学的方法。它使您能够根据客观的运动数据进行…

C++面向对象高级编程(侯捷)笔记2

侯捷C面向对象高级编程 本文是学习笔记&#xff0c;仅供个人学习使用&#xff0c;如有侵权&#xff0c;请联系删除。 如果你对C面向对象的组合、继承和委托不了解&#xff0c;对什么是拷贝构造、什么是拷贝赋值和析构不清楚&#xff0c;对类设计中的Adapter、pImpl、Template…

使用定时器setInterval,在Moment.js 时间格式化插件基础上完成当前时间持续动态变化

1、引入插件 npm install moment --save 2、js配置&#xff1a;当前需要使用的文件中直接引入 import moment from moment; 3、代码实现&#xff1a;定义一个变量进行回显 3.1、dom部分 <span> {{ timeData }} </span> 3.2、js代码 <script> import mo…

直播获奖(live)CSP2020

描述 NOI2130 即将举行。 为了增加观赏性&#xff0c;CCF 决定逐一评出每个选手的成绩&#xff0c;并直播即时的获奖分数线。 本次竞赛的获奖率为w&#xff0c;即当前排名前w 的选手的最低成绩就是即时的分数线。 更具体地&#xff0c;若当前已评出了 p 个选手的成绩&#…

GROUP_CONCAT报错解决

有如下表 其中awardee和awardee_unit都是保存的json类型的字符串, awardee是多个人员id, awardee_unit是部门的全路径 查询时要注意转换 需要将name拼接起来合并成一行,直接 GROUP_CONCAT 会报错 百度的大部分答案是修改数据库配置去掉严格模式,如果不方便修改数据库可以这样…

力扣刷题-二叉树-最大二叉树

654.最大二叉树 给定一个不含重复元素的整数数组。一个以此数组构建的最大二叉树定义如下&#xff1a; 二叉树的根是数组中的最大元素。 左子树是通过数组中最大值左边部分构造出的最大二叉树。 右子树是通过数组中最大值右边部分构造出的最大二叉树。 通过给定的数组构建最大…

Javascript学习之路:事件在页面加载和关闭时的执行顺序

&#x1f449;前言 在实际项目中&#xff0c;如果我想在打开浏览器页面加载时执行某些任务&#xff0c;比如获取当前页面的全部或部分数据&#xff0c;优先想到的事件是onload&#xff0c;当关闭页面时&#xff0c;我们也常常会使用onunload事件。但是这两个事件却有一定的局限…

图解算法数据结构-LeetBook-回溯01_机械累加器

请设计一个机械累加器&#xff0c;计算从 1、2… 一直累加到目标数值 target 的总和。注意这是一个只能进行加法操作的程序&#xff0c;不具备乘除、if-else、switch-case、for 循环、while 循环&#xff0c;及条件判断语句等高级功能。 注意&#xff1a;不能用等差数列求和公式…

多级缓存、OpenResty、Redis分布式缓存、进程缓存

目录标题 一、预期表现二、环境配置1、nginx环境2、OpenResty环境3、redis环境4、进程缓存环境 三 、主要编码工作3.1、OpenResty编码openresty/nginx/conf/nginx.conflualib/redis_common.lualualib/common.luanginx/lua/item.lua 3.2、进程缓存编码 四、结果分析4.1 初始无缓…

【KingbaseES】实现MySql函数len

原理&#xff1a;调用length函数返回到结果中 CREATE OR REPLACE FUNCTION len(input_text text) RETURNS integer AS $$ BEGIN RETURN length(input_text); END; $$ LANGUAGE plpgsql;结果如下&#xff1a;

Docker介绍、常用命令、项目部署

什么是Docker 简单说&#xff1a;Docker就是一个虚拟机&#xff0c;专业说&#xff1a;它是一个开源的容器平台。它和我们常用的VMware有很多相似的地方。 名词解释 镜像/images 由本体打包出来的文件。并不是文件本身&#xff0c;但是具有该文件的功能。举个不太贴切的例子&…

毛虫目标检测数据集VOC格式550张

毛虫&#xff0c;一种令人惊叹的生物&#xff0c;以其独特的外貌和习性&#xff0c;成为了自然界中的一道亮丽风景。 毛虫的外观非常特别&#xff0c;身体呈圆柱形&#xff0c;表面覆盖着许多细小的毛发&#xff0c;这使得它们在叶子上伪装得非常好。它们的头部有一对坚硬的颚…

【JavaSE】P1~P32 进制,字节,Java代码规范,常量,变量,运算符

目录 IDEA常用快键键和快捷用法一、需要复习的重难点概念1 进制、字节、DOS操作命令语句进制及转化字节DOS系统命令提示符 2 Java 常用代码规范3 常量及常量的打印4 变量数据类型及取值范围变量的概念和使用数据类型转换ASCII码表&#xff08;128种&#xff09;基本数据类型极其…

P1019 [NOIP2000 提高组] 单词接龙

网址如下&#xff1a;P1019 [NOIP2000 提高组] 单词接龙 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 很怪&#xff0c;不知道该说什么 我试了题目给的第一个测试点的输入&#xff0c;发现输出和测试点的一样&#xff0c;但是还是WA 不是很懂为什么 有没有大佬帮我看一下…

用 Python 抓取 bilibili 弹幕并分析!

01 实现思路 首先&#xff0c;利用哔哩哔哩的弹幕接口&#xff0c;把数据保存到本地。接着&#xff0c;对数据进行分词。最后&#xff0c;做了评论的可视化。 02 弹幕数据 平常我们在看视频时&#xff0c;弹幕是出现在视频上的。实际上在网页中&#xff0c;弹幕是被隐藏在源代码…

14.两数之和

题目 class Solution {public int[] twoSum(int[] nums, int target) {int[] ret {-1,-1};for(int i0;i<nums.length;i) {for(int ji1;j<nums.length;j) {if(nums[i] nums[j] target) {ret[0] i;ret[1] j;}}}return ret;} }
最新文章