uniapp远程摄像头流界面上显示
用到的插件:dplayer、hls
dplayer官网:dplayer
dplayer官网npm安装的是最新版本(1.27.1),真机运行异常了,可以安装历史版本 dplayer历史版本
远程摄像头视频流格式:m3u8
可以用来测试的视频流(有的用不了,多试几个,找可以用的):m3u8测试视频
安装hls,任选其一
npm安装
下载hls文件
安装dplayer
使用 npm:
npm install dplayer --save
使用 Yarn:
yarn add dplayer
代码示例
<template><view class="containerLayout"><div id="dplayer"></div></view>
</template><script>
//先加载hls插件、再加载dplayer插件;
import '/pages/utils/hls.js'
import Dplayer from 'dplayer'export default {data() {return {videoSrc: 'http://220.161.87.62:8800/hls/0/index.m3u8',dp: null,}},onLaunch() {console.log('onLaunch')},onReady() {},mounted() {//data里的远程摄像头地址const vs = this.videoSrcthis.dp = new Dplayer({container: document.getElementById('dplayer'),autoplay: true, //是否自动播放loop: true,//视频是否循环播放lang: 'zh-cn',live: true,screenshot: false,//是否开启截图hotkey: true,//是否开启热键preload: 'auto',//视频是否预加载volume: 0.7,//默认音量mutex: true,//阻止多个播放器同时播放,当前播放器播放时暂停其他播放器video: {url: vs, //视频地址type: 'customHls',customType: {customHls: function(video, player) {const hls = new Hls() //实例化Hls 解析m3u8hls.loadSource(video.src)hls.attachMedia(video)}},},});this.dp.on('canplay', function() {console.log('视频正常播放')});this.dp.on('error', function() {console.log('视频播放异常')});},onLoad() {},onShow() {},methods: {playvideo(vs){},//----------------------------}}
</script>
<style>.containerLayout{margin: 0;padding: 0;border: 0;width: 100vw;height: 100vh;display: flex;flex-direction: column;z-index: 100;}
</style>
相关文章:
uniapp远程摄像头流界面上显示
用到的插件:dplayer、hls dplayer官网:dplayer dplayer官网npm安装的是最新版本(1.27.1),真机运行异常了,可以安装历史版本 dplayer历史版本 远程摄像头视频流格式:m3u8 可以用来测试的视频流&a…...
elasticSearch(一):elasticSearch介绍
一、搜索引擎 搜索引擎的核心目的是帮助用户以最小的成本才海量数据中找到最想要的结果。糟糕的搜索引擎往往会所问非所答,用户查了半天也得不到自己想要的,好的搜索引擎往往第一页就是用户最想要的结果。而目前判断搜索引擎好坏一般是从召回率、精确率…...
基于 RWKV 的视觉语言模型 VisualRWKV 被 COLING 2025 接收!
基于 RWKV 的视觉语言模型 VisualRWKV 被 COLING 2025 接收! COLING,国际计算语言学会议(International Conference on Computational Linguistics),是自然语言处理和计算语言学领域的顶级国际会议(CCF 推…...
输出九九乘法表:JAVA
链接:登录—专业IT笔试面试备考平台_牛客网 来源:牛客网 输出九九乘法表。 具体的输出格式见样例,其中每一项乘法的结果需要占据2个字符宽度,不同的乘法结果之间用1个空格间隔。 举例: 1*4_4_2*4_8_3*412_4*416 上…...
kube-proxy的iptables工作模式分析
系列文章目录 iptables基础知识 文章目录 系列文章目录前言一、kube-proxy介绍1、kube-proxy三种工作模式2、iptables中k8s相关的链 二、kube-proxy的iptables模式剖析1.集群内部通过clusterIP访问到pod的流程1.1.流程分析 2.从外部访问内部service clusterIP后端pod的流程2.1…...
xiaolin coding 图解 MySQL笔记——锁篇
1. 全局锁是怎么用的? flush tables with read lock 执行以后,整个数据库就处于只读状态了,这时其他线程执行对数据的增删改操作(insert、delete、update);对表结构的更改操作(alter table、dr…...
11-SpringCloud Alibaba-Seata处理分布式事务
一、Seata基本介绍 官网:https://seata.apache.org/zh-cn/ Seata 是一款开源的分布式事务解决方案,致力于提供高性能和简单易用的分布式事务服务。Seata 将为用户提供了 AT、TCC、SAGA 和 XA 事务模式,为用户打造一站式的分布式解决方案。 我…...
更换 Git 项目的远程仓库地址(五种方法)
更换 Git 项目的远程仓库地址有几种不同的方法,下面是详细的步骤和一些额外的方法来完成这个任务。 方法1:使用 git remote set-url 这是最直接的方法。假设你想要更改名为 origin 的远程仓库地址到新的 URL。 查看当前的远程仓库配置: git…...
3大模块助力学生会视频自动评审系统升级
一、项目背景 传统的学生会视频作品或电子申请材料评审由老师线下逐一面审完成。面对大量学生提交的作品,评审效率低、耗时长,且主观性较强。为此,客户希望开发一个基于AI的线上自动面审系统,从语法正确性、演讲流利度和发音准确…...
鸿蒙开发——使用ArkTs处理XML文本
1、概 述 XML(可扩展标记语言)是一种用于描述数据的标记语言,旨在提供一种通用的方式来传输和存储数据,特别是Web应用程序中经常使用的数据。XML并不预定义标记。因此,XML更加灵活,并且可以适用于广泛的应…...
【Linux】文件查找 find grep
文章目录 1. 引言简介Linux文件系统的基本概念为什么文件查找命令在日常使用中非常重要 2. find 命令基本用法常见选项和参数高级用法和技巧实际示例 3. locate 命令如何工作与find命令的区别安装和使用locate实际示例 4. grep 结合文件查找使用grep进行内容查找结合find命令使…...
Go学习笔记之运算符号
算数运算符 运算符描述相加-相减*相乘/相除%求余自增–自减 代码示例: package mainimport "fmt"func main() {// 算数运算符a : 1b : 2fmt.Println(a b) // 加 3fmt.Println(a - b) // 减 -1fmt.Println(a * b) // 乘 2fmt.Println(a / b) // 除 0fm…...
npm : 无法加载文件 D:\nodejs\npm.ps1,因为在此系统上禁止运行脚本
要以管理员身份打开PowerShell,请按照以下步骤操作: 在Windows搜索框中查找PowerShell: 在任务栏上,点击左下角的Windows徽标(或按Win S键)以打开搜索框。输入“PowerShell”以查找PowerShell应用程序。右…...
YOLOv8-ultralytics-8.2.103部分代码阅读笔记-torch_utils.py
torch_utils.py ultralytics\utils\torch_utils.py 目录 torch_utils.py 1.所需的库和模块 2.def torch_distributed_zero_first(local_rank: int): 3.def smart_inference_mode(): 4.def autocast(enabled: bool, device: str "cuda"): 5.def get_cpu_i…...
Java中的数据存储结构解析与应用
一、引言 在Java编程中,数据存储结构是程序设计的基础。合理选择和使用数据结构可以提高程序的性能和可维护性。本文将带您了解Java中的各种数据存储结构,并探讨其优缺点及适用场景。 二、基本数据类型 Java提供了8种基本数据类型,分别是b…...
【链表】力扣 141. 环形链表
一、题目 二、思路 龟兔进行赛跑 龟的速度是 1,兔的速度是 2龟兔从同一起点出发,若 龟追上兔 则说明 有环 存在;若追不上,则说明无环。 三、代码 /*** Definition for singly-linked list.* class ListNode {* int val;* …...
Hbase整合Mapreduce案例2 hbase数据下载至hdfs中——wordcount
目录 整合结构准备数据下载pom.xmlMain.javaReduce.javaMap.java操作 总结 整合结构 和案例1的结构差不多,Hbase移动到开头,后面跟随MR程序。 因此对于输入的K1 V1会进行一定的修改 准备 在HBASE中创建表,并写入数据 create "wunaii…...
diff算法
vue的diff算法详解 vue: diff 算法是一种通过同层的树节点进行比较的高效算法 其有两个特点: 比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中,循环从两边向中间比较 diff 算法在很多场景下都有应用,在 vue 中&…...
最新AI问答创作运营系统(SparkAi系统),GPT-4.0/GPT-4o多模态模型+联网搜索提问+问答分析+AI绘画+管理后台系统
目录 一、人工智能 系统介绍文档 二、功能模块介绍 系统快速体验 三、系统功能模块 3.1 AI全模型支持/插件系统 AI大模型 多模态模型文档分析 多模态识图理解能力 联网搜索回复总结 3.2 AI智能体应用 3.2.1 AI智能体/GPTs商店 3.2.2 AI智能体/GPTs工作台 3.2.3 自…...
docker应用
docker version docker info docker images# 查看主机所以镜像 docker search# 搜索镜像 docker pull# 下载镜像 docker rmi# 删除镜像 docker tag 镜像名:版本 新镜像名:版本 # 复制镜像并改名 docker commit # 提交镜像 docker load -i /XXX/XXX.tar # 导入镜像 docker sav…...
逻辑回归:给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告(肿瘤大小、血液指标),你需要做出一个**决定性判断**:恶性还是良性?这种“非黑即白”的抉择,正是**逻辑回归(Logistic Regression)** 的战场&a…...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...
【JVM】- 内存结构
引言 JVM:Java Virtual Machine 定义:Java虚拟机,Java二进制字节码的运行环境好处: 一次编写,到处运行自动内存管理,垃圾回收的功能数组下标越界检查(会抛异常,不会覆盖到其他代码…...
工程地质软件市场:发展现状、趋势与策略建议
一、引言 在工程建设领域,准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具,正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
云原生玩法三问:构建自定义开发环境
云原生玩法三问:构建自定义开发环境 引言 临时运维一个古董项目,无文档,无环境,无交接人,俗称三无。 运行设备的环境老,本地环境版本高,ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式(本地调用) SSE模式(远程调用) 4. 注册工具提…...
20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码,而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库,可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画,可以包含在你的网页或应用项目中。 3.An…...
【JVM】Java虚拟机(二)——垃圾回收
目录 一、如何判断对象可以回收 (一)引用计数法 (二)可达性分析算法 二、垃圾回收算法 (一)标记清除 (二)标记整理 (三)复制 (四ÿ…...
系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文通过代码驱动的方式,系统讲解PyTorch核心概念和实战技巧,涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...
