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

vue3读取webrtc-stream 视频流

一.首先下载webrtc-stream,方便自己本地搭建视频流服务

https://download.csdn.net/download/cyw8998/90373521

解压后,启动命令

webrtc-streamer.exe -H 127.0.0.1:8020

二.vue3代码如下

<template><h1>video</h1><video id="video" autoplay width="1050" height="1050"></video>
</template><script setup>import '@/assets/adapter.min.js';import '@/assets/webrtcstreamer.js';import { ref } from 'vue';import { computed } from 'vue';import { nextTick } from 'vue';import { useRouter } from 'vue-router'; // 引入useRouter函数const router = useRouter(); // 使用useRouter函数获取router实例console.log(router)const id = localStorage.getItem('id');const cameraUrl = localStorage.getItem('url');const id2 = "456";console.log("ididid:" + id)console.log("cameraUrl:" + cameraUrl)const webRtcServer = ref();const initWebRtcServer = async () => {nextTick(() => {// video:需要绑定的video控件ID//127.0.0.1:8000:启动webrtc-streamer的设备IP和端口,默认8000// webRtcServer.value = new WebRtcStreamer('video', location.protocol + '//192.168.10.26:8000')webRtcServer.value = new WebRtcStreamer('video', location.protocol + '//127.0.0.1:8020')//需要查看的rtsp地址// webRtcServer.value.connect('rtsp://admin:a12345678@192.168.3.11:554/Streaming/Channels/101')webRtcServer.value.connect('rtsp://rtspstream:vVMnC54NRjffltSsu0q7v@zephyr.rtsp.stream/pattern2')})}//页面销毁时销毁webRtcconst webRtcServerDis = computed(() => {webRtcServer.value.disconnect()webRtcServer.value = null})initWebRtcServer();</script><style scoped>
</style>

三.js文件拷贝

把压缩包中libs\adapter.min.js和webrtcstreamer.js 拷贝到Vue工程中assets目录下

相关文章:

vue3读取webrtc-stream 视频流

一.首先下载webrtc-stream&#xff0c;方便自己本地搭建视频流服务 https://download.csdn.net/download/cyw8998/90373521 解压后&#xff0c;启动命令 webrtc-streamer.exe -H 127.0.0.1:8020 二.vue3代码如下 <template><h1>video</h1><video id&…...

springcloud集成gateway

本篇文章只介绍gateway模块的搭建步骤&#xff0c;并无gateway详细介绍 gateway详解请查看&#xff1a;SpringCloudGateway官方文档详解 前置处理 父模块中已指定版本 不知道如何选择版本看这篇&#xff1a; 手把手教你梳理springcloud与springboot与springcloudalibaba的版本…...

2025常用的SEO工具有哪些?

在互联网时代&#xff0c;如何让自己的网站或内容脱颖而出&#xff0c;成为许多企业和个人站长们最关注的问题。而在这个过程中&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;作为一种有效的提升网站曝光度和吸引流量的手段&#xff0c;已经成为了网站运营的核心之一。对…...

C++类和对象进阶:运算符重载深度详解

C类和对象进阶&#xff1a;运算符重载 前言引入运算符重载定义语法注意事项重载为全局函数重载为成员函数运算符重载的本质 默认赋值运算符重载(默认成员函数)编译器自己生成的赋值运算符重载函数需要自己实现的场景总结默认赋值运算符重载 拷贝构造函数和赋值重载的区分验证 总…...

Mybatisplus——Mybatisplus3.5.2版本使用Page分页插件查询,records有数据但是total显示0

目录 一、问题背景 debug 执行Mybatisplus使用Page分页插件查询时&#xff0c;发现 Page 里面的records有数据但是total显示0。 二、问题产生的原因 未配置MybatisPlus的分页插件拦截器导致的或者因mybatis-plus版本3.4或3.5版本导致原先的分页插件paginationInterceptor无法…...

C#(Winform)通过添加AForge添加并使用系统摄像机

先展示效果 AForge介绍 AForge是一个专门为开发者和研究者基于C#框架设计的, 也是NET平台下的开源计算机视觉和人工智能库 它提供了许多常用的图像处理和视频处理算法、机器学习和神经网络模型&#xff0c;并且具有高效、易用、稳定等特点。 AForge主要包括: 计算机视觉与人…...

AI使用场景简单测试

前言 今天来分享下AI的2个实用场景&#xff0c;我这里是使用的博主&#xff1a;小虚竹&#xff0c;搭建的AI服务&#xff0c;用的ChatGPT 4O模型&#xff0c;主要是试了3个场景&#xff0c;服装设计、直播带货话术、检验报告分析。 一、服装设计 对于最后需要的裁片设计上的尺寸…...

Linux 配置 MySQL 定时自动备份到另一台服务器

Linux 配置 MySQL 定时自动备份到另一台服务器 前言1、配置服务器通信1.1&#xff1a;配置过程 2、编写自动备份sh脚本文件3&#xff1a;设置定时自动执行 前言 此方案可使一台服务器上的 MySQL 中的所有数据库每天 0 点自动转储为 .sql 文件&#xff0c;然后将文件同步到另一…...

