Mindar.JS——实现AR图像追踪插入图片或视频

这篇具有很好参考价值的文章主要介绍了Mindar.JS——实现AR图像追踪插入图片或视频。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Mindar.JS使用方式

Mindar.JS——实现AR图像追踪插入图片或视频,html+css,JavaScript,javascript,ar,音视频

注意:此篇文章需要启动https才可调用相机权限

图像追踪示例
  1. 需要用到两个js库
    <script src="./js/aframe.min.js"></script>
    <script src="./js/mindar-image-aframe.prod.js"></script>
  1. 下面看一下标签结构
    Mindar.JS——实现AR图像追踪插入图片或视频,html+css,JavaScript,javascript,ar,音视频

这里是默认配置

    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文件,这个文件就是图像识别的图片,工具在这里图像目标编辑器

图像目标编辑器

Mindar.JS——实现AR图像追踪插入图片或视频,html+css,JavaScript,javascript,ar,音视频
Mindar.JS——实现AR图像追踪插入图片或视频,html+css,JavaScript,javascript,ar,音视频
如果是图片识别显示图片的话就很简单了

关于渲染视频

如果我想扫描图片展示视频该如何去操作呢?
我这里加了两张png图片用来做暂停按钮
Mindar.JS——实现AR图像追踪插入图片或视频,html+css,JavaScript,javascript,ar,音视频

Mindar.JS——实现AR图像追踪插入图片或视频,html+css,JavaScript,javascript,ar,音视频
我这里按顺序称谓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图像测试文章来源地址https://www.toymoban.com/news/detail-620671.html

到了这里,关于Mindar.JS——实现AR图像追踪插入图片或视频的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • html怎么插入视频?视频如何插入页面

    HTML 的功能强大,基本所有的静态效果都可以在此轻松呈现,各种视频网站内有大量的视频内容,本篇文章教你如何在 html 中插入视频 代码如下: 标签定义和使用说明 ​ video ​标签定义视频,类似电源片段和其他视频流。 ​ video ​目前为止支持三种视频格式:Ogg、WebM、

    2024年02月11日
    浏览(47)
  • 在html中使用js实现图片的无缝滚动(四种状态)

    获取整个ul和ul下面的所有li, 把ul里面的li内容添加一份,因为需要完成图片滚动效果所以需要二份完成无缝对接, 定义初始速度。 设置定时器 在定时中进行判断 实现原理:因为ul是跟着父元素div进行定位的,所以ul的offsetleft的值初始值为0。 只需要改变ul的left值就可以完成

    2024年02月09日
    浏览(38)
  • JS 截取视频某一帧图片 实现视频截图

    第一步:创建video用于存放需要截取的视频文件 第二步:创建canvas画布,用于绘制截取到的图片 1,定义创建一个 canvas 标签; 2,指定 canvas 标签的宽高; 3, 调用canvas元素中的 getContext() 方法(返回一个用于在画布上绘图的环境)。 要注意的是 drawImage() 的第一个参数不再是player而

    2024年02月12日
    浏览(45)
  • Vuforia AR篇(二)— 扫描指定图片播放视频

    Vuforia官网 登录官网创建一个账号,然后登录 进入ARCamera配置 Vuforia Configuration在Unity中包含了多个参数设置,用于调整和优化AR应用程序。这些设置包括: Vuforia版本 :显示当前Vuforia SDK的版本。 App License Key :在此处添加的Vuforia开发许可密钥。 Delayed Initialization :如果勾选,

    2024年04月28日
    浏览(50)
  • Print.js实现打印pdf,HTML,图片(可设置样式可分页)

    目录 一.安装及引入Print.js 二.介绍 三.常用配置 四.具体使用 一.安装及引入Print.js 1.安装 2.在需要使用的文件引入 二.介绍 Print.js有四种打印类型:\\\'pdf\\\'、\\\'html\\\'、\\\'image\\\'、\\\'json\\\'。 它的基本用法是调用printJS()并传入参数 三.常用配置 Print.js接受一个对象作为参数,在这里你可以配置

    2024年02月06日
    浏览(50)
  • html插入视频的方法

    方法一:video标签 用于在html元素中添加视频元素 video controls source src=\\\"视频路径\\\" type=\\\"video/视频格式\\\" /video 我引入视频就是使用这个标签,但是我使用视频的的属性并不多,只是使用了简单的播放暂停,至于其他的属性可能现在没有怎么使用,以后需要继续用一下。 !DOCTYPE h

    2024年03月09日
    浏览(42)
  • HTML插入视频和音频(详解)

      HTML5未出来之前,在线的音频和视频都是借助Flash或者第三方工具实现的,现在HTML5也支持了这方面的功能。在一个支持HTML5的浏览器中,不需要安装任何插件就能播放音频和视频。原生的支持音频和视频,为HTML5注入了巨大的发展潜力。   html实现音频嵌入(传统方式):

    2024年02月04日
    浏览(36)
  • 基于html+js实现轮播图(自动轮播、左右按钮、小圆点点击及切换图片)

    使用html和js实现的一个简单小练习轮播图。大概功能主要是: 1、使用时间函数自动切换图片; 2、在图片及按钮及小圆点的父节点身上绑定事件代理,添加mouseenter及mouseleave事件类型,让鼠标移入,图片暂停,移出,图片恢复轮播; 3、在按钮的父节点身上绑定事件代理,事

    2024年02月11日
    浏览(44)
  • 直接在html中引入Vue.js的cdn来实现一个简单的上传图片组件

    当使用 Vue.js 的 CDN 来实现一个简单的上传图片组件时,你可以利用 Vue 的数据绑定和事件处理能力,结合 HTML 和 CSS,轻松地创建一个交互式的图片上传界面。以下是一个示例: index.html TANKING https://afdian.net/item/ffa3292a337c11ee9a8c5254001e7c00

    2024年02月13日
    浏览(44)
  • 在HTML中插入音频和视频(详解)

    Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍在HTML中插入音频和视频以及部分理论知识 🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁 🍉博主收将持续更新学习记录获,友友们有任何问题可以在评论区留言 目录 一、音频标签:audio 1、简介 2、使用 二、视频标签:video 1、

    2024年02月05日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包