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）是一种行为型设计模式，它允许对象在不同的状态下表现不同的行为，从而避免在代码中使用多重条件语句。该模式将状态封装在独立的对象中，并根据当前状态选择不同的…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：
一、属性动画概述NETX 作用：实现组件通用属性的渐变过渡效果，提升用户体验。支持属性：width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项： 布局类属性（如宽高）变化时&#…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...
srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935，SRS管理页面端口是8080，可…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一，概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本：2014.07； Kernel版本：Linux-3.10； 二，Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)，并让boo…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体（对象或容器）QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质（定义颜色、反光等）QFirstPersonC…...
scikit-learn机器学习
# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...
认识CMake并使用CMake构建自己的第一个项目
1.CMake的作用和优势 跨平台支持：CMake支持多种操作系统和编译器，使用同一份构建配置可以在不同的环境中使用 简化配置：通过CMakeLists.txt文件，用户可以定义项目结构、依赖项、编译选项等，无需手动编写复杂的构建脚本…...
DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态
前言 在人工智能技术飞速发展的今天，深度学习与大模型技术已成为推动行业变革的核心驱动力，而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心，系统性地呈现了两部深度技术著作的精华：…...