PostgreSQL 备库的延迟问题

目录标题 1. 查看主备状态计算方式&#xff1a;实际情况&#xff1a;举个例子&#xff1a; 2. 查看历史状态3. 分析日志文件4. 查看数据库层面的复制状态5. 检查活动事务6. 检查系统资源7. 检查网络状况8. 检查复制槽状态9. 检查未提交的两阶段事务 要排查 PostgreSQL 备库的延…...

力扣-二叉树-226 翻转二叉树

思路 利用递归的思路 代码 class Solution { public:TreeNode* invertTree(TreeNode* root) {if(root nullptr){return root;}swap( root->right, root->left);invertTree(root->left);invertTree(root->right);return root;} };...

基于SpringBoot的在线车辆租赁信息管理系统

系统展示 用户前台界面 管理员后台界面 系统背景 随着互联网技术的不断发展和人们生活水平的提高&#xff0c;汽车租赁行业迎来了前所未有的发展机遇。传统的汽车租赁方式往往存在流程繁琐、信息不透明等问题&#xff0c;难以满足现代消费者对于便捷、高效服务的需求。因此&…...

掌握 systemd:Linux 服务管理的核心工具

1. 什么是 systemd&#xff1f; 定义&#xff1a;systemd 是 Linux 系统的初始化系统&#xff08;init system&#xff09;和服务管理器&#xff0c;用于替代传统的 SysVinit。核心目标&#xff1a; 加速系统启动&#xff08;并行化任务&#xff09;。统一管理服务、日志、挂载…...

【信息系统项目管理师-案例真题】2019下半年案例分析答案和详解

更多内容请见: 备考信息系统项目管理师-专栏介绍和目录 文章目录 试题一【问题 1】(6 分)【问题 2‍ 】(8 分)【问题 3‍ 】(11 分)试题二【问题 1】‍(5分)【问题 2】‍ (14 分)【问题 3‍ 】(6 分)试题三【问题 1】(8 分)【问题 2‍ 】(6 分)【问题 3】‍ (8 分)【问题 4‍ …...

C/C++程序的内存是如何开辟的?

&#x1f4ac; 欢迎讨论&#xff1a;在阅读过程中有任何疑问&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;如果你觉得这篇文章对你有帮助&#xff0c;记得点赞、收藏&#xff0c;并分享给更多对C语言感兴…...

日志结构化处理:PO对象toString日志转JSON工具

日志结构化处理&#xff1a;PO对象toString日志转JSON工具 1. 解决的问题2. 下载地址 在Java项目中&#xff0c;PO&#xff08;Plain Old Java Object&#xff09;对象遍布各个角落&#xff0c;且常常伴随着大量的日志记录需求。传统的做法是通过toString方法直接打印这些对象&…...

python学opencv|读取图像(六十五)使用cv2.boundingRect()函数实现图像轮廓矩形标注

【1】引言 前序学习进程中&#xff0c;已经使用cv2.findContours()函数cv2.drawContours()函数实现图像轮廓识别和标注&#xff0c;这种标注沿着图像的轮廓进行&#xff0c;比较细致。相关文章链接为&#xff1a; python学opencv|读取图像&#xff08;六十四&#xff09;使用…...

大疆无人机需要的kml文件如何制作kml导出(大疆KML文件)

大疆无人机需要的轨迹kml文件&#xff0c;是一种专门的格式&#xff0c;这个kml里面只有轨迹点&#xff0c;其它的属性信息都不需要。 BigemapPro提供了专门的大疆格式输出&#xff0c; 软件这里下载 www.bigemap.com 安装后&#xff0c;kml导入如下图&#xff1a; 然后选择…...

ArrayList、LinkedList、HashMap、HashTable、HashSet、TreeSet

集合族谱 在这些集合中&#xff0c;仅有vector和hashtable是线程安全的&#xff0c;其内部方法基本都有synchronized修饰。 ArrayList 底层采用Object数组实现&#xff0c;实现了RandomAccess接口因此支持随机访问。插入删除操作效率慢。 ArrayList需要一份连续的内存空间。 A…...

手动配置IP

手动配置IP&#xff0c;需要考虑四个配置项&#xff1a; 四个配置项 IP地址、子网掩码、默认网关、DNS服务器 IP地址&#xff1a;格式表现为点分十进制&#xff0c;如192.168.254.1 子网掩码&#xff1a;用于区分网络位和主机位 【子网掩码的二进制表达式一定是连续的&#…...

idea如何使用AI编程提升效率-在IntelliJ IDEA 中安装 GitHub Copilot 插件的步骤-卓伊凡

idea如何使用AI编程提升效率-在IntelliJ IDEA 中安装 GitHub Copilot 插件的步骤-卓伊凡 问题 idea编译器 安装copilot AI工具 实际操作 在 IntelliJ IDEA 中安装 GitHub Copilot 插件的步骤如下&#xff1a; 打开 IntelliJ IDEA&#xff1a; 打开你的 IntelliJ IDEA 应用…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...