# mindar图像追踪
**Repository Path**: NanChen042/mindar-image-tracking
## Basic Information
- **Project Name**: mindar图像追踪
- **Description**: Mindar.JS——实现AR图像追踪插入图片和视频效果
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-07-28
- **Last Updated**: 2023-12-20
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## Mindar.JS使用方式
>**注意：此篇文章需要启动https才可调用相机权限**
#### 图像追踪示例
1. 需要用到两个js库
```html
```
地址稍后放上
2. 下面看一下标签结构
这里是默认配置
```js
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文件，这个文件就是图像识别的图片，工具在这里[图像目标编辑器](https://hiukim.github.io/mind-ar-js-doc/tools/compile)
## 图像目标编辑器
如果是图片识别显示图片的话就很简单了
## 关于渲染视频
如果我想扫描图片展示视频该如何去操作呢？
我这里加了两张png图片用来做暂停按钮
我这里按顺序称谓`opc.png背景`，`2.png按钮`
当我们点击`背景`时让视频暂停，并让`按钮`层级往内移动 或者 让`按钮`隐藏
再次点击`背景`让视频播放，让`按钮`显示
```js
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");
```
完整代码：
```html
AR相机
```
实际效果：