增强现实中使用 A 帧检测标记的视频播放答案

【问题标题】：Video Playback in Augmented Reality On Detecting Marker Using A Frames增强现实中使用 A 帧检测标记的视频播放
【发布时间】：2018-07-23 06:46:26
【问题描述】：

我想在使用网络摄像头检测到标记 (HIRO) 时播放视频。当我删除它应该暂停，当检测到标记时，视频应该使用 A-Frame 播放。我已经编写了代码，但它不起作用。谁能帮我？我尝试了所有可能的方法，但它不起作用，任何人都可以发布代码或发送示例。

当您看到标记时 - 播放视频。一旦丢失标记 - 暂停视频

例如：Video Augmentation

         AFRAME.registerComponent('vidhandler', {
         init: function () {
          this.toggle = false;
          document.querySelector("#vid").pause(); //reference to the video
         },
         tick:function(){  
         if(document.querySelector("a-marker").object3D.visible == true){
           if(!this.toggle){
             this.toggle = true;
             document.querySelector("#vid").play();
           }
         }else{
           this.toggle = false;
           document.querySelector("#vid").pause();
         }
         }
         });

<!DOCTYPE html>
<html>
   <head>
      <title>Video AR</title>
   </head>
   <meta name="apple-mobile-web-app-capable" content="yes">
   <!-- <script src="vendor/aframe/build/aframe.min.js"></script> -->
   <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
   <!-- <script src="vendor/aframe/build/aframe.js"></script> -->
   <!-- include for artoolkit trackingBackend -->
   <script src='aframe_lib/artoolkit.min.js'></script>
   <script src='aframe_lib/artoolkit.api.js'></script>
   <!-- include for aruco trackingBackend -->
   <script src='aframe_lib/svd.js'></script> 
   <script src='aframe_lib/posit1.js'></script> 
   <script src='aframe_lib/cv.js'></script> 
   <script src='aframe_lib/aruco.js'></script> 
   <script src='aframe_lib/threex-arucocontext.js'></script> 
   <script src='aframe_lib/threex-arucodebug.js'></script>
   <!-- include for tango trackingBackend -->
   <script src='aframe_lib/THREE.WebAR.js'></script>
   <!-- include ar.js -->
   <script src='aframe_lib/signals.min.js'></script>
   <script src='aframe_lib/threex-artoolkitprofile.js'></script>
   <script src='aframe_lib/threex-artoolkitsource.js'></script>
   <script src='aframe_lib/threex-artoolkitcontext.js'></script>
   <script src='aframe_lib/threex-arbasecontrols.js'></script>
   <script src='aframe_lib/threex-armarkercontrols.js'></script>
   <script src='aframe_lib/threex-arsmoothedcontrols.js'></script>
   <script src='aframe_lib/threex-hittesting-plane.js'></script>
   <script src='aframe_lib/threex-hittesting-tango.js'></script>
   <script src='aframe_lib/threex-armarkerhelper.js'></script>
   <script src='aframe_lib/arjs-utils.js'></script>
   <script src='aframe_lib/arjs-session.js'></script>
   <script src='aframe_lib/arjs-anchor.js'></script>
   <script src='aframe_lib/arjs-hittesting.js'></script>
   <script src='aframe_lib/arjs-tangovideomesh.js'></script>
   <script src='aframe_lib/arjs-tangopointcloud.js'></script>
   <script src='aframe_lib/arjs-debugui.js'></script>
   <script src='aframe_lib/threex-armultimarkerutils.js'></script>
   <script src='aframe_lib/threex-armultimarkercontrols.js'></script>
   <script src='aframe_lib/threex-armultimarkerlearning.js'></script>
   <!-- include aframe-ar.js -->
   <script src="aframe_lib/system-arjs.js"></script>
   <script src="aframe_lib/component-anchor.js"></script>
   <script src="aframe_lib/component-hit-testing.js"></script>
   <body>
      <a-scene embedded arjs='trackingMethod: best;'>

         <a-anchor hit-testing-enabled='true'>

            <a-assets>

               <video  type="video/mp4" id="vid"    loop="false" src="https://ucarecdn.com/bb90f1f8-134e-4eb2-9688-38721ee7e9ad/" webkit-playsinline >
               </video>

            </a-assets>

            <a-marker type="pattern" url="https://ucarecdn.com/80ba69d9-96f2-46e7-aa62-8168f2ac06a5/">

               <a-video vidhandler  position="0 0.2 0" src="#vid" rotation="90 180 0"></a-video>

            </a-marker>

         </a-anchor>

         <a-entity light="color: #ccccff; intensity: 1; type: ambient;" visible=""></a-entity>

      </a-scene>
      
   </body>

【问题讨论】：

是电脑还是手机？
它在电脑上.......

标签： javascript jquery html augmented-reality aframe

【解决方案1】：

1) 确保您在资产中正确加载视频 - 输入 crossorigin: anonymous 并确保您可以访问该视频。

<a-assets>
  <video id="vid" src="buckBunny.mp4" loop="true" crossorigin>
</a-assets>

2) 设置标记

<a-marker preset="hiro" vidhandler>
  <a-plane position='1 2 0' scale="2 2 2" width="2" rotation="-90 0 0" 
   material='transparent:true; opacity: 0.7; src:#vid'></a-plane>
</a-marker>

3) 制作一个将播放视频的组件，一次/仅在看到标记时播放

AFRAME.registerComponent('vidhandler', {
  init: function () {
    this.toggle = false;
    this.vid = document.querySelector("#vid")
    this.vid.pause()
},
tick:function(){
   if(this.el.object3D.visible == true){
     if(!this.toggle){
       this.toggle = true;
       this.vid.play();
    }
  }else{
    this.toggle = false;
    this.vid.pause();
  }
 }
});

4) 在客厅享受Big Buck bunny

5) 查看我的glitch。

【讨论】：

一旦我查看了ar events，我将修改 anwser 以利用新事件
你好 Piotr Adam Milewski，它工作正常。但是当我们显示标记时有一个小问题，标记上显示一个空白屏幕。当我们重新加载或等待一段时间视频被加载和播放时。但最初，加载存在问题。如果存在加载问题，我们可以在标记上显示缓冲或加载。我们能否提高在标记上加载视频的性能。