当前位置: 首页 > news >正文

【使用webrtc-streamer解析rtsp视频流】

webrtc-streamer

  • WebRTC (Web Real-Time Communications) 是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和(或)音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下,创建点对点(Peer-to-Peer)的数据分享和电话会议成为可能。

    简单的说:WebRTC 是一种 HTML5规范,他无需在浏览器中安装任何插件可以在网页内进行实时通信工作的开源技术,它直接在浏览器和设备之间添加实时媒体通信。
    
  • rtsp(Real Time Streaming Protocol,RTSP)是实时视频网络传输主流的实现方式,是一种网络流媒体协议。低延时高清晰度的RTSP视频流传输是网络直播、在线会议系统等行业的核心技术。

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

使用方法

1、下载webrtc-streamer

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

2、运行

双击解压后的.exe文件运行,默认抛出本机8000端口(172.0.0.1:8000)
  • 由于 webrtc 的核心库还不支持H265的视频编码,所以要配置设备视频编码方式为H264

  • 命令:-o ,默认情况video会进行编码、解码,占用资源,可能导致cpu拉满,使用-o将取消编码解码

  • 自定义端口:创建.bat文件,并双击执行,文件内容如下:

    @echo off
    start "" ".webrtc-streamer.exe"  -H 0.0.0.0:9998 -o
    exit
    
  • 运行成功后,可在浏览器中查询所有api

    //192.168.3.33:9998/api/help
    http: ['/api/addIceCandidate','/api/call','/api/createOffer','/api/getAudioDeviceList','/api/getAudioPlayoutList','/api/getIceCandidate','/api/getIceServers','/api/getMediaList','/api/getPeerConnectionList', // 判断当前的webrtc-streamer正在连接的通道'/api/getStreamList','/api/getVideoDeviceList','/api/hangup','/api/help','/api/log','/api/setAnswer','/api/version','/api/whep'
    ]
    

3、引用开发包

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

    <head><!-- rtsp --><script src="/data/webrtcstreamer.js" charset="utf-8"></script><script src="/data/adapter.min.js" charset="utf-8"></script>
    </head>
    

4、页面中使用

