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

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

news 2026/2/10 16:49:50

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…...

编程日记 2024/12/13 7:19:26

element左侧导航栏

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

编程日记 2024/12/13 7:18:23

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

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

编程日记 2024/12/13 7:15:20

学习CSS第七天

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

编程日记 2024/12/13 7:13:15

Image Stitching using OpenCV

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

编程日记 2024/12/13 7:12:14

CentOS7 安装Selenium（使用webdriver_manager自动安装ChromeDriver）

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

编程日记 2024/12/13 7:11:12

鸿蒙手机文件目录

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

编程日记 2024/12/13 7:10:10

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

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

编程日记 2024/12/13 7:08:08

电子电工一课一得

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

编程日记 2024/12/13 7:06:06

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

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

编程日记 2024/12/13 7:05:04

配置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 …...

编程日记 2024/12/13 7:00:59

Linux——进程控制模拟shell

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

编程日记 2024/12/13 6:56:56

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

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

编程日记 2024/12/13 6:55:55

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数据…...

编程日记 2024/12/13 6:53:51

CNCF云原生生态版图

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

编程日记 2024/12/13 6:50:48

渐冻症：真的无药可治？

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

编程日记 2024/12/13 6:49:47

`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…...

编程日记 2024/12/13 6:48:46

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

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

编程日记 2024/12/13 6:47:41

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

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

编程日记 2024/12/13 6:45:39

freeswitch(配置event_socket连接)

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

编程日记 2024/12/13 6:37:31

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/10/12 11:54:26

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2026/1/30 8:46:45

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2026/1/31 3:30:33

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2026/1/28 1:40:03

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2026/1/23 10:28:48

深入理解Optional：处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

编程新知 2025/12/19 19:15:39

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

编程新知 2026/2/1 21:56:50

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...

编程新知 2026/2/9 23:02:28

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...

编程新知 2026/2/8 23:54:57