月: 2022年12月

MindARを利用した動画配置

投稿日

動画配置の最小テンプレート

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image-aframe.prod.js"></script>
<script>        
const showPortfolio = (done) => {
      const portfolio = document.querySelector("#panel");
      const portfolio2 = document.querySelector("#panel2");
      const PreviewButton = document.querySelector("#preview-button");
      const PreviewButton2 = document.querySelector("#preview-button2");
      portfolio.setAttribute("visible", true);
      portfolio2.setAttribute("visible", true);
     let y = 0;

const id = setInterval(() => {
        y += 0.008;
        if (y >= 0.6) {
          clearInterval(id);
     
          PreviewButton.addEventListener('click', () => {
            PreviewButton.setAttribute("visible", false);
            const testVideo = document.createElement( "video" );
            const canplayWebm = testVideo.canPlayType( 'video/webm; codecs="vp8, vorbis"' );
            if (canplayWebm == "") {
              document.querySelector("#video-link").setAttribute("src", "#video-mp4");
              document.querySelector("#video-mp4").play();
            } else {
              document.querySelector("#video-link").setAttribute("src", "#video-webm");
              document.querySelector("#video-webm").play();
            }
          });
          
          
          PreviewButton2.addEventListener('click', () => {
            PreviewButton2.setAttribute("visible", false);
            const testVideo = document.createElement( "video" );
            const canplayWebm = testVideo.canPlayType( 'video/webm; codecs="vp8, vorbis"' );
            if (canplayWebm == "") {
              document.querySelector("#video-link2").setAttribute("src", "#video-mp41");
              document.querySelector("#video-mp41").play();
            } else {
              document.querySelector("#video-link2").setAttribute("src", "#video-webm1");
              document.querySelector("#video-webm1").play();
            }
          });
        }
        portfolio.setAttribute("position", "0 " + 0 + " -0.01");
      }, 10);
    }
//  Aframeでターゲット0を摘出 
AFRAME.registerComponent('mytarget', {
      init: function () {
        this.el.addEventListener('targetFound', event => {
              showPortfolio(() => {
              });
           });
        this.el.addEventListener('targetLost', event => {
        });
      }
    });
</script>

<link rel="stylesheet" href="https://jirochanf.github.io/card/assets/webar.css">
</head>

<body>	
<div class="example-container">
<div id="example-scanning-overlay" class="hidden">
<div class="inner">
<img src="https://jirochanf.github.io/card/assets/overlay_mind3.jpg"/>  <!-- オーバーレイ画像定義 -->
<div class="scanline"></div>
</div>
</div>

<a-scene mindar-image="imageTargetSrc: https://jirochanf.github.io/card/assets/targets3.mind; showStats: false; uiScanning: #example-scanning-overlay;" embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">

<a-assets>
  <img id="preview" src="https://jirochanf.github.io/card/assets/mind3_prev01.jpg" />
  <img id="preview2" src="https://jirochanf.github.io/card/assets/preview2.png" />

  <video id="video-mp4" autoplay="false" loop="false" src="https://jirochanf.github.io/card/assets/video31.mp4"></video>
  <video id="video-webm" autoplay="false" loop="false" src="https://jirochanf.github.io/card/assets/video31.webm"></video>
  <video id="video-mp41" autoplay="false" loop="false" src="https://jirochanf.github.io/card/assets/video3.mp4"></video>
  <video id="video-webm1" autoplay="false" loop="false" src="https://jirochanf.github.io/card/assets/video3.webm"></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>
<!-- target0 確認後-->
<a-entity id="mytarget" mytarget mindar-image-target="targetIndex: 0">
<!--  panel1 表示  -->  
<a-entity visible="false" id="panel" position="0 0 0">
<!--  動画表示  -->
<a-entity id="panel-item0">
<a-video id="video-link" webkit-playsinline playsinline width="1" height="0.552" position="0 0 0"></a-video>
<a-image id="preview-button" class="clickable" src="#preview" alpha-test="0.5" position="0 0 0" height="0.552" width="1">
</a-image>
</a-entity> 
</a-entity>
<!--  panel2 表示  -->  
<a-entity visible="false" id="panel2" position="0.3 0.3 0" rotation="10 0 0">
<!--  動画表示  -->
<a-entity id="panel2-item0">
<a-video id="video-link2" webkit-playsinline playsinline width="0.8" height="0.45" position="0.3 0.3 0"></a-video>
<a-image id="preview-button2" class="clickable" src="#preview2" alpha-test="0.5" 
         position="0.3 0.3 0" height="0.45" width="0.8">
</a-image>
</a-entity>  
</a-entity>  
</a-entity>   
</a-scene>
</div>	
</body>
</html>

MindARで動画再生

投稿日

テンプレートを利用して動画を２画面表示できるようになった

これまでMinArを利用してイメージトラッキング後、テンプレートどおりの動画再生はできたが、自由に動画を配置することができなかった

テンプレートの構造がなんとなく理解でき、自由な位置に配置可能となった

https://mindar-2videos.glitch.me/

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image-aframe.prod.js"></script>
<script src="tow_video2.js"></script>

