草庐IT

vue播放rtsp视频流

黄桃罐头和你 2023-04-03 原文

工作有要播放视频监控的需求，最近就自己先了解了一下网页播放rtsp视频流的方法，以下是我的个人经验。
最终选择了vue+webrtc-streamer实现在网页播放rtsp流这种方法进行测试。

个人经验

第一次尝试了vue-video-player+videojs的方法，发现只适用于支持flash的浏览器，但目前所有浏览器的最新版都已不支持flash插件，于是放弃。

注意vue-video-player有个坑，在引入css文件的时候一直报错，原因是直接npm install vue-video-player出了问题。

经过各种百度半天，发现我使用的是vue2，不知道为什么没人说，vue2版本如果想要使用vue-video-player的话必须下载4.x版本。vue3的下载已经更改了插件名，是@videojs-player/vue。

下载4.0.1版本发现css文件可以正常引入，但是浏览器不支持flash所以没有播放成功。

第二次尝试ffmpeg，发现太复杂了，琢磨了半天无果。

第三次尝试webrtc-streamer，终于成功，并且相对于前两种方法都更简单！

vue+webrtc-streamer实现在网页播放rtsp视频流

  1. 首先下载webtrc-streamer的压缩包，在github上有

    https://github.com/mpromonet/webrtc-streamer/releases

    下载windows版本

  1. 双击webrtc-streamer.exe启动服务

  1. 将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public/stactic目录下，在index.html文件里引入这两个js文件。

  2. 写测试代码

    <template>
  <div class="home">
    <video id="video" autoplay width="600" height="400"></video>
    <video id="video1" autoplay width="600" height="400"></video>
  </div>
</template>
//不放心我又引入了一遍
   <script type="text/javascript" src="../../public/stactic/webrtcstreamer.js"></script>
   <script type="text/javascript" src="../../public/stactic/adapter.min.js"></script>
<script>
export default {
  name: "HomeView",
  data() {
    return {
      webRtcServer: null,
      webRtcServer1: null
    };
  },
  mounted() {
    //192.168.1.100是启动webrtc-streamer的服务器IP，8000是webrtc-streamer的默认端口号，可以在服务端启动的时候更改的
    this.webRtcServer = new WebRtcStreamer(
      "video",
      location.protocol + "//127.0.0.1:8000"
    );
    //需要看的rtsp视频地址，可以在网上找在线的rtsp视频地址来进行demo实验，在vlc中能播放就能用
    // this.webRtcServer.connect(
    //   "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4"
    // );
    this.webRtcServer.connect(
      "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4"
    );
      //第二个视频
      //根据不同的video标签来控制
    this.webRtcServer1 = new WebRtcStreamer(
      "video1",
      location.protocol + "//127.0.0.1:8000"
    );
    this.webRtcServer1.connect(
      "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4"
    );
  },
  methods: {},
  beforeDestroy() {
    this.webRtcServer.disconnect();
    this.webRtcServer = null;
  }
};
</script>

此时运行网页已经可以看到视频了。

但是有缺点（还未解决）：

  • 播放的视频没有声音

  • 控制台报错但不影响正常播放


如果有大佬知道如何解决，欢迎留言！
以上内容参考http://t.csdn.cn/gj93S

视频流rtspspanclasstokenvue.js$javascript$前端

有关vue播放rtsp视频流的更多相关文章

  1. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  2. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、

  3. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  4. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  5. ruby - 如何更改此正则表达式以从未指定 v 参数的 Youtube URL 获取 Youtube 视频 ID？ - 2

    目前我正在使用这个正则表达式从YoutubeURL中提取视频ID:url.match(/v=([^&]*)/)[1]我怎样才能改变它，以便它也可以从这个没有v参数的YoutubeURL获取视频ID:http://www.youtube.com/user/SHAYTARDS#p/u/9/Xc81AajGUMU感谢阅读。编辑:我正在使用ruby​​1.8.7 最佳答案 对于Ruby1.8.7，这就可以了。url_1='http://www.youtube.com/watch?v=8WVTOUh53QY&feature=feedf'url

  6. ruby - 如何以编程方式将 mp3 转换为 itunes 可播放的 aac/m4a 文件？ - 2

    我一直在寻找一种以编程方式或通过命令行将mp3转换为aac的方法，但没有成功。理想情况下，我有一段代码可以从我的Rails应用程序中调用，将mp3转换为aac。我安装了ffmpeg和libfaac，并能够使用以下命令创建aac文件:ffmpeg-itest.mp3-acodeclibfaac-ab163840dest.aac当我将输出文件的名称更改为dest.m4a时，它无法在iTunes中播放。谢谢! 最佳答案 FFmpeg提供AAC编码功能(如果您已编译它们)。如果您使用的是Windows，则可以从here获取完整的二进制文件。

  7. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  8. ruby - 如何播放 mp3 文件？ - 2

    我如何用ruby​​编写一个脚本，当从命令行执行时播放mp3文件(背景音乐)？我试过了run="mplayer#{"/Users/bhushan/resume/m.mp3"}-aosdl-vox11-framedrop-cache16384-cache-min20/100"system(run)但它也不起作用，以上是播放器特定的。如果用户没有安装mplayer怎么办。有没有更好的办法？ 最佳答案 我一般都是这样pid=fork{exec'mpg123','-q',file} 关于ruby

  9. vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！ - 2

    平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图： 这样做用户体验瞬间得到提升，接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计，这里就不贴了，主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否

  10. 续集来了丨UI自动化测试（二）：带视频，实在RPA高效进行web项目UI自动化测试 - 2

    一、什么是web项目ui自动化测试？通过测试工具模拟人为操控浏览器，使软件按照测试人员的预定计划自动执行测试的一种方式，可以完成许多手工测试无法完成或者不易实现的繁琐工作。正确使用自动化测试，可以更全面的对软件进行测试，从而提高软件质量进而缩短迭代周期。二、构建测试用例的“九部曲”（一）创建流程包划分功能模块日常测试活动中，都会根据功能模块进行拆分，所以在设计器中我们可以通过创建流程包的方式来拆分需要测试的功能模块，如下图中操作创建一个电脑流程包并且取名为对应的功能模块名称，如果有多个功能模块就创建多个对应的流程包，实在RPA设计器有易用的图形可视化界面，方便管理较多的功能模块。（二）在流程包

随机推荐