vue 集成 webrtc-streamer 播放视频流 - 解决阿里云内外网访问视频流问题
资料:
史上最详细的webrtc-streamer访问摄像机视频流教程-CSDN博客
webrtc目录


前端集成
html文件夹里的webrtcstreamer.js,集成到前端,可以访问webrtc,转换rtsp为webrtc视频流,在前端video中播放
<videoref="video"id="video"style="width: 100%; height: 100%"muted></video>const WEBRTC_URL = "http://47.116.57.xxx:8000";mounted() {this.$nextTick(() => {this.webRtcServer = new WebRtcStreamer("video", this.WEBRTC_URL);this.webRtcServer.connect("rtsp://username:password@ip:port/camera/1002000100000000000000026959100?ssrc=271168");});},beforeDestroy() {this.webRtcServer.disconnect();this.webRtcServer = null;},
工具页面
http://47.116.57.xxx:8000/help.html

http://47.116.57.xxx:8000/api/help

阿里云运行webrtc-streamer
cmd命令行运行命令启动:
webrtc-streamer.exe -o
解决内外网问题
问题描述
阿里云启动webrtc服务后,阿里云服务器localhost本地打开前端页面可以正常访问视频流,但是通过外网ip47.116.57.xxx 访问视频流白屏,看webrtc的日志是刚启动一个视频解析会话,就立马被close session了

查看前端访问webrtc接口返回的数据
fetch("http://47.116.57.xxx:8000/api/getIceCandidate?peerid=0.8230299317537435", {"headers": {"accept": "*/*","accept-language": "zh-CN,zh;q=0.9","cache-control": "no-cache","pragma": "no-cache","proxy-connection": "keep-alive"},"referrer": "http://47.116.57.xxx:9999/","referrerPolicy": "strict-origin-when-cross-origin","body": null,"method": "GET","mode": "cors","credentials": "omit"
});[{"candidate" : "candidate:3994363758 1 udp 2122194687 172.28.123.36 64623 typ host generation 0 ufrag bn+Z network-id 1","sdpMLineIndex" : 0,"sdpMid" : "0"},{"candidate" : "candidate:3283065688 1 udp 2122255103 2001::348b:fb58:18fc:3bf4:d08b:c6a0 64624 typ host generation 0 ufrag bn+Z network-id 4 network-cost 50","sdpMLineIndex" : 0,"sdpMid" : "0"}
]
注意看,这里返回的数据candidate数据里的ip,竟然是阿里云的内网ip,在外面自然是连不上内网的udp端口的

解决 - 方案一
webrtc启动时其实是会获取到当前服务器的内外网ip的,默认会使用外网ip,但是阿里云的服务器不知道为什么获取不到外网ip,使用的是内网ip
但是webrtc有一个 -H ip:port的参数配置项,可以指定webrtc启动后使用哪个ip和端口号
webrtc-streamer.exe -o -H 47.116.57.xxx:8000
但是绑定失败了,改成 -H 内网ip:8000 是可以的

方案一失败!
解决 - 方案二
接口返回的数据是内网ip,webrtcstreamer.js中会使用内网ip去连udp获取视频流,那我们可以在接口返回数据后,替换内网ip为外网ip,这样js代码就能成功链接udp端口了
写一个 外网ip 替换 内网ip 的js方法
/*** 内网Ip 转 外网Ip*/
const InternalIP_To_ExternalIP = function (dataJsonItem) {dataJsonItem.candidate = dataJsonItem.candidate.replaceAll("172.28.123.36", "47.116.57.xxx");console.log("InternalIP_To_ExternalIP", dataJsonItem);return dataJsonItem;
};
在webrtcstreamer.js中使用该方法