<link rel="stylesheet" href="https://jirochanf.github.io/card/assets/webar.css">	  
</head>

<body>	
<div class="example-container">
<div id="example-scanning-overlay" class="hidden">
<div class="inner">
<img src="https://jirochanf.github.io/card/assets/overlay_mind3.jpg"/>  <!-- オーバーレイ画像定義 -->
<div class="scanline"></div>
</div>
</div>

<a-scene mindar-image="imageTargetSrc: https://jirochanf.github.io/card/assets/targets3.mind; showStats: false; uiScanning: #example-scanning-overlay;" embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">

<a-assets>
  <img id="card" src="https://jirochanf.github.io/card//assets/card31.png" />

  <img id="icon-web" src="https://jirochanf.github.io/card//assets/web.png" />
  <img id="icon-location" src="https://jirochanf.github.io/card/assets/youtube.png" />
  <img id="icon-profile" src="https://jirochanf.github.io/card/assets/kao2.png" />
  <img id="icon-phone" src="https://jirochanf.github.io/card/assets/phone.png" />
  <img id="icon-email" src="https://jirochanf.github.io/card/assets/email.png" />
  <img id="icon-play" src="https://jirochanf.github.io/card/assets/play.png" />
  <img id="icon-left" src="https://jirochanf.github.io/card/assets/left.png" />
  <img id="icon-right" src="https://jirochanf.github.io/card/assets/right.png" />

  <img id="preview" src="https://jirochanf.github.io/card/assets/mind3_prev01.jpg" />
  
  <video id="video-mp4" autoplay="false" loop="false" src="https://jirochanf.github.io/card/assets/video31.mp4"></video>
  <video id="video-webm" autoplay="false" loop="false" src="https://jirochanf.github.io/card/assets/video31.webm"></video>
  <video id="video-mp41" autoplay="false" loop="false" src="https://jirochanf.github.io/card/assets/video3.mp4"></video>
  <video id="video-webm1" autoplay="false" loop="false" src="https://jirochanf.github.io/card/assets/video3.webm"></video>

  <img id="namecard" src="https://jirochanf.github.io/card/assets/alubum_mind3_1.jpg" />
  <img id="preview2" src="https://jirochanf.github.io/card/assets/preview2.png" />
  <img id="preview3" src="https://jirochanf.github.io/card/assets/alubum_mind3_2.jpg" />

  <img id="ura" src="https://jirochanf.github.io/card/assets/ura_guide.png" />

<!--3Dmodel-->
<a-asset-item id="avatarModel" src="https://jirochanf.github.io/card/3dmodel/gopro10.gltf"></a-asset-item>
<a-asset-item id="bearModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/examples/image-tracking/assets/band-example/bear/scene.gltf"></a-asset-item>
<a-asset-item id="raccoonModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/examples/image-tracking/assets/band-example/raccoon/scene.gltf"></a-asset-item>
   
</a-assets>
	
<a-camera position="0 0 0" look-controls="enabled: false" cursor="fuse: false; rayOrigin: mouse;" raycaster="far: 10000; objects: .clickable">
</a-camera>

<!-- target0 確認後-->
<a-entity id="mytarget" mytarget mindar-image-target="targetIndex: 0">
<a-entity visible="false" id="panel" position="0 0 0">
<!--  動画表示  -->
<a-entity id="panel-item0">
<a-video id="video-link" webkit-playsinline playsinline width="1" height="0.552" position="0 0 0"></a-video>
<a-image id="preview-button" class="clickable" src="#preview" alpha-test="0.5" position="0 0 0" height="0.552" width="1">
</a-image>
</a-entity> 
<!--  スライド　  -->
	<a-entity id="panel-item1" visible="false">
  <a-image class="clickable" src="#preview2" alpha-test="0.5" position="0 0 0" height="0.552" width="1"></a-image>
  </a-entity>
  <a-entity id="panel-item2" visible="false">
  <a-image class="clickable" src="#preview3" alpha-test="0.5" position="0 0 0" height="0.552" width="1"></a-image>
  </a-entity>
  <a-image visible="false" id="left-button" class="clickable" src="#icon-left" position="-0.7 0 0" height="0.15" width="0.15"></a-image>
  <a-image visible="false" id="right-button" class="clickable" src="#icon-right" position="0.7 0 0" height="0.15" width="0.15"></a-image>
  <a-image visible="false" id="profile-button" class="clickable" src="#icon-profile" position="-0.42 -0.5 0" height="0.15" width="0.15"></a-image>
  <a-image visible="false" id="web-button" class="clickable" src="#icon-web" alpha-test="0.5" position="-0.14 -0.5 0" height="0.15" width="0.15"
               link="href: https://netken.info/; title: My Home Page;"></a-image>
  <a-image visible="false" id="email-button" class="clickable" src="#icon-email"  position="0.14 -0.5 0" height="0.15" width="0.15"
               link="href: mailto:fujiwara@yomde.net;"></a-image>
  <a-image visible="false" id="location-button" class="clickable" src="#icon-location" position="0.42 -0.5 0" height="0.15" width="0.15"
               link="href: https://www.youtube.com/channel/UC262c4cdRkfrllw37mpUKOA/videos; title: Senior Travel;"></a-image>

