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,方便自己本地搭建视频流服务 https://download.csdn.net/download/cyw8998/90373521 解压后,启动命令 webrtc-streamer.exe -H 127.0.0.1:8020 二.vue3代码如下 <template><h1>video</h1><video id&…...
springcloud集成gateway
本篇文章只介绍gateway模块的搭建步骤,并无gateway详细介绍 gateway详解请查看:SpringCloudGateway官方文档详解 前置处理 父模块中已指定版本 不知道如何选择版本看这篇: 手把手教你梳理springcloud与springboot与springcloudalibaba的版本…...
2025常用的SEO工具有哪些?
在互联网时代,如何让自己的网站或内容脱颖而出,成为许多企业和个人站长们最关注的问题。而在这个过程中,SEO(搜索引擎优化)作为一种有效的提升网站曝光度和吸引流量的手段,已经成为了网站运营的核心之一。对…...
C++类和对象进阶:运算符重载深度详解
C类和对象进阶:运算符重载 前言引入运算符重载定义语法注意事项重载为全局函数重载为成员函数运算符重载的本质 默认赋值运算符重载(默认成员函数)编译器自己生成的赋值运算符重载函数需要自己实现的场景总结默认赋值运算符重载 拷贝构造函数和赋值重载的区分验证 总…...
Mybatisplus——Mybatisplus3.5.2版本使用Page分页插件查询,records有数据但是total显示0
目录 一、问题背景 debug 执行Mybatisplus使用Page分页插件查询时,发现 Page 里面的records有数据但是total显示0。 二、问题产生的原因 未配置MybatisPlus的分页插件拦截器导致的或者因mybatis-plus版本3.4或3.5版本导致原先的分页插件paginationInterceptor无法…...
C#(Winform)通过添加AForge添加并使用系统摄像机
先展示效果 AForge介绍 AForge是一个专门为开发者和研究者基于C#框架设计的, 也是NET平台下的开源计算机视觉和人工智能库 它提供了许多常用的图像处理和视频处理算法、机器学习和神经网络模型,并且具有高效、易用、稳定等特点。 AForge主要包括: 计算机视觉与人…...
AI使用场景简单测试
前言 今天来分享下AI的2个实用场景,我这里是使用的博主:小虚竹,搭建的AI服务,用的ChatGPT 4O模型,主要是试了3个场景,服装设计、直播带货话术、检验报告分析。 一、服装设计 对于最后需要的裁片设计上的尺寸…...
Linux 配置 MySQL 定时自动备份到另一台服务器
Linux 配置 MySQL 定时自动备份到另一台服务器 前言1、配置服务器通信1.1:配置过程 2、编写自动备份sh脚本文件3:设置定时自动执行 前言 此方案可使一台服务器上的 MySQL 中的所有数据库每天 0 点自动转储为 .sql 文件,然后将文件同步到另一…...
PostgreSQL 备库的延迟问题
目录标题 1. 查看主备状态计算方式:实际情况:举个例子: 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的在线车辆租赁信息管理系统
系统展示 用户前台界面 管理员后台界面 系统背景 随着互联网技术的不断发展和人们生活水平的提高,汽车租赁行业迎来了前所未有的发展机遇。传统的汽车租赁方式往往存在流程繁琐、信息不透明等问题,难以满足现代消费者对于便捷、高效服务的需求。因此&…...
掌握 systemd:Linux 服务管理的核心工具
1. 什么是 systemd? 定义:systemd 是 Linux 系统的初始化系统(init system)和服务管理器,用于替代传统的 SysVinit。核心目标: 加速系统启动(并行化任务)。统一管理服务、日志、挂载…...
【信息系统项目管理师-案例真题】2019下半年案例分析答案和详解
更多内容请见: 备考信息系统项目管理师-专栏介绍和目录 文章目录 试题一【问题 1】(6 分)【问题 2 】(8 分)【问题 3 】(11 分)试题二【问题 1】(5分)【问题 2】 (14 分)【问题 3 】(6 分)试题三【问题 1】(8 分)【问题 2 】(6 分)【问题 3】 (8 分)【问题 4 …...
C/C++程序的内存是如何开辟的?
💬 欢迎讨论:在阅读过程中有任何疑问,欢迎在评论区留言,我们一起交流学习! 👍 点赞、收藏与分享:如果你觉得这篇文章对你有帮助,记得点赞、收藏,并分享给更多对C语言感兴…...
日志结构化处理:PO对象toString日志转JSON工具
日志结构化处理:PO对象toString日志转JSON工具 1. 解决的问题2. 下载地址 在Java项目中,PO(Plain Old Java Object)对象遍布各个角落,且常常伴随着大量的日志记录需求。传统的做法是通过toString方法直接打印这些对象&…...
python学opencv|读取图像(六十五)使用cv2.boundingRect()函数实现图像轮廓矩形标注
【1】引言 前序学习进程中,已经使用cv2.findContours()函数cv2.drawContours()函数实现图像轮廓识别和标注,这种标注沿着图像的轮廓进行,比较细致。相关文章链接为: python学opencv|读取图像(六十四)使用…...
大疆无人机需要的kml文件如何制作kml导出(大疆KML文件)
大疆无人机需要的轨迹kml文件,是一种专门的格式,这个kml里面只有轨迹点,其它的属性信息都不需要。 BigemapPro提供了专门的大疆格式输出, 软件这里下载 www.bigemap.com 安装后,kml导入如下图: 然后选择…...
ArrayList、LinkedList、HashMap、HashTable、HashSet、TreeSet
集合族谱 在这些集合中,仅有vector和hashtable是线程安全的,其内部方法基本都有synchronized修饰。 ArrayList 底层采用Object数组实现,实现了RandomAccess接口因此支持随机访问。插入删除操作效率慢。 ArrayList需要一份连续的内存空间。 A…...
手动配置IP
手动配置IP,需要考虑四个配置项: 四个配置项 IP地址、子网掩码、默认网关、DNS服务器 IP地址:格式表现为点分十进制,如192.168.254.1 子网掩码:用于区分网络位和主机位 【子网掩码的二进制表达式一定是连续的&#…...
idea如何使用AI编程提升效率-在IntelliJ IDEA 中安装 GitHub Copilot 插件的步骤-卓伊凡
idea如何使用AI编程提升效率-在IntelliJ IDEA 中安装 GitHub Copilot 插件的步骤-卓伊凡 问题 idea编译器 安装copilot AI工具 实际操作 在 IntelliJ IDEA 中安装 GitHub Copilot 插件的步骤如下: 打开 IntelliJ IDEA: 打开你的 IntelliJ IDEA 应用…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...
Mac软件卸载指南,简单易懂!
刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"࿰…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...
【论文阅读28】-CNN-BiLSTM-Attention-(2024)
本文把滑坡位移序列拆开、筛优质因子,再用 CNN-BiLSTM-Attention 来动态预测每个子序列,最后重构出总位移,预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵(S…...
【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中(图1): mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
Go 并发编程基础:通道(Channel)的使用
在 Go 中,Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式,用于在多个 Goroutine 之间传递数据,从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具,可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件,也不需要在线上传文件,保护您的隐私。 工具截图 主要特点 🚀 快速转换:本地转换,无需等待上…...
[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.
ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #:…...
Matlab实现任意伪彩色图像可视化显示
Matlab实现任意伪彩色图像可视化显示 1、灰度原始图像2、RGB彩色原始图像 在科研研究中,如何展示好看的实验结果图像非常重要!!! 1、灰度原始图像 灰度图像每个像素点只有一个数值,代表该点的亮度(或…...