<template><div class="ev-player"><CommonDragWindow v-model="innerShow" :width="600" :height="400" :resize="true" :position="position"><template v-slot:title>{{ title }}</template><template #default><video :id="`video-${equipId}`" autoplay width="100%" height="98%"></video></template></CommonDragWindow></div>
</template><script setup>import CommonDragWindow from './CommonDragWindow.vue'import { getConfigList } from '@/api/common.js'import { ref, onMounted, watchEffect, watch, nextTick } from 'vue'const show = defineModel({ type: Boolean, default: false })const props = defineProps({title: {type: String,default: '监控视频'},equipId: {type: [Number, String]}})const innerShow = ref(false)const position = ref({top: 500,left: 20})let webRtcServer = nullwatchEffect(() => {innerShow.value = show.value})watch(() => innerShow.value,async (val) => {if (val) {const rtspStr = 'rtsp://132.239.12.145:554/axis-media/media.amp'if (rtspStr) {await nextTick() // 待dom加载完毕let videoDocument = document.getElementById('video')webRtcServer = new WebRtcStreamer(videoDocument, `http://${window.appConfig.localhost}:8000`)webRtcServer.connect(rtspStr, null, `rtptransport=tcp&timeout=60`)}} else {webRtcServer?.disconnect()webRtcServer = null}show.value = val})onMounted(() => {})
</script><style scoped lang="scss">.ev-player {:deep(video) {width: 100%;height: calc(100% - 5px);}}
</style>

相关文章:

【使用webrtc-streamer解析rtsp视频流】

webrtc-streamer WebRTC (Web Real-Time Communications) 是一项实时通讯技术&#xff0c;它允许网络应用或者站点&#xff0c;在不借助中间媒介的情况下&#xff0c;建立浏览器之间点对点&#xff08;Peer-to-Peer&#xff09;的连接&#xff0c;实现视频流和&#xff08;或&a…...

element左侧导航栏

由element组件搭建的左侧导航栏 预览: html代码: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>首页</title><style> /*<!-- 调整页面背景颜色-->*/body{background-colo…...

【金融贷后】贷后运营精细化管理

文章目录 一、贷后专业术语讲解① 什么是贷后&#xff0c;贷后部是干什么的&#xff1f;② 贷后部门常见组织架构&#xff1f;③ 贷后专业术语有哪些&#xff1f; 二、贷后常用作业手段介绍① 贷后产品形态介绍&#xff1f;② 催收常用的方法&#xff1f; 三、贷后策略岗位介绍…...

学习CSS第七天

学习文章目录 一.交集选择器 一.交集选择器 使用多个条件符合的元素&#xff0c;可提高区分的精准度 元素配合类名是使用场景最多的 &#xff08;元素必须是第一位&#xff0c;ID一般不写&#xff09; <!DOCTYPE html> <html lang"zh-CN"> <head>…...

Image Stitching using OpenCV

文章目录 简介图像拼接管道特征检测和提取特征检测特征提取 特征匹配强力匹配FLANN&#xff08;近似最近邻快速库&#xff09;匹配 单应性估计扭曲和混合结论 使用opencv进行图像拼接 原为url: https://medium.com/paulsonpremsingh7/image-stitching-using-opencv-a-step-by-s…...

CentOS7 安装Selenium(使用webdriver_manager自动安装ChromeDriver)

在 CentOS 7 上安装 Selenium 通常涉及几个步骤&#xff0c;包括安装 Python、安装 Selenium 库、安装 WebDriver 以及配置环境。以下是详细的步骤&#xff1a; 1. 安装 Python 和 pip 如果你的系统中还没有安装 Python 和 pip&#xff0c;可以使用以下命令进行安装&#xff…...

鸿蒙手机文件目录

最近在开发鸿蒙&#xff0c;想把文件从电脑上发送到鸿蒙上我的手机APP的根目录&#xff0c;但是试了几次目录都不对&#xff0c;最后终于找到了&#xff0c;在这里记录一下 鸿蒙手机路径: /storage/media/100/local/files/Docs 将文件从电脑发送到手机&#xff1a;hdc file s…...

泷羽Sec学习笔记-Bp中ip伪造、爬虫审计

ip伪造与爬虫审计 ip伪造 下载插件&#xff1a;burpFakeIP 地址&#xff1a;GitHub - TheKingOfDuck/burpFakeIP: 服务端配置错误情况下用于伪造ip地址进行测试的Burp Suite插件 python版需要配置jython&#xff1a;下载地址&#xff1a;Maven Central: org.python:jython-…...

电子电工一课一得

首语 在现代社会中&#xff0c;电子电工技术已经渗透到我们生活的方方面面&#xff0c;从家用电器到工业自动化&#xff0c;从通信设备到智能系统&#xff0c;无一不依赖于电子电工技术。因此&#xff0c;掌握电子电工的基础知识&#xff0c;不仅对理工科学生至关重要&#xf…...

Cesium 限制相机倾斜角(pitch)滑动范围

1.效果 2.思路 在项目开发的时候&#xff0c;有一个需求是限制相机倾斜角&#xff0c;也就是鼠标中键调整视图俯角时&#xff0c;不能过大&#xff0c;一般 pitch 角度范围在 0 至 -90之间&#xff0c;-90刚好为正俯视。 在网上查阅了很多资料&#xff0c;发现并没有一个合适的…...

配置ssh-key连接github

GitHub 通过在 2022 年 3 月 15 日删除旧的、不安全的密钥类型来提高安全性。 具体内容参考如下链接 https://docs.github.com/zh/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent mac配置 ssh-keygen -t ed25519 -C …...

Linux——进程控制模拟shell

1.进程创建 我们在之前的文章中介绍过进程创建的方法&#xff0c;可以通过系统调用接口fork来创建新的进程。 fork在创建完新的子进程之后&#xff0c;返回值是一个pid&#xff0c;对于父进程返回子进程的pid&#xff0c;对于子进程返回0。fork函数后父子进程共享代码&#xff…...

【HarmonyOS】鸿蒙应用实现手机摇一摇功能

【HarmonyOS】鸿蒙应用实现手机摇一摇功能 一、前言 手机摇一摇功能&#xff0c;是通过获取手机设备&#xff0c;加速度传感器接口&#xff0c;获取其中的数值&#xff0c;进行逻辑判断实现的功能。 在鸿蒙中手机设备传感器ohos.sensor (传感器)的系统API监听有以下&#xf…...

Kael‘thas Sunstrider Ashes of Al‘ar

Kaelthas Sunstrider 凯尔萨斯逐日者 <血精灵之王> Kaelthas Sunstrider - NPC - 魔兽世界怀旧服TBC数据库_WOW2.43数据库_70级《燃烧的远征》数据库 Ashes of Alar 奥的灰烬 &#xff08;凤凰 310%速度&#xff09; Ashes of Alar - Item - 魔兽世界怀旧服TBC数据…...

CNCF云原生生态版图

CNCF云原生生态版图 概述什么是云原生生态版图如何使用生态版图 项目和产品&#xff08;Projects and products&#xff09;会员&#xff08;Members&#xff09;认证合作伙伴与提供商&#xff08;Certified partners and providers&#xff09;无服务&#xff08;Serverless&a…...

渐冻症:真的无药可治?

“渐冻症”&#xff0c;这个令人闻之色变的疾病&#xff0c;仿佛是生命的冷酷冰封者。一提到渐冻症&#xff0c;很多人脑海中立刻浮现出绝望的画面&#xff0c;认为它无药可治。但事实真的如此吗&#xff1f; 渐冻症&#xff0c;医学上称为肌萎缩侧索硬化症&#xff0c;是一种渐…...

`pg_wal` 目录

在 PostgreSQL 中&#xff0c;自动清理 pg_wal 目录主要通过配置参数 min_wal_size、max_wal_size 和 wal_keep_size 来实现。以下是如何配置 PostgreSQL 以自动清理 WAL 文件的详细步骤和建议&#xff1a; 配置 min_wal_size 和 max_wal_size&#xff1a; min_wal_size&#x…...

【信息系统项目管理师】论文:论信息系统项目的整合管理

文章目录 正文一、制定项目章程二、指定项目管理计划三、指导与管理项目工作四、管理项目知识五、监控项目工作六、实施整体变更控制七、结束项目或阶段 正文 根据省自然资源厅的总体部署&#xff0c;XX市决定于2023年8月开始全市不动产登记系统建设&#xff0c;要求在2024年8…...

MATLAB深度学习(七)——ResNet残差网络

一、ResNet网络 ResNet是深度残差网络的简称。其核心思想就是在&#xff0c;每两个网络层之间加入一个残差连接&#xff0c;缓解深层网络中的梯度消失问题 二、残差结构 在多层神经网络模型里&#xff0c;设想一个包含诺干层自网络&#xff0c;子网络的函数用H(x)来表示&#x…...

freeswitch(配置event_socket连接)

亲测版本centos 7.9系统–》 freeswitch1.10.9 本人freeswitch安装路径(根据自己的路径进入) /usr/local/freeswitch/etc/freeswitch场景说明: 如果想使用代码进行控制freeswitch添加账号、获取注册信息、强拆等,可以使用ESL控制vim autoload_configs/event_socket.conf.x…...

C++ SQLite轻量化数据库使用总结

官网下载&#xff1a;https://www.sqlite.org/download.html 示例1 #include <iostream> #include <sqlite3.h>int main() {sqlite3* db;char* zErrMsg 0;int rc;// 打开数据库连接&#xff08;如果数据库不存在&#xff0c;则会自动创建&#xff09;rc sqlite…...

docker打包当前使用的某个容器为镜像,导出,导入

容器打包成镜像 要将正在使用的 Docker 容器打包成镜像&#xff0c;你可以使用 docker commit 命令。这个命令会从运行中的容器创建一个新的镜像。以下是详细步骤&#xff1a; 查看正在运行的容器&#xff1a; 使用以下命令查看当前正在运行的容器&#xff1a; docker ps找到目…...

【刷题22】BFS解决最短路问题

目录 一、边权为1的最短路问题二、迷宫中离入口最近的出口三、最小基因变化四、单词接龙五、为高尔夫比赛砍树 一、边权为1的最短路问题 如图&#xff1a;从A到I&#xff0c;怎样走路径最短 一个队列一个哈希表队列&#xff1a;一层一层递进&#xff0c;直到目的地为止哈希表&…...

服务器重启:数字世界的短暂休憩与新生

在互联网的浩瀚海洋中&#xff0c;服务器犹如一座座灯塔&#xff0c;持续稳定地散发着光芒&#xff0c;为无数的网络活动提供着支撑与指引。而服务器重启&#xff0c;便是这数字灯塔周期性进行自我调整与修复的关键环节。 服务器重启是指对服务器进行重新启动的过程&#xff0…...

JavaEE 【知识改变命运】05 多线程(4)

文章目录 单例模式什么是单例模式饿汉模式懒汉模式多线程- 懒汉模式分析多线程问题第一种添加sychronized的方式第二种添加sychronized的方式改进第二种添加sychronized的方式&#xff08;DCL检查锁&#xff09; 阻塞队列什么是阻塞队列什么是消费生产者模型标准库中的阻塞队列…...

【CSS in Depth 2 精译_076】12.4 @font-face 的工作原理

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第四部分 视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 12.1.1 使用 em 还是 px12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 12.2 Web 字体12.3 谷歌字体12.4 font-fac…...

SQL Having用法

拿个业务场景说这个案例&#xff0c;比如我们有个表里面可能有批改过的数据&#xff0c;批改过得数据不会随着新批改的数据覆盖&#xff0c;而是逐条插入表中&#xff0c;如果想找出包含最早批改的数据和最新批改数据的话&#xff0c;那么我们就需要用到了havinng 用法,假设最开…...

@JsonNaming实现入参接口参数下划线驼峰自动转换

JsonNaming(PropertyNamingStrategy.SnakeCaseStrategy.class) 是用于 Jackson 库中的一个注解&#xff0c;作用是改变 Java 对象的字段命名策略&#xff0c;特别是在序列化和反序列化时。这可以帮助 Java 对象中的字段名从驼峰命名法&#xff08;CamelCase&#xff09;转换为蛇…...

使用PaliGemma2构建多模态目标检测系统:从架构设计到性能优化的技术实践指南

目标检测技术作为计算机视觉领域的核心组件&#xff0c;在自动驾驶系统、智能监控、零售分析以及增强现实等应用中发挥着关键作用。本文将详细介绍PaliGemma2模型的微调流程&#xff0c;该模型通过整合SigLIP-So400m视觉编码器与Gemma 2系列的高级语言模型&#xff0c;专门针对…...

MinerU:PDF文档提取工具

目录 docker一键启动本地配置下载模型权重文件demo.pyGPU使用情况 wget https://github.com/opendatalab/MinerU/raw/master/Dockerfile docker build -t mineru:latest .docker一键启动 有点问题&#xff0c;晚点更新 本地配置 就是在Python环境中配置依赖和安装包 根据需求…...

国外的旅游网站做的如何/网络服务公司

夜光序言&#xff1a; 曾经很爱你&#xff0c;之后以后再也不会了&#xff0c;再见你最后一次&#xff0c;再想你最后一次&#xff0c;我放手你走好&#xff0c;再见了我很爱的那个人。没有你的晚安我也会好好睡&#xff0c;没有你的问候我也能好好过&#xff0c;没有你的未来我…...

离石古楼角网站建设/友情链接如何交换

为什么80%的码农都做不了架构师&#xff1f;>>> 各个数据库like写法&#xff1a; oracle数据库&#xff1a; SELECT * FROM user WHERE name like CONCAT(%,#{name},%) 或 : SELECT * FROM user WHERE name like %||#{name}||% SQLServer数据库&#xff1a; SELECT…...

最专业的手机网站制作/舆情网站直接打开怎么弄

我在熊猫数据框中有一组计算的OHLCVA每日证券数据&#xff0c;如下所示&#xff1a;>>> type(data_dy)>>> data_dyOpen High Low Close Volume Adj CloseDate2012-12-28 140.64 141.42 139.87 140.03 148806700 134.632012-12-31 13…...

提高分辨率网站/爱链

游戏行业这几年持续升温&#xff0c;网游火了几年&#xff0c;又轮到手游和页游。但是不管哪个平台的游戏&#xff0c;研发都需要游戏原画环节。现在&#xff0c;游戏原画专业已经超一 学习原画漫画需要用到的软件主要有以下三款&#xff1a;过了许多专业成为当下就业最热门的专…...

wordpress做小程序/搜索引擎关键词排名优化

NEW关注Tech逆向思维视频号最新视频→【最骇人的5起自动驾驶“杀人”事故】出品&#xff5c;脑极体文&#xff5c;燕良最影响人类生命质量的疾病排在首位的就是癌症了。古人谈虎色变&#xff0c;今人谈癌色变。癌症这类疾病早已经不是年老体弱的人专属&#xff0c;而是越来越趋…...

兴化网站开发/企业网站免费制作

Hive是一个基于Hadoop的数据仓库平台。通过hive&#xff0c;我们可以方便地进行ETL的工作。hive定义了一个类似于SQL的查询语言&#xff1a;HQL&#xff0c;能 够将用户编写的QL转化为相应的Mapreduce程序基于Hadoop执行。 Hive是Facebook 2008年8月刚开源的一个数据仓库框架&a…...