vue使用webrtcstreamer实现rtsp无转码播放实时监控

这篇具有很好参考价值的文章主要介绍了vue使用webrtcstreamer实现rtsp无转码播放实时监控。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

因为video标签只能播放特定格式的视频,比如MP4、WebM和Ogg格式,而对于这种视频流文件则需要通过转码实现,而vue-video-player也只能播放特定格式的视频。所以要播放监控的实时视频,除了在浏览器的地址栏直接打开摄像头的地址,还可以通过webrtc-streamer和video标签在页面实现监控实时播放。

包含rtc脚本文件(不转码减少资源消耗)和rtcstreamer.js文件
链接:https://pan.baidu.com/s/1QhRmDFHi7m7qZIcm1xblzA 
提取码:zuwk

1、下载webrtc-streamer,对应下载自己电脑操作系统的版本(需要去GitHub下载,GitHub下载较慢,建议通过工具加速下载)

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

webrtc视频监控,vue.js,前端,javascript,webrtc

2、解压下载包,双击ebrtc-streamer.exe文件,启动服务

(注意:这里也可以通过当前文件夹下用Cmd命令webrtc-streamer.exe -o或者自己编写一个脚本文件去启动exe文件,这样占用CPU会很少,直接双击exe文件会比较吃CPU)

webrtc视频监控,vue.js,前端,javascript,webrtc

webrtc视频监控,vue.js,前端,javascript,webrtc

当你看到下图是时就说明你启动成功,此时在浏览器访问localhost:8000可以看到本机监控画面(到这里,恭喜你,走完一半了,接下来就是重点了)

webrtc视频监控,vue.js,前端,javascript,webrtc

 3、将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到你的Vue项目public目录下,在index.html文件里引入这两个js文件。

webrtc视频监控,vue.js,前端,javascript,webrtc

 js文件引用

  index.html文件引用

<script type="text/javascript" src="<%= BASE_URL %>webrtcstreamer.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>adapter.min.js"></script>
 

4、编写页面

注意:因为是在本机启动服务,所以 new WebRtcStreamer(id,serverUrl)中URL需要传入127.0.0.1和端口号8000

<template>
  <div >
    <a-button @click="handleChange">切换</a-button>
    <video id="video" style="z-index: 9099999;" autoplay width="900" height="900"></video>
  </div>
</template>
<script>
export default {
  name: 'index1',
  data() {
    return {
      webRtcServer: null//webRtcServer上下文
    }
  },
  mounted() {
    //video:需要绑定的video控件ID
    //127.0.0.1:8000:启动webrtc-streamer的设备IP和端口,默认8000
    this.webRtcServer = new WebRtcStreamer('video', 'http://127.0.0.1:8000')
    //需要查看的rtsp地址,地址为财物系统地址
    this.webRtcServer.connect('rtsp://127.0.0.1:8554/video')
  },
  beforeDestroy() {
    this.webRtcServer.disconnect()
    this.webRtcServer = null
  },
  methods: {
    /**
    * 有多个视频源的情况下,直接调用服务的connect方法即可
    */
    handleChange() {
      this.webRtcServer.connect('rtsp://admin:admin@192.168.23.80:554/1/1')
    }
  }
}
</script>
 
<style scoped>
</style>

这样就实现浏览器直接通过rtsp视频流观看实时监控视频了。

webrtc视频监控,vue.js,前端,javascript,webrtc

方案结论:

性能好,延迟低(实际测试是毫秒级别),实时性高

目前为止已知的最好方案是WebRTC方案,阿里云提供的相关服务就是采用了这一方案

其他付费方案:

猿大师

开源方案:

ZLMediaKit

 文章来源地址https://www.toymoban.com/news/detail-740681.html

