Mindar.JS——实现AR图像追踪插入图片或视频
Mindar.JS使用方式
注意：此篇文章需要启动https才可调用相机权限
图像追踪示例
- 需要用到两个js库
<script src="./js/aframe.min.js"></script><script src="./js/mindar-image-aframe.prod.js"></script>
- 下面看一下标签结构
这里是默认配置
document.addEventListener("DOMContentLoaded", function () {const sceneEl = document.querySelector('a-scene');let arSystem;sceneEl.addEventListener('loaded', function () {// alert('执行')arSystem = sceneEl.systems["mindar-image-system"];});const startButton = document.querySelector("#example-start-button");startButton.addEventListener('click', () => {console.log("start");arSystem.start(); // start AR arSystem.pause(true);});sceneEl.addEventListener("arReady", (event) => {alert('AR引擎已启动')});sceneEl.addEventListener("arError", (event) => {alert('相机未启动成功！')});});
上面图片提到需要一个Mind文件，这个文件就是图像识别的图片，工具在这里图像目标编辑器
图像目标编辑器
如果是图片识别显示图片的话就很简单了
关于渲染视频
如果我想扫描图片展示视频该如何去操作呢？
我这里加了两张png图片用来做暂停按钮
我这里按顺序称谓opc.png背景，2.png按钮
当我们点击背景时让视频暂停，并让按钮层级往内移动 或者 让按钮隐藏
再次点击背景让视频播放，让按钮显示
const portfolio = document.querySelector("#portfolio-panel");const paintandquestPreviewButton = document.querySelector("#paintandquest-preview-button");const paintandquestPreviewButton2 = document.querySelector("#paintandquest-preview-button2");portfolio.setAttribute("visible", true);let y = 0;let status = false;paintandquestPreviewButton.addEventListener('click', () => {if (status == false) {// paintandquestPreviewButton.setAttribute("visible", false);const testVideo = document.createElement("video");const canplayWebm = testVideo.canPlayType('video/webm; codecs="vp8, vorbis"');if (canplayWebm == "") {document.querySelector("#paintandquest-video-link").setAttribute("src", "#paintandquest-video-mp4");document.querySelector("#paintandquest-video-mp4").play();} else {paintandquestPreviewButton2.setAttribute("visible", false);document.querySelector("#paintandquest-video-link").setAttribute("src", "#paintandquest-video-mp4");document.querySelector("#paintandquest-video-mp4").play();// alert('播放')status = true}} else {paintandquestPreviewButton2.setAttribute("visible", true);// alert('暂停')// portfolio.setAttribute("visible", true);document.querySelector("#paintandquest-video-mp4").pause();status = false;}});portfolio.setAttribute("position", "0 " + y + " -0.01");
完整代码：
<!--* @Description: * @Autor: Southern Wind* @Date: 2023-07-25 11:21:40* @LastEditors: Southern Wind* @LastEditTime: 2023-07-25 12:00:42
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AR相机</title><script src="./js/aframe.min.js"></script><script src="./js/mindar-image-aframe.prod.js"></script><script src="./js/vconsole.min.js"></script>
</head><body><div style="position: absolute; z-index: 1000"><button id="example-start-button">重新加载</button></div><a-scene mindar-image="imageTargetSrc: ./targets.mind;" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false"><a-assets><img id="paintandquest-preview" src="./images/opc.png" /><img id="paintandquest-preview2" src="./images/2.png" /><video id="paintandquest-video-mp4" autoplay="false" loop="true" src="./1234.mp4" playsinline webkit-playsinline></video></a-assets><a-camera position="0 0 0" look-controls="enabled: false" cursor="fuse: false; rayOrigin: mouse;" raycaster="far: 10000; objects: .clickable"></a-camera><a-entity mindar-image-target="targetIndex: 0" mytarget><a-entity visible=false id="portfolio-panel" position="0 0 -0.01"><a-image id="paintandquest-preview-button" class="clickable" src="#paintandquest-preview" alpha-test="0.5" position="0 0 0.1" height="0.552" width="1"></a-image><a-image id="paintandquest-preview-button2" class="clickable" src="#paintandquest-preview2" alpha-test="0.5" position="0 0 0.05" height="0.552" width="1"></a-image><a-video id="paintandquest-video-link" webkit-playsinline playsinline width="1" height="0.552" position="0 0 0"></a-video></a-entity></a-entity></a-scene><script>const vConsole = new VConsole()console.log(vConsole);</script><script>const portfolio = document.querySelector("#portfolio-panel");const paintandquestPreviewButton = document.querySelector("#paintandquest-preview-button");const paintandquestPreviewButton2 = document.querySelector("#paintandquest-preview-button2");portfolio.setAttribute("visible", true);let y = 0;let status = false;paintandquestPreviewButton.addEventListener('click', () => {if (status == false) {// paintandquestPreviewButton.setAttribute("visible", false);const testVideo = document.createElement("video");const canplayWebm = testVideo.canPlayType('video/webm; codecs="vp8, vorbis"');if (canplayWebm == "") {document.querySelector("#paintandquest-video-link").setAttribute("src", "#paintandquest-video-mp4");document.querySelector("#paintandquest-video-mp4").play();} else {paintandquestPreviewButton2.setAttribute("visible", false);document.querySelector("#paintandquest-video-link").setAttribute("src", "#paintandquest-video-mp4");document.querySelector("#paintandquest-video-mp4").play();// alert('播放')status = true}} else {paintandquestPreviewButton2.setAttribute("visible", true);// alert('暂停')// portfolio.setAttribute("visible", true);document.querySelector("#paintandquest-video-mp4").pause();status = false;}});portfolio.setAttribute("position", "0 " + y + " -0.01");document.addEventListener("DOMContentLoaded", function () {const sceneEl = document.querySelector('a-scene');let arSystem;sceneEl.addEventListener('loaded', function () {// alert('执行')arSystem = sceneEl.systems["mindar-image-system"];});const startButton = document.querySelector("#example-start-button");startButton.addEventListener('click', () => {console.log("start");arSystem.start(); // start AR arSystem.pause(true);});sceneEl.addEventListener("arReady", (event) => {alert('AR引擎已启动')});sceneEl.addEventListener("arError", (event) => {alert('相机未启动成功！')});});</script></body></html>
gitee地址
实际效果：
手机端ar图像测试
相关文章：
Mindar.JS——实现AR图像追踪插入图片或视频
Mindar.JS使用方式 注意：此篇文章需要启动https才可调用相机权限 图像追踪示例 需要用到两个js库 <script src"./js/aframe.min.js"></script><script src"./js/mindar-image-aframe.prod.js"></script>下面看一下标签…...
JVM源码剖析之JIT工作流程
版本信息： jdk版本：jdk8u40思想至上 Hotspot中执行引擎分为解释器、JIT及时编译器，上篇文章描述到解释器过度到JIT的条件。JVM源码剖析之达到什么条件进行JIT优化 这篇文章大致讲述JIT的编译过程。在JDK中javac和JIT两部分跟编译原理挂钩&a…...
【投资笔记】（23/7/31）下半年消费复苏的机会来了？
本文为本人投资逻辑验证，不作为任何建议； 政策面 汽车：（一）优化汽车购买使用管理（二）扩大新能源汽车消费，重点在于新能源汽车；房地产：（三&#x…...
MySQL二进制日志（binlog）配置、二进制日志binlog查看、mysqlbinlog查看二进制日志、二进制日志binlog清理等详解
提示：MySQL 中的日志比较重要的有 binlog（归档日志）、redo log（重做日志）以及 undo log，那么跟我们本文相关的主要是 binlog，另外两个日志松哥将来有空了再和大家详细介绍。 文章目录 1、二进制…...
Python内存管理解析：高效利用资源的关键
推荐阅读 AI文本 OCR识别最佳实践 AI Gamma一键生成PPT工具直达链接 玩转cloud Studio 在线编码神器 玩转 GPU AI绘画、AI讲话、翻译,GPU点亮AI想象空间 引言 在当今互联网时代，Python已经成为最受欢迎的编程语言之一。它的简洁、灵活和强大的生态系统使其成为…...
解决Debian10乱码以及远程连接ssh的问题
文章目录 解决Debian10乱码Debian10配置ssh 解决Debian10乱码 下载locales apt-get install locales配置语言 dpkg-reconfigure locales输入上述命令后会进入到以下页面【空格为选中，回车下一个页面】 在这个页面里我们按空格选中如图的选项，然后回…...
C# 泛型（Generic）
方法重载：方法名称相同，参数个数和参数类型不同； 优势：可以节约方法名称 劣势：方法过多 语法：public void writeContent(T t) 原理：普通的C#代码他是运行在前端进行编译，所有的类型需…...
)
Golang之路---02 基础语法——流程控制(if-else , switch-case , for-range , defer)
流程控制 条件语句——if-else if 条件 1 {分支 1 } else if 条件 2 {分支 2 } else if 条件 ... {分支 ... } else {分支 else }注： Golang编译器，对于 { 和 } 的位置有严格的要求，它要求 else if （或 else）和 两边…...
HTTP——HTTP报文内的HTTP信息
HTTP 通信过程包括从客户端发往服务器端的请求及从服务器端返回客户端的响应。本章就让我们来了解一下请求和响应是怎样运作的。 HTTP 一、HTTP报文二、请求报文及响应报文的结构三、编码提升传输速率1、报文主体和实体主题的差异2、压缩传输的内容编码3、分割发送的分块传输编…...
RocketMQ工作原理
文章目录 三.RocketMQ工作原理1.消息的生产消息的生产过程Queue选择算法 2.消息的存储1.commitlog文件目录与文件消息单元 2.consumequeue目录与文件索引条目 3.对文件的读写消息写入消息拉取性能提升 3.indexFile1.索引条目结构2.文件名的作用3.查询流程 4.消息的消费1.推拉消…...
Jenkins+Docker+Docker-Compose自动部署，SpringCloud架构公共包一个任务配置
前言 Jenkins和docker的安装，随便百度吧，实际场景中我们很多微服务的架构，都是有公共包，肯定是希望一个任务能够把公共包的配置加进去，一并构建，ok，直接上干货。 Jenkins 全局环境安装 pwd e…...
spring boot 2 配置上传文件大小限制
一、起因：系统页面上传一个文件超过日志提示的文件最大100M的限制，需要更改配置文件 二、经过： 1、在本地代码中找到配置文件，修改相应数值后交给运维更新生产环境配置，但是运维说生产环境没有这行配置，遂…...
Jmeter —— 录制脚本
1. 第一步：添加http代理服务器，在测试计划--》添加--》非测试元件--》http代理服务器 2. 第二步：添加线程组（这个线程组是用来放录制的脚本，不添加也可以，就直接放在代理服务器下） 测试计划--》…...
从零开始学Docker（一）：Docker的安装部署
前述：本次学习与整理来至B站【Python开发_老6哥】老师分享的课程，有兴趣的小伙伴可以去加油啦，附链接 宿主机环境：RockyLinux 9 版本管理 Docker引擎主要有两个版本：企业版（EE）和社区版&#…...
【ROS 02】ROS通信机制
机器人是一种高度复杂的系统性实现，在机器人上可能集成各种传感器(雷达、摄像头、GPS...)以及运动控制实现，为了解耦合，在ROS中每一个功能点都是一个单独的进程，每一个进程都是独立运行的。更确切的讲，ROS是进程&#…...
uniapp 选择城市定位 根据城市首字母分类排序
获取城市首字母排序，按字母顺序排序 <template><view class"address-wrap" id"address"><!-- 搜索输入框-end --><template v-if"!isSearch"><!-- 城市列表-start --><view class"address-sc…...
flex盒子 center排布，有滚动条时，拖动滚动条无法完整显示内容
文章目录 问题示例代码解决问题改进后的效果 问题 最近在开发项目的过程中，发现了一个有趣的事情，与flex盒子有关，不知道算不算是一个bug，不过对于开发者来说，确实有些不方便，感兴趣的同学不妨也去试试。 …...
Workbox使用分享
一、简要介绍 1.1 什么是Workbox 官方文档原文： At this point, service workers may seem tricky. There’s lots of complex interactions that are hard to get right. Network requests! Caching strategies! Cache management! Precaching! It’s a lot to r…...
秋招算法备战第32天 | 122.买卖股票的最佳时机II、55. 跳跃游戏、45.跳跃游戏II
122. 买卖股票的最佳时机 II - 力扣（LeetCode） 通过做差可以得到利润序列，然后只要利润需求的非负数求和就可以，因为这里没有手续费，某天买入之后买出可以等价为这几天连续买入卖出 class Solution:def maxProfit(se…...
Python状态模式介绍、使用
一、Python状态模式介绍 Python状态模式（State Pattern）是一种行为型设计模式，它允许对象在不同的状态下表现不同的行为，从而避免在代码中使用多重条件语句。该模式将状态封装在独立的对象中，并根据当前状态选择不同的…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令，在Linux上安装软件，以及如何在Linux上部署一个单体项目，大多数同学都会有相同的感受，那就是麻烦。 核心体现在三点： 命令太多了，记不住 软件安装包名字复杂&…...
AI，如何重构理解、匹配与决策？
AI 时代，我们如何理解消费？ 作者｜王彬 封面｜Unplash 人们通过信息理解世界。 曾几何时，PC 与移动互联网重塑了人们的购物路径：信息变得唾手可得，商品决策变得高度依赖内容。 但 AI 时代的来…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强：基于微服务与容器化的解决方案
在大数据时代，海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构，在处理大规模数据抓取任务时展现出强大的能力。然而，随着业务规模的不断扩大和数据抓取需求的日益复杂，传统…...
6️⃣Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙
Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙 一、前言：离区块链还有多远？ 区块链听起来可能遥不可及，似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上，构建一个区块链的核心并不复杂，尤其当你已经掌握了一门系统编程语言，比如 Go。 要真正理解区…...
Java后端检查空条件查询
通过抛出运行异常：throw new RuntimeException("请输入查询条件！");BranchWarehouseServiceImpl.java // 查询试剂交易（入库/出库）记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...
深入理解 React 样式方案
React 的样式方案较多，在应用开发初期，开发者需要根据项目业务具体情况选择对应样式方案。React 样式方案主要有： 1. 内联样式 2. module css 3. css in js 4. tailwind css 这些方案中，均有各自的优势和缺点。 1. 方案优劣势 1. 内联样式: 简单直观，适合动态样式和…...