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

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远程摄像头流界面上显示

用到的插件&#xff1a;dplayer、hls dplayer官网&#xff1a;dplayer dplayer官网npm安装的是最新版本&#xff08;1.27.1&#xff09;&#xff0c;真机运行异常了&#xff0c;可以安装历史版本 dplayer历史版本 远程摄像头视频流格式&#xff1a;m3u8 可以用来测试的视频流&a…...

elasticSearch(一):elasticSearch介绍

一、搜索引擎 搜索引擎的核心目的是帮助用户以最小的成本才海量数据中找到最想要的结果。糟糕的搜索引擎往往会所问非所答&#xff0c;用户查了半天也得不到自己想要的&#xff0c;好的搜索引擎往往第一页就是用户最想要的结果。而目前判断搜索引擎好坏一般是从召回率、精确率…...

基于 RWKV 的视觉语言模型 VisualRWKV 被 COLING 2025 接收!

基于 RWKV 的视觉语言模型 VisualRWKV 被 COLING 2025 接收&#xff01; COLING&#xff0c;国际计算语言学会议&#xff08;International Conference on Computational Linguistics&#xff09;&#xff0c;是自然语言处理和计算语言学领域的顶级国际会议&#xff08;CCF 推…...

输出九九乘法表:JAVA

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 输出九九乘法表。 具体的输出格式见样例&#xff0c;其中每一项乘法的结果需要占据2个字符宽度&#xff0c;不同的乘法结果之间用1个空格间隔。 举例&#xff1a; 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. 全局锁是怎么用的&#xff1f; flush tables with read lock 执行以后&#xff0c;整个数据库就处于只读状态了&#xff0c;这时其他线程执行对数据的增删改操作&#xff08;insert、delete、update&#xff09;&#xff1b;对表结构的更改操作&#xff08;alter table、dr…...

11-SpringCloud Alibaba-Seata处理分布式事务

一、Seata基本介绍 官网&#xff1a;https://seata.apache.org/zh-cn/ Seata 是一款开源的分布式事务解决方案&#xff0c;致力于提供高性能和简单易用的分布式事务服务。Seata 将为用户提供了 AT、TCC、SAGA 和 XA 事务模式&#xff0c;为用户打造一站式的分布式解决方案。 我…...

更换 Git 项目的远程仓库地址(五种方法)

更换 Git 项目的远程仓库地址有几种不同的方法&#xff0c;下面是详细的步骤和一些额外的方法来完成这个任务。 方法1&#xff1a;使用 git remote set-url 这是最直接的方法。假设你想要更改名为 origin 的远程仓库地址到新的 URL。 查看当前的远程仓库配置&#xff1a; git…...

3大模块助力学生会视频自动评审系统升级

一、项目背景 传统的学生会视频作品或电子申请材料评审由老师线下逐一面审完成。面对大量学生提交的作品&#xff0c;评审效率低、耗时长&#xff0c;且主观性较强。为此&#xff0c;客户希望开发一个基于AI的线上自动面审系统&#xff0c;从语法正确性、演讲流利度和发音准确…...

鸿蒙开发——使用ArkTs处理XML文本

1、概 述 XML&#xff08;可扩展标记语言&#xff09;是一种用于描述数据的标记语言&#xff0c;旨在提供一种通用的方式来传输和存储数据&#xff0c;特别是Web应用程序中经常使用的数据。XML并不预定义标记。因此&#xff0c;XML更加灵活&#xff0c;并且可以适用于广泛的应…...

【Linux】文件查找 find grep

文章目录 1. 引言简介Linux文件系统的基本概念为什么文件查找命令在日常使用中非常重要 2. find 命令基本用法常见选项和参数高级用法和技巧实际示例 3. locate 命令如何工作与find命令的区别安装和使用locate实际示例 4. grep 结合文件查找使用grep进行内容查找结合find命令使…...

Go学习笔记之运算符号

算数运算符 运算符描述相加-相减*相乘/相除%求余自增–自减 代码示例&#xff1a; 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&#xff0c;请按照以下步骤操作&#xff1a; 在Windows搜索框中查找PowerShell&#xff1a; 在任务栏上&#xff0c;点击左下角的Windows徽标&#xff08;或按Win S键&#xff09;以打开搜索框。输入“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编程中&#xff0c;数据存储结构是程序设计的基础。合理选择和使用数据结构可以提高程序的性能和可维护性。本文将带您了解Java中的各种数据存储结构&#xff0c;并探讨其优缺点及适用场景。 二、基本数据类型 Java提供了8种基本数据类型&#xff0c;分别是b…...

【链表】力扣 141. 环形链表

一、题目 二、思路 龟兔进行赛跑 龟的速度是 1&#xff0c;兔的速度是 2龟兔从同一起点出发&#xff0c;若 龟追上兔 则说明 有环 存在&#xff1b;若追不上&#xff0c;则说明无环。 三、代码 /*** Definition for singly-linked list.* class ListNode {* int val;* …...

Hbase整合Mapreduce案例2 hbase数据下载至hdfs中——wordcount

目录 整合结构准备数据下载pom.xmlMain.javaReduce.javaMap.java操作 总结 整合结构 和案例1的结构差不多&#xff0c;Hbase移动到开头&#xff0c;后面跟随MR程序。 因此对于输入的K1 V1会进行一定的修改 准备 在HBASE中创建表&#xff0c;并写入数据 create "wunaii…...

diff算法

vue的diff算法详解 vue&#xff1a; diff 算法是一种通过同层的树节点进行比较的高效算法 其有两个特点&#xff1a; 比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中&#xff0c;循环从两边向中间比较 diff 算法在很多场景下都有应用&#xff0c;在 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…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

API网关Kong的鉴权与限流:高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...