到了这里,关于vue使用webrtcstreamer实现rtsp无转码播放实时监控的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • VUE3+TS+VITE+webrtc-streamer实现实时视频播放(监控设备-rtsp,进来保你成)

    目录 1、下载webrtc-streamer,下载最新window版本  2、解压下载包  3、双击webrtc-streamer.exe启动服务  4、引入webrtc-streamer         1、将下载包中html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目录下 2、在index.html文件里引入这两个js文件 5、使

    2024年02月05日
    浏览(41)
  • vue3+nodejs(websocket)实现监控拉rtsp流,使用flv.js+ffmpeg包(主要建立websocket是为了转码传流)

    关于拉取监控摄像头的流,我个人去查了很多资料,也是因为之前没有接触过这一模块,加上目前公司也没有后端去写接口,所以我直接用node去写websocket,与前端建立起通信,能够进行后续转码、传流,能够实现实时播放监控画面。 这里的rtsp流是要事先知道的,监控的这个

    2024年02月20日
    浏览(49)
  • 【Vue2 + webrtc-steamer】rtsp流在Web端实时播放

    操作系统:Win10 vue版本:vue2 必须将rtsp通过 播放器插件/服务器/… 转换为 flv/webrtc/… 最新在线可用rtsp码流地址(可用 flv播放器 测试): rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4 rtmp地址 rtmp://ns8.indexforce.com/home/mystream https地址 : MP4 : https://baikevideo.cdn.bcebos.com/med

    2024年02月02日
    浏览(42)
  • 使用VUE和webrtc-streamer实现rtsp实时监控

    项目中遇到过的问题:通过 前端 Vue 或者后端Java 实现对监控的实时预览播放,截图等,刚开始肯定是没有头绪,通过多方面的查找和验证,就有了这篇文章。 提示:以下是本篇文章正文内容,下面案例可供参考 下载地址:https://github.com/mpromonet/webrtc-streamer/releases 如下图则启

    2024年01月20日
    浏览(46)
  • web端实现rtsp实时推流视频播放可行性方案分析

    1.1 什么是WebRTC 百度概念 :WebRTC (Web Real-Time Communications) 是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和(或)音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装

    2024年02月16日
    浏览(37)
  • 纯前端ELECTRON+VUE+FFMPEG实现多路播放RTSP流

    近期有项目需求前端播放rtsp视频流,项目是由electron+vue3搭建,没有后端,因此需要在前端实现解析rtsp流及播放,经过多方考察最后选用了ffmpeg+jsmpeg方案实现,具体实现是参考了@牧也の旅行 大佬的这篇文章 原文地址 实现的,感谢@牧也の旅行 一直在回复我的各种小白问题,

    2024年02月04日
    浏览(37)
  • 使用JavaCV和Spring Boot搭建HTTP-FLV直播服务:实时播放RTSP、RTMP和桌面投屏画面

    使用JavaCV和Spring Boot搭建HTTP-FLV直播服务:实时播放RTSP、RTMP和桌面投屏画面 摘要: 在本文中,我们将探讨如何使用JavaCV和Spring Boot构建一个简单的HTTP-FLV直播服务,该服务可以在浏览器中通过flv.js进行实时播放RTSP、RTMP和桌面投屏的画面。我们将介绍所需的开发环境和依赖库

    2024年01月20日
    浏览(54)
  • 海思3559万能平台搭建:RTSP实时播放的优化

      之前的rtsp功能,仅仅是对demo的简单修改,(是通过保存本地文件后在读取本地文件数据再播放)。这样存在的主要问题是,如果是先保存好文件,在读取文件传给rtsp播放,有多此一举的嫌疑,而且这样人为的增加了延迟不说,有没有这么大的硬盘让我们一直实时观看呢

    2023年04月08日
    浏览(53)
  • SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)

    其实原理就是: 将监控通过FFMPEG,推送给Nginx,前端通过Nginx地址拉取视频,就可以播放了。 1:安装FFMPEG. 2:下载并且配置nginx. 3:使用java代码实现调用cmd或者linux窗口,并且运行操作FFMPEG的命令,进行监控视频rtsp格式的推送,推送给nginx. 4:前端写一个video标签就可以,Src写nginx的固定地

    2023年04月16日
    浏览(87)
  • python调用海康视频汇聚平台API,获得所有摄像头设备编号、实时播放rtsp地址、回放rtsp地址

    1. 需求 海康视频汇聚平台(综合安防管理平台(iSecure Center)V2.1.0)的openAPI的demo均为c++/java代码,官方没有python代码。 需通过汇聚平台获得所有摄像头的设备编号,利用设备编号获得摄像头IP地址和rtsp地址。 2. 思路 根据海康开放平台官方文档《资源中心综合安防管理平台(

    2024年02月10日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包