<a-gltf-model id="avatar" rotation="0 0 0" position="-0.4 0.7 0" scale="0.04 0.04 0.04" src="#raccoonModel"          
              animation="property: position; to: -0.2 0.4 0.1; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate"
></a-gltf-model>
  
  
  </a-entity>
<!--  panel2 表示  -->  
<a-entity visible="false" id="panel2" position="0.3 0.3 0" rotation="10 0 0">
<!--  動画表示  -->
<a-entity id="panel2-item0">
<a-video id="video-link2" webkit-playsinline playsinline width="0.8" height="0.45" position="0.3 0.3 0"></a-video>
<a-image id="preview-button2" class="clickable" src="#preview2" alpha-test="0.5" 
         position="0.3 0.3 0" height="0.45" width="0.8">
</a-image>
</a-entity>    
</a-entity>  
</a-entity>   
</a-scene>
</div>	
</body>
</html>
const showInfo = () => {
      let y = 0;
      const profileButton = document.querySelector("#profile-button");
      const webButton = document.querySelector("#web-button");
      const emailButton = document.querySelector("#email-button");
      const locationButton = document.querySelector("#location-button");
      const namecard = document.querySelector("#namecard");

      profileButton.setAttribute("visible", true);
      setTimeout(() => {
        webButton.setAttribute("visible", true);
      }, 10);
      setTimeout(() => {
        emailButton.setAttribute("visible", true);
      }, 10);
      setTimeout(() => {
        locationButton.setAttribute("visible", true);
      }, 10);
      setTimeout(() => {
        namecard.setAttribute("visible", true);
      }, 10);

   }

const showPortfolio = (done) => {
      const portfolio = document.querySelector("#panel");
        
      const LeftButton = document.querySelector("#left-button");
      const RightButton = document.querySelector("#right-button");
      const PreviewButton = document.querySelector("#preview-button");
      const PreviewButton2 = document.querySelector("#preview-button2");
      const portfolio2 = document.querySelector("#panel2");
        

      let y = 0;
      let currentItem = 0;

      portfolio.setAttribute("visible", true);
      portfolio2.setAttribute("visible", true);

      const showPortfolioItem = (item) => {
        for (let i = 0; i <= 2; i++) {
          document.querySelector("#panel-item" + i).setAttribute("visible", i === item);
        }
      }
      
      const showPortfolioItem2 = (item) => {
        for (let i = 0; i <= 2; i++) {
          document.querySelector("#panel2-item" + i).setAttribute("visible", i === item);
        }
      }
      
      const id = setInterval(() => {
        y += 0.008;
        if (y >= 0.6) {
          clearInterval(id);
          LeftButton.setAttribute("visible", true);
          RightButton.setAttribute("visible", true);
          LeftButton.addEventListener('click', () => {
            currentItem = (currentItem + 1) % 3;
            showPortfolioItem(currentItem);
          });
          RightButton.addEventListener('click', () => {
            currentItem = (currentItem - 1 + 3) % 3;
            showPortfolioItem(currentItem);
          });

          PreviewButton.addEventListener('click', () => {
            PreviewButton.setAttribute("visible", false);
            const testVideo = document.createElement( "video" );
            const canplayWebm = testVideo.canPlayType( 'video/webm; codecs="vp8, vorbis"' );
            if (canplayWebm == "") {
              document.querySelector("#video-link").setAttribute("src", "#video-mp4");
              document.querySelector("#video-mp4").play();
            } else {
              document.querySelector("#video-link").setAttribute("src", "#video-webm");
              document.querySelector("#video-webm").play();
            }
          });
          
          PreviewButton2.addEventListener('click', () => {
            PreviewButton2.setAttribute("visible", false);
            const testVideo = document.createElement( "video" );
            const canplayWebm = testVideo.canPlayType( 'video/webm; codecs="vp8, vorbis"' );
            if (canplayWebm == "") {
              document.querySelector("#video-link2").setAttribute("src", "#video-mp41");
              document.querySelector("#video-mp4").play();
            } else {
              document.querySelector("#video-link2").setAttribute("src", "#video-webm1");
              document.querySelector("#video-webm").play();
            }
          });
          

          setTimeout(() => {
            done();
          }, 50);
        }
        portfolio.setAttribute("position", "0 " + 0 + " -0.01");
      }, 10);
    }


    //  Aframeでターゲット0を摘出 

AFRAME.registerComponent('mytarget', {
      init: function () {
        this.el.addEventListener('targetFound', event => {
          console.log("target found");
//           showAvatar(() => {
            setTimeout(() => {
              showPortfolio(() => {
                setTimeout(() => {
                 showInfo();
                }, 600);
              });
            }, 600);
           });
//        });
        this.el.addEventListener('targetLost', event => {
          console.log("target found");
        });
        //this.el.emit('targetFound');
      }
    });