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）是一种行为型设计模式，它允许对象在不同的状态下表现不同的行为，从而避免在代码中使用多重条件语句。该模式将状态封装在独立的对象中，并根据当前状态选择不同的…...
适配新的gps模块，在Android系统中注意哪些问题
首先理解Android LocationManager与GNSS硬件适配深度涵盖LocationManager功能、GNSS芯片适配接口、文件系统依赖、调试实战四大模块，“LocationManager是Android定位服务的总入口，GNSS HAL层适配，从芯片驱动到Framework层回调，完整…...
C++的std--ranges算法任务
C20引入的std::ranges算法彻底改变了标准库操作数据的方式，为现代C开发者提供了更简洁、更安全的范围处理工具。传统算法需要传递首尾迭代器，容易引发越界错误，而ranges通过直接操作范围视图和容器，大幅提升了代码可读性和安全性。…...
Qwen2.5-0.5B-Instruct实战：用Docker快速搭建个人专属AI聊天机器人
Qwen2.5-0.5B-Instruct实战：用Docker快速搭建个人专属AI聊天机器人 1. 引言 你是否想过拥有一个随时待命的AI助手？今天，我们将用最简单的方式，在10分钟内搭建一个属于你自己的智能聊天机器人。Qwen2.5-0.5B-Instruct是阿里开源的…...
SI4463项目实战：如何像调试代码一样，用WDS3工具精准调试射频参数？
SI4463射频调试实战：用WDS3实现代码级精准配置 在嵌入式开发领域，我们早已习惯了通过断点调试、日志输出和变量监控来掌控程序行为。但当面对射频模块时，许多工程师却感到束手无策——那些神秘的十六进制配置值、模糊不清的寄存器描述&#x…...
TensorFlow的一些基本概念
分类问题和回归问题 在实际生活中，人们面临的问题无非就是离散的和连续的。 比方区分出某个人属于男性还是女性，比方衣服是什么颜色的，什么种类的，这些都是在有限数量的结果中寻找答案，也就是最终结果只能是N个里面的某…...
yaml-cpp低延迟优化终极指南：实时系统中的高性能解析技巧
yaml-cpp低延迟优化终极指南：实时系统中的高性能解析技巧 【免费下载链接】yaml-cpp A YAML parser and emitter in C 项目地址: https://gitcode.com/gh_mirrors/ya/yaml-cpp yaml-cpp是一个功能强大的C YAML解析器和发射器，完全符合YAML 1.2规范…...
OmX企业解决方案：大型组织的AI编码助手部署全攻略
OmX企业解决方案：大型组织的AI编码助手部署全攻略 【免费下载链接】oh-my-codex OmX - Oh My codeX: Your codex is not alone. Add hooks, agent teams, HUDs, and so much more. 项目地址: https://gitcode.com/GitHub_Trending/oh/oh-my-codex OmX&#x…...
人形机器人手指关节选材：铝合金 vs PEEK，谁才是轻量化的终极方案？
在人形机器人研发中，末端执行器（手部）的性能直接决定了机器人的交互上限。而在手指关节这种“空间极度受限、重量极度敏感、运动频率极高”的部位，选铝合金还是 PEEK（聚醚醚酮），本质上是在“结构…...
AI赋能部署：让快马平台智能生成适配你业务场景的openclaw配置方案
今天想和大家分享一个用AI辅助部署openclaw爬虫的实践心得。作为一个经常需要数据采集的开发人员，我发现手动配置爬虫参数既耗时又容易出错，直到尝试了InsCode(快马)平台的AI辅助功能，整个过程变得轻松多了。 需求分析阶段 平台会先通过对话了…...
小米平板5变身Windows工作站：开源驱动如何重塑移动生产力边界？
小米平板5变身Windows工作站：开源驱动如何重塑移动生产力边界？ 【免费下载链接】MiPad5-Drivers https://github.com/Project-Aloha/windows_oem_xiaomi_nabu 项目地址: https://gitcode.com/gh_mirrors/mi/MiPad5-Drivers 当一款Android平板遇上…...