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

news2025/3/11 15:20:37

最近的电力项目需要嵌入海康摄像头画面,之前没有做过类似的流媒体播放,所以有些懵;
海康开放平台的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.coloradmin.cn/o/1518917.html

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

相关文章

【docker】docker的常用命令

📝个人主页:五敷有你 🔥系列专栏:中间件 ⛺️稳中求进,晒太阳 常规命令 docker version #查看docker 版本信息docker info #显示docker 的系统信息,包括镜像和容器数量docker --help #查看所有的命…

性能测试-Jmeter常用元件基础使用

一、Jmeter元件 #线程组 添加HTTP请求 #配置元件 配置元件内的元件都是用于进行初始化的东西 #监听器 监听器主要是用来获取我们使用取样器发送请求后的响应数据相关信息 #定时器 定时器主要用来控制我们多久后执行该取样器(发送请求) #前置处理器 前置处…

解锁海外市场,HubSpot网站建设全攻略

在全球化日益加剧的今天,构建符合海外市场需求的网站已成为企业走向国际化的关键一步。今天运营坛将带领大家认识到全球化意识在网站建设中的重要性,并着重介绍为何选择HubSpot作为构建海外网站的首选工具,同时探讨网站设计和用户体验的关键因…

使用el-row及el-col页面缩放时出现空行解决方案

问题: 当缩放到90%或者110%,选中下拉后,下方就会出现空行 如下图所示: 关于el-row 和 el-col : 参数说明类型可选值默认值span栅格占据的列数number—24offset栅格左侧的间隔格数number—0push栅格向右移动格数number…

计算机网络 谢希仁(001-2)

计算机网络-方老师 总时长 24:45:00 共50个视频,6个模块 此文章包含1.5到1.7的内容 1.5计算机网络类别 连通 共享 分类方法 广域网是边缘部分和核心部分的核心部分 以前是拨号连接 现在是光纤 总线型 星型 环形网 1.6计算机网络的性能 带上单位之后就不是…

MySQL删除数据 文件大小不变的原因以及处理空洞问题

数据删除流程 InnoDB 里的数据都是用 B 树的结构组织的。 假设,我们要删掉 R4 这个记录,InnoDB 引擎只会把 R4 这个记录标记为删除。如果之后要再插入一个 ID 在 300 和 600 之间的记录时,可能会复用这个位置。但是,磁盘文件的大…

寻找用户痛点塑造产品价值 4大注意事项

移动互联网时代,用户价值不言而喻,只有拥有用户思维,寻找到用户痛点,塑造出产品价值,才能打造出爆款产品。因此要塑造产品价值,核心是寻找用户痛点。如果没有找到用户痛点,意味着产品无法满足用…

鸿蒙原生应用再添一批新丁!阿里旗下11款应用、广汽传祺、岚图汽车、零跑汽车、凯翼汽车 入局鸿蒙

鸿蒙原生应用再添一批新丁!阿里旗下11款应用、广汽传祺、岚图汽车、零跑汽车、凯翼汽车 入局鸿蒙 来自 HarmonyOS 微博近期消息,阿里旗下闲鱼、1688、飞猪、饿了么、盒马、菜鸟、点淘、淘宝特价版、大麦、淘票票、灯塔专业版共11款大家耳熟能详的应用今…

vue防止用户连续点击造成多次提交

中心思想:在第一次提交的结果返回前,将提交按钮禁用。 方法一:给提交按钮加上disabled属性,在请求时先把disabled属性改成true,在结果返回时改成false 方法二:添加loading遮罩层,可以直接使用e…

【Vue3】路由的query参数和params参数

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢…

计算机毕业设计-神经网络算法及对未来一月的天气状况预测系统

概要 随着对气象各项数据的观测手段、技术上的提升,对于各项或取得数据种类,精度上都有着更好的超越,而对于气象温度进行预测是目前预测数据中最重要的需要解决的问题之一。 针对如何选择预测一个月内的天气情况,本次利用神经网络…

Keil5----生成lib文件和lib文件的使用

Keil5编译环境搭建----教程目录 Keil5----生成lib文件 将.c文件生成为.lib文件,实现程序代码的保密。具体步骤如下: 前言 User_LED.c文件如下,主要实现LED灯闪烁。 步骤1 步骤2 步骤3 步骤4 步骤5 Keil5----lib文件的使用 删除User_LED…

基于java的公寓报修管理系统设计与实现(程序+文档+数据库)

** 🍅点赞收藏关注 → 私信领取本源代码、数据库🍅 本人在Java毕业设计领域有多年的经验,陆续会更新更多优质的Java实战项目,希望你能有所收获,少走一些弯路。🍅关注我不迷路🍅** 一、研究背景…

滑动窗口最大值(leetcode hot100)

给你一个整数数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1: 输入:nums [1,3,-1,-3,5,3,6,7], k 3 输…

【深度学习笔记】10_11 注意力机制

注:本文为《动手学深度学习》开源内容,部分标注了个人理解,仅为个人学习记录,无抄袭搬运意图 10.11 注意力机制 在10.9节(编码器—解码器(seq2seq))里,解码器在各个时间…

微信小程序--开启下拉刷新页面

1、下拉刷新获取数据enablePullDownRefresh 开启下拉刷新: enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新 案例: 下拉刷新,获取新的列表数据,其实就是进行一次新的网络请求: 第一步:在.json文件中开…

分享6款非常优质炫酷的前端动画特效(附在线演示)

分享6款非常不错的项目动画特效 其中有three.js特效、canvas特效、CSS动画、SVG特效等等 下方效果图可能不是特别的生动 那么你可以点击在线预览进行查看相应的动画特效 同时也是可以下载该资源的 CSS33D海盗船动画 基于纯CSS3的3D海盗船动画,该动画分两部分&…

BUGKU-WEB No one knows regex better than me

题目描述 题目截图如下&#xff1a; 进入场景看看&#xff1a; 解题思路 看到此类题目&#xff0c;直接代码审计 相关工具 base64 在线加密https://www.mklab.cn/utils/regex 解题步骤 代码审计 <?php error_reporting(0); # 从请求中获取了两个参数&#xff1…

Servlet的book图书表格实现(使用原生js实现)

作业内容&#xff1a; 1 建立一个book.html,实现图书入库提交 整体参考效果如下: 数据提交后&#xff0c;以窗口弹出数据结果&#xff0c;如: 2 使用正则表达式验证ISBN为x-x-x格式&#xff0c;图书名不低于2个字符&#xff0c;作者不能为空&#xff0c;单价在【10-100】之间…

深入解析Arm架构:掌握汇编与逆向工程,提升设备安全性——蓝狐卷带你入门

写在前面 与传统的CISC&#xff08;Complex Instruction Set Computer&#xff0c;复杂指令集计算机&#xff09;架构相比&#xff0c;Arm架构的指令集更加简洁明了&#xff0c;指令执行效率更高&#xff0c;能够在更低的功耗下完成同样的计算任务&#xff0c;因此在低功耗、嵌…