Question

我想在使用网络摄像头检测到标记（HIRO）时播放视频。当我删除它时，应该暂停它，并且当检测到标记时，应该使用A帧播放视频。我已经编写了代码，但是没有用。谁能帮我？我尝试了所有可能的方法，但无法正常工作，任何人都可以张贴代码或发送示例。

看到标记时-播放视频。丢失标记后-暂停视频

         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>

Answer 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。

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

1 个答案: