VUE3 播放RTSP实时、回放(NVR录像机)视频流(使用WebRTC)

1、下载webrtc-streamer,下载的最新window版本

Releases · mpromonet/webrtc-streamer · GitHub

 2、解压下载包

 3、webrtc-streamer.exe启动服务

(注意:这里可以通过当前文件夹下用cmd命令webrtc-streamer.exe -o这样占用cpu会很少,直接双击exe文件会占用cpu)

cmd  webrtc-streamer.exe -o 启动如下图所示,此时在浏览器访问127.0.0.1:8000可以看到本机监控画面

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

5、修改视频编码:(H.264)

6、编写实时播放测试页面 

<template>

  <video id="video" controls autoplay muted width="800" height="600"></video>

</template>

<script setup>

const webRtcServer = ref();

// webrtc服务器地址

const IP = "http://127.0.0.1:8000";

onMounted(() => {

  initVideo();

});


 

onBeforeUnmount(() => {

  destroyVideo();

});

// 页面激活

onActivated(() => {

  // 缓存页面 打开页面 实现播放

  const video = document.getElementById("video");

  video.paused && video.play();

});

// 页面停用

onDeactivated(() => {

  // 缓存页面 离开页面 实现暂停

  const video = document.getElementById("video");

  video.play && video.pause();

});


 

// 创建视频实例

const initVideo = () => {

  webRtcServer.value = new WebRtcStreamer("video", IP);

  //需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。

  //注意:视频编码格式必须是H264的,否则无法正常显示,编码格式可在摄像头的后台更改

  webRtcServer.value.connect(

    "rtsp://admin:123456@192.168.1.64:554/Streaming/Channels/101"

  );

};

// 销毁视频实例

const destroyVideo = () => {

  webRtcServer.value &&

    (webRtcServer.value.disconnect(), (webRtcServer.value = null));

};

</script>

<style scoped lang="scss">

</style>


 

7、录像机NVR回放视频流地址编写

rtsp://用户名:密码@IP:554/Streaming/tracks/通道及码流starttime=年月日t时分秒z&endtime=年月日t时分秒z 

例如 回放开始时间为2024-03-12 10:30:00结束时间为2024-03-12 11:40:30且通道号为1的主码流视频

// 其它步骤同上

const url="rtsp://admin:123456@192.168.1.65:554/Streaming/tracks/101?starttime=20240312t103000z&endtime=20240312t114030z"

 webRtcServer.value.connect(url);

注意:可以没有结束时间,如果没有去掉 “ &endtime=20240311t174030z ”这一块;

注意:视频编码格式必须是H264的

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

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

相关文章

idea Apipost 插件导出接口文档字段类型全部是string

idea版本&#xff1a;2023.2.1 Apipost-Helper-2.0插件版本&#xff1a; 联系官方客服后&#xff0c;更换插件版本&#xff0c;问题解决。更换后的插件版本为&#xff1a; 插件链接放在文章首部了&#xff0c;可直接下载&#xff0c;使用idea直接安装这个zip包&#xff0c;无需…

深度学习pytorch学到哪种程度就算入门了?

在开始前分享一些pytorch的资料需要的同学评论888即可拿走 是我根据网友给的问题精心整理的PyTorch这个框架&#xff0c;可以读一些入门书。 PyTorch本身是一个极其庞大的框架&#xff0c;里面有数据读取、高性能计算、自动微分、模型导出、分布式训练等等。 我觉得能用这个框…

ELK日志管理与应用

目录 一.ELK收集nginx日志 二.收集tomcat日志 三.Filebeat 一.ELK收集nginx日志 1.搭建好ELKlogstashkibana架构 2.关闭防火墙和selinux systemctl stop firewalld setenforce 0 3.安装nginx [rootlocalhost ~]# yum install epel-release.noarch -y [rootlocalhost …

使用Django框架实现音频上传功能

数据库设计&#xff08;models.py&#xff09; class Music(models.Model):""" 音乐 """name models.CharField(verbose_name"音乐名字", max_length32)singer models.CharField(verbose_name"歌手", max_length32)# 本质…

Hadoop-34 HBase 安装部署 单节点配置 hbase-env hbase-site 超详细图文 附带配置文件

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; HadoopHDFSMapReduceHiveFlumeSqoopZookeeperHBase 正在 章节内容 上节我们完成了&#xff1a; HBase的由…

Apache Paimon 在蚂蚁的应用

摘要 &#xff1a;本文整理自 Apache Paimon Committer 闵文俊老师在5月16日 Streaming Lakehouse Meetup Online 上的分享。内容主要分为以下四个部分&#xff1a; 什么是 Paimon蚂蚁 Paimon 应用场景蚂蚁 Paimon 功能改进未来规划 一、什么是 Paimon 1. 实时更新 Paimon 是…

Hadoop3:HDFS存储优化之小文件归档

一、情景说明 我们知道&#xff0c;NameNode存储一个文件元数据&#xff0c;默认是150byte大小的内存空间。 那么&#xff0c;如果出现很多的小文件&#xff0c;就会导致NameNode的内存占用。 但注意&#xff0c;存储小文件所需要的磁盘容量和数据块的大小无关。 例如&#x…

用户注册业务逻辑、接口设计和实现、前端逻辑

一、用户注册业务逻辑分析 二、用户注册接口设计和定义 2.1. 设计接口基本思路 对于接口的设计&#xff0c;我们要根据具体的业务逻辑&#xff0c;设计出适合业务逻辑的接口。设计接口的思路&#xff1a; 分析要实现的业务逻辑&#xff1a; 明确在这个业务中涉及到几个相关子…

如何通过企业微信会话存档保护企业利益?

赵总: 张经理&#xff0c;最近行业内频发数据泄露事件&#xff0c;我们的客户资料和内部沟通记录安全吗&#xff1f; 张经理: 赵总&#xff0c;我们已经采取了一系列措施来加强数据安全。特别是针对企业微信的沟通记录&#xff0c;我们最近引入了安企神软件&#xff0c;它能很…

打印室预约小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;附近打印店管理&#xff0c;文件打印管理&#xff0c;当前预约管理&#xff0c;预约历史管理&#xff0c;打印记录管理 开发系统&#xff1a;Windows 架构模式&#xff1a;SSM JD…

神经网络构造

目录 一、神经网络骨架&#xff1a;二、卷积操作&#xff1a;三、卷积层&#xff1a;四、池化层&#xff1a;五、激活函数&#xff08;以ReLU为例&#xff09;&#xff1a; 一、神经网络骨架&#xff1a; import torch from torch import nn#神经网络 class CLH(nn.Module):de…

华为的热机备份和流量限制

要求&#xff1a; 12&#xff0c;对现有网络进行改造升级&#xff0c;将当个防火墙组网改成双机热备的组网形式&#xff0c;做负载分担模式&#xff0c;游客区和DMZ区走FW4&#xff0c;生产区和办公区的流量走FW5 13&#xff0c;办公区上网用户限制流量不超过100M&#xff0c;…

Redis实战—附近商铺、用户签到、UV统计

本博客为个人学习笔记&#xff0c;学习网站与详细见&#xff1a;黑马程序员Redis入门到实战 P88 - P95 目录 附近商铺 数据导入 功能实现 用户签到 签到功能 连续签到统计 UV统计 附近商铺 利用Redis中的GEO数据结构实现附近商铺功能&#xff0c;常见命令如下图所示。…

vue3前端开发-如何让自己的网站适合SEO排名规则

vue3前端开发-如何让自己的网站适合SEO排名规则&#xff01;我们大家都知道&#xff0c;原始出生的vue3项目&#xff0c;原始代码层面&#xff0c;是没有meta标签的&#xff0c;也就是说&#xff0c;不适合SEO排名规则。那么我们能不能自己增加呢&#xff1f;答案是&#xff1a…

Photoneo 3D 网格划分

Photoneo 3D 网格划分是一种多功能软件解决方案&#xff0c;专为快速、精确的 3D 模型而设计 从多个 3D 扫描或来自 Photoneo 3D 传感器的连续 3D 数据流创建。它 旨在实现适用于各种应用的高级 3D 数据采集&#xff0c;例如 机器人引导、质量检查和逆向工程。 它以两个单独的库…

本地部署,edge-tts文本转语音解决方案

目录 什么是 edge-tts&#xff1f; 主要特点 应用场景 优势 开始使用 edge-tts 命令行安装 edge-tts 库&#xff1a; docker安装 未来展望 总结 https://github.com/rany2/edge-ttshttps://github.com/rany2/edge-tts 随着科技的进步&#xff0c;文本转语音&#xff…

leetcode145. 二叉树的后序遍历,递归法+迭代法,全过程图解+步步解析,一点点教会你迭代法后序遍历

leetcode145. 二叉树的后序遍历&#xff0c;递归法迭代法 给你一棵二叉树的根节点 root &#xff0c;返回其节点值的 后序遍历 。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[3,2,1] 示例 2&#xff1a; 输入&#xff1a;root [] 输出&#…

服务器系统盘存储不够,添加数据盘并挂载(阿里云)

目录 1.获取数据盘设备名称 2.为数据盘创建分区 3.为分区创建文件系统 4.配置开机自动挂载分区 阿里云数据盘挂载说明链接&#xff1a;在Linux系统中初始化小于等于2 TiB的数据盘_云服务器 ECS(ECS)-阿里云帮助中心 1.获取数据盘设备名称 sudo fdisk -lu 运行结果如下所示…

Preceptron感知机

前言 在上一章中&#xff0c;我们讨论了回归问题&#xff0c;主要的任务就是拟合出数据集分布的解析式。而这一次的学习中&#xff0c;我们将关注分类问题。 Classification classification分类有两种&#xff1a;二元分类和多类分类。 二元分类&#xff1a;预测二值目标&am…

k8s核心操作_存储抽象_K8S中使用ConfigMap抽取配置_实现配置热更新---分布式云原生部署架构搭建032

现在有个问题,是上面我们利用pv和pvc 就是持久卷 以及 持久卷申请,实现了对存储的,pod删除以后,对其使用的存储空间也进行了删除,那么还有个问题,对于redis这种我们希望,他的配置也管理起来. 比如这个redis的配置文件. 以后其他的配置文件也是这样. 使用配置文件的存储在k8s中…