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…...
Linux 文件类型,目录与路径,文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件:-(纯文本文件,二进制文件,数据格式文件) 如文本文件、图片、程序文件等。 目录文件:d(directory) 用来存放其他文件或子目录。 设备…...
golang循环变量捕获问题
在 Go 语言中,当在循环中启动协程(goroutine)时,如果在协程闭包中直接引用循环变量,可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下: 问题背景 看这个代码片段: fo…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中,RouterProvider 是一个核心组件,用于提供基于数据路由(data routers)的新型路由方案。 它替代了传统的 <BrowserRouter>,支持更强大的数据加载和操作功能(如 loader 和…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件,用于在原生应用中加载 HTML 页面: 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中,从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备(如专用硬件设备),从而消除了直接物理连接的需要。USB over IP的…...
08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险
C#入门系列【类的基本概念】:开启编程世界的奇妙冒险 嘿,各位编程小白探险家!欢迎来到 C# 的奇幻大陆!今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类!别害怕,跟着我,保准让你轻松搞…...
Go语言多线程问题
打印零与奇偶数(leetcode 1116) 方法1:使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...