方案二调试后成功可行!
相关文章:
vue 集成 webrtc-streamer 播放视频流 - 解决阿里云内外网访问视频流问题
资料: 史上最详细的webrtc-streamer访问摄像机视频流教程-CSDN博客 webrtc目录 前端集成 html文件夹里的webrtcstreamer.js,集成到前端,可以访问webrtc,转换rtsp为webrtc视频流,在前端video中播放 <videoref&quo…...
进网许可认证、交换路由设备检测项目更新25年1月起
实施时间 2025年1月1日起实施 涉及设备范围 核心路由器、边缘路由器、以太网交换机、三层交换机、宽带网络接入服务器(BNAS) 新增检测依据 GBT41266-2022网络关键设备安全检测方法交换机设备 GBT41267-2022网络关键设备安全技术要求交换机设备 GB/…...
Provides transitive vulnerable dependency maven 提示依赖存在漏洞问题的解决方法
问题描述 如下图所示,对于 java 项目某些依赖,IDEA 提示,引用了含有漏洞的依赖。如果是单个依赖,可以考虑直接升级版本即可。但是对于传递性依赖,比如 flink 项目中,依赖的部分模块,它们自己依…...
WebAuthn 项目常见问题解决方案
WebAuthn 项目常见问题解决方案 webauthn Webauthn / passkeys helper library to make your life easier. Client side, server side and demo included. [这里是图片001] 项目地址: https://gitcode.com/gh_mirrors/webaut/webauthn 项目基础介绍 WebAuthn 项目是一个开源…...
LeetCode 844. 比较含退格的字符串 (C++实现)
1. 题目描述 给定 s 和 t 两个字符串,当它们分别被输入到空白的文本编辑器后,如果两者相等,返回 true 。# 代表退格字符。 注意:如果对空文本输入退格字符,文本继续为空。 示例 1: 输入:s …...
Python8-写一些小作业
记录python学习,直到学会基本的爬虫,使用python搭建接口自动化测试就算学会了,在进阶webui自动化,app自动化 python基础8-灵活运用顺序、选择、循环结构 写一些小练习题目1、给一个半径,求圆的面积和周长,…...
C++ STL vector基本原理和用法
文章目录 基本原理1. 数据存储结构2. 内存管理机制3. 迭代器实现原理4. 元素访问原理5. 插入和删除元素原理 常见用法1. 概述2. 包含头文件3. 定义和初始化4. 常用成员函数5. 迭代器6. 内存管理与性能特点7. 应用场景 基本原理 以下是关于 std::vector 的基本原理讲解…...
【计算机视觉基础CV-图像分类】05 - 深入解析ResNet与GoogLeNet:从基础理论到实际应用
引言 在上一篇文章中,我们详细介绍了ResNet与GoogLeNet的网络结构、设计理念及其在图像分类中的应用。本文将继续深入探讨如何在实际项目中应用这些模型,特别是如何保存训练好的模型、加载模型以及使用模型进行新图像的预测。通过这些步骤,读…...
【人工智能-初级】基于用户的协同过滤推荐算法
文章目录 1. 数据集2. 实验代码3. 代码解释4. 实验结果5. 评估基于用户的协同过滤算法是一种常见的推荐算法,它的核心思想是根据用户之间的相似性来进行推荐。 实验案例: 使用的是电影推荐数据集 MovieLens,实验中我们会通过用户评分数据计算用户之间的相似性,并使用基于用户…...
如何识别钓鱼邮件和诈骗网站?(附网络安全意识培训PPT资料)
识别钓鱼邮件和诈骗网站是网络安全中的一个重要环节。以下是一些识别钓鱼邮件和诈骗网站的方法: 识别钓鱼邮件: 检查发件人地址: 仔细查看发件人的电子邮件地址,看是否与官方域名一致。 检查邮件内容: 留意邮件中是否…...
Rust 在前端基建中的使用
摘要 随着前端技术的不断发展,前端基础设施(前端基建)的建设已成为提升开发效率、保障产品质量的关键环节。然而,在应对复杂业务场景与高性能需求时,传统的前端技术栈逐渐暴露出诸多不足。近年来,Rust语言…...
【人工智能】基于Python和OpenCV实现实时人脸识别系统:从基础到应用
《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 随着人工智能和计算机视觉的快速发展,人脸识别技术已广泛应用于监控、安全、社交媒体、金融和医疗等领域。本文将介绍如何利用Python和Ope…...
Python 自动化 打开网站 填表登陆 例子
图样 简价: 简要说明这个程序的功能: 1. **基本功能**: - 自动打开网站 - 自动填写登录信息(号、公司名称、密码) - 显示半透明状态窗口实时提示操作进度 2. **操作流程**: - 打开网站后自动…...
【Chrome】浏览器提示警告Chrome is moving towards a new experience
文章目录 前言一、如何去掉 前言 Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies. 这是谷歌浏览器(Chrome)关于隐私策略更新相关的提示 提示:以下是本篇文章正文内容&…...
网络下载ts流媒体
网络下载ts流媒体 查看下载排序合并 很多视频网站,尤其是微信小程序中的长视频无法获取到准确视频地址,只能抓取到.ts片段地址,下载后发现基本都是5~8秒时长。 例如: 我们需要将以上地址片段全部下载后排序后再合成新的长视频。 …...
iDP3复现代码模型训练全流程(一)——train_policy.sh
iDP3 核心脚本包括三个:deploy_policy.sh、vis_dataset.sh、train_policy.sh,分别代表了部署、预处理和训练,分别作为对应 py 脚本的参数设置前置环节 训练环节仅需运行指令: # 3d policy bash scripts/train_policy.sh idp3 gr1…...
重温设计模式--单例模式
文章目录 单例模式(Singleton Pattern)概述单例模式的实现方式及代码示例1. 饿汉式单例(在程序启动时就创建实例)2. 懒汉式单例(在第一次使用时才创建实例) 单例模式的注意事项应用场景 C代码懒汉模式-经典…...
【人工智能】Python中的机器学习管道:如何用scikit-learn构建高效的ML管道
《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 在机器学习项目中,数据预处理、特征工程、模型训练与评估是不可或缺的环节。随着项目规模的扩大和复杂度的增加,手动管理这些步骤不仅繁琐…...
Redis存在安全漏洞
Redis是美国Redis公司的一套开源的使用ANSI C编写、支持网络、可基于内存亦可持久化的日志型、键值(Key-Value)存储数据库,并提供多种语言的API。 Redis存在安全漏洞。攻击者利用该漏洞使用特制的Lua脚本触发堆栈缓冲区溢出漏洞,从…...
Scala图书管理系统
项目创建并实现基础UI package org.appimport scala.io.StdInobject Main {def main(args: Array[String]): Unit {var running truewhile (running) {println("欢迎来到我的图书管理系统,请选择")println("1.查看所有图书")println("2…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...
docker详细操作--未完待续
docker介绍 docker官网: Docker:加速容器应用程序开发 harbor官网:Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台,用于将应用程序及其依赖项(如库、运行时环…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言: 在人工智能快速发展的浪潮中,快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型(LLM)。该模型代表着该领域的重大突破,通过独特方式融合思考与非思考…...
如何将联系人从 iPhone 转移到 Android
从 iPhone 换到 Android 手机时,你可能需要保留重要的数据,例如通讯录。好在,将通讯录从 iPhone 转移到 Android 手机非常简单,你可以从本文中学习 6 种可靠的方法,确保随时保持连接,不错过任何信息。 第 1…...
C++ 基础特性深度解析
目录 引言 一、命名空间(namespace) C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用(reference) C 中的引用 与 C 语言的对比 四、inline(内联函数…...
【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)
1.获取 authorizationCode: 2.利用 authorizationCode 获取 accessToken:文档中心 3.获取手机:文档中心 4.获取昵称头像:文档中心 首先创建 request 若要获取手机号,scope必填 phone,permissions 必填 …...
dify打造数据可视化图表
一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...
