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

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

news 2025/12/13 20:21:11

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

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2025/12/13 8:33:23

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/11/9 11:32:13

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/12/13 2:36:48

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/11/25 22:42:21

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

编程新知 2025/12/9 22:28:55

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

编程新知 2025/12/9 22:30:57

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

编程新知 2025/10/31 20:37:10

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

编程新知 2025/8/18 12:09:07

springboot 日志类切面，接口成功记录日志，失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

编程新知 2025/12/10 18:41:12