rtsp流实现web端实时播放(海康+大华)

最近的电力项目需要嵌入海康摄像头画面,之前没有做过类似的流媒体播放,所以有些懵;
海康开放平台的webAPI,有插件还是无插件,都不适合自研web系统的嵌入,所以需要自己进行解流;
首先,介绍一下相关流的知识:

常见的摄像头都支持rtsp取流,可浏览器不支持直接使用video标签播放rtsp流,所以需要转换。

每个厂商的rtsp取流格式不一样,可以自行去官网查看;

我们使用webrtc-streamer进行取流,什么是webrtc-streamer?

webrtc-streamer是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的项目,它内置了一个小型的 HTTP server 来对 WebRTC需要的相关接口提供支持。

下载地址:https://github.com/mpromonet/webrtc-streamer
选取自己电脑对应的版本;

实现步骤

下载解压

在这里插入图片描述

启动webrtc-streamer.exe文件

访问127.0.0.1:8000 就可以在浏览器看到桌面监控画面
在这里插入图片描述

将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目录下 (我尝试在index.html中引入这俩个文件,在vue代码中直接使用,但出现白屏,没有画面,所以在public文件下建立一个静态页面,直接访问本地资源)

在这里插入图片描述

代码实现

在这里插入图片描述

最终实现效果

在这里插入图片描述
图片加了马赛克;

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

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

相关文章

02- 使用Docker安装RabbitMQ

使用Docker安装RabbitMQ 下载安装镜像 方式一: 启动docker服务,然后在线拉取 # 在线拉取镜像 docker pull rabbitmq:3-management# 使用docker images查看是否已经成功拉取方式二: 从本地加载 ,将RabbitMQ上传到虚拟机中后使用命令加载镜像即可 docker load -i mq.tar启动M…

Linux编程4.5 网络编程-套接字(Socket)

1、简介 Socket(套接字)是一种通讯机制,它包含一整套的调用接口和数据结构的定义,它给应用进程提供了使用如TCP/UDP等网络协议进行网络通讯的手段。 Linux中的网络编程通过Socket接口实现,Socket既是一种特殊的IO,提供对应的文件…

TEC温度器温度控制器

一 主要特点 1 两路独立的串口,可同时手动和串口指令设定 PID 和温度; 2 一拖二结构,一个调试器控制两个控温模块单元; 3 精准控制温度,用户可自行修正;PT100/PT1000/NTC3435 温度电阻偏差; …

数据结构从入门到精通——堆

堆 前言一、二叉树的顺序结构及实现 (堆)1.1二叉树的顺序结构1.2堆的概念及结构 二、堆的练习题答案 三、堆的实现3.1堆向下调整算法3.2堆的创建3.3建堆时间复杂度3.4堆的插入3.5堆的删除3.6堆的代码实现 四、堆的具体实现代码Heap.hHeap.cTest.c堆的初始化堆的销毁…

3、鸿蒙学习-在AGC创建HarmonyOS 项目或应用

项目和应用介绍 关于项目 项目是资源、应用的组织实体。资源包括服务器、数据库、存储,以及您的应用、终端用户的数据等。在您使用部分服务时,您是数据的控制者,数据将按照您设置的数据处理位置来存储在指定区域。 通常,您不需…

如何使用EMC测试软件执行辐射抗扰度测试?(二)测试、校准方法及调制

一、前言 上一篇文章为大家介绍了使用EMC测试软件执行辐射抗扰度测试的测试方法。本章将介绍频率变化模式测试方法、校准方法及调制。 如何使用EMC测试软件执行辐射抗扰度测试?(一)测试方法 二、频率变化模式测试方法 大多数EMC标准没有描…

R语言自定义颜色

一、创建颜色梯度&#xff08;渐变色&#xff09; 在绘热图时&#xff0c;需要将数值映射到不同的颜色上&#xff0c;这时就需要一系列的颜色梯度colorRampPalette 函数支持自定义的创建一系列的颜色梯度。 代码示例&#xff1a; library(RColorBrewer)x <- colorRampPal…

基于FPGA的PSRAM接口设计与实现

该系列为神经网络硬件加速器应用中涉及的模块接口部分&#xff0c;随手记录&#xff0c;以免时间久了遗忘。 一 PSRAM与HyperRAM 1、概述 2、异同 接口协议不同&#xff0c;因此在IP设计时需要注意。 Hyperram(Winbond)&#xff1a;HyperBus协议 PSRAM(AP公司)&#xff1a;X…

Linux:设置别名命令alias

相关阅读 Linuxhttps://blog.csdn.net/weixin_45791458/category_12234591.html?spm1001.2014.3001.5482 在Linux中alias命令用于为一串字符&#xff08;常代表命令&#xff09;设置一个别名&#xff0c;该别名在Bash读取并解析一行命令时会被展开。 下面是该命令的语法。 用…

微信小程序问题定位——sourcemap文件

使用sourceMap在微信小程序中进行线上问题定位&#xff0c;主要可以通过以下步骤实现&#xff1a; 下载微信开发者工具首先&#xff0c;确保已经安装了微信开发者工具&#xff0c;这是进行小程序开发和调试的基础。登录微信公众平台并下载sourceMap文件&#xff1a;登录微信小…

tablulator 表格插件使用 vue3 + ts

项目中使用的是layui框架&#xff0c;layui整体使用起来还是挺好用的&#xff0c;界面风格简约&#xff0c;上手也简单&#xff0c;但是layui自带的表格性能真的不咋行&#xff0c;基本上显示超过500条&#xff0c;就很出现浏览器卡顿&#xff0c;全选的时候&#xff0c;浏览器…

校园生活信息平台:Java+Vue+MySQL全栈实践

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…