Play gif in WebAR - Githubissues

Fatima-Aslam commented 10 months ago

I want to play a gif image in WebAR. I used the simple plane example. This simply overlay still image over the marker, how can I play the gif? Please help me out. As, in AR.js gif can be played, Is there any way to integrate AR.js gif code in MindAR. Thanks

BostonLeeK commented 10 months ago

Hi! You must understand that the main 3d engine by default is aframe (if u don't use three.js example). So you can use all types that can use aframe.

Example of using gif like material

https://codepen.io/iburguera/pen/pYMJJq

You must take simple gif shader, example https://www.npmjs.com/package/aframe-gif-shader

And set it like material.

Fatima-Aslam commented 10 months ago

Hi, Thank you for your help. I'm new to this. I use this code

  ```
  <a-entity mindar-image-target="targetIndex: 0" >
    <a-entity geometry="primitive:plane;width:1;height:2.5;" position="0 0 0" material="shader:gif;src:#banana;repeat: 2 2;alphaTest:0.5;"></a-entity>
    </a-entity>


 But nothing appears on the target. When I use this: 

`<a-entity mindar-image-target="targetIndex: 0" >
        <a-plane src="#banana" position="0 0 0" height="2.5" width="1" rotation="0 0 0"  ></a-plane>
        </a-entity>`

   Static image appear on target. 
How can I show an animated gif on target? Please help me out. Thanks

Fatima-Aslam commented 10 months ago

Thank you for your message. I tried it but didn't succeed. I tried this code: <!DOCTYPE html>

On using: " <a-plane src="#banana" position="0 0 0" height="1" width="1" rotation="0 0 0"> " I got banna image on plane with black background. And with: "<a-plane material="shader:gif;src:url( https://cdn.glitch.global/586ea659-575a-432e-9207-8a98ed1340d4/cartoon%20-%20Copy.gif?v=1693549829490);color:yellow;opacity:1" position="0 0 0" height="1" width="1" rotation="0 0 0">" I get only black plane.

I'm also attaching images. Is there any way I can directly use the tag Please help me to solve this issue. Thank you

On Fri, Sep 1, 2023 at 2:47 AM BostonLeeK @.***> wrote:

Hi! You must understand that the main 3d engine by default is aframe (if u don't use three.js example). So you can use all types that can use aframe.

Example of using gif like material

https://codepen.io/iburguera/pen/pYMJJq

You must take simple gif shader, example https://www.npmjs.com/package/aframe-gif-shader

And set it like material.

— Reply to this email directly, view it on GitHub https://github.com/hiukim/mind-ar-js/issues/449#issuecomment-1701827752, or unsubscribe https://github.com/notifications/unsubscribe-auth/AUW4H5UAV76LEPP3CLZAI7LXYEA7ZANCNFSM6AAAAAA4EZ2VPI . You are receiving this because you authored the thread.Message ID: @.***>

BostonLeeK commented 10 months ago

oh I find the problem. The url I provide you for shader is deprecated for now and not work with new version of aframe. You can check this codepen where I'm downgrade aframe version https://codepen.io/bostonleek/pen/abPZVvY but there is some glitch to. I can suggest only write new gif shader for Aframe. I will try and and send url if it will work. I use default MindAR marker cos don't know what image you using for bundle.

BostonLeeK commented 10 months ago

also you can always use video (convert your gif to video file) and make it transparent with simple greenscreen shader.

Fatima-Aslam commented 10 months ago

Thank you for helping me. I tried the code and yes there is some glitch in it. I appreciate your effort, it's really nice of you. I will be thankful to you if you can provide me with the accurate URL.

Fatima-Aslam commented 10 months ago

I think video don't play on IOS, that's why I don't want to use it. Is there any other script that can play video on both Android as well as IOS browsers?

BostonLeeK commented 10 months ago

video play on ios if you set by default param muted like this: <video muted autoplay loop playsinline crossorigin="anonymous" />

Fatima-Aslam commented 10 months ago

Sorry dear for bothering you, But the video didn't play. I think I'm missing something.....

`<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image-aframe.prod.js"></script>

  </head>
  <body>
    <a-scene mindar-image="imageTargetSrc:https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.2/examples/image-tracking/assets/card-example/card.mind"
color-space="sRGB" renderer="colorManagement: true,
physicallyCorrectLights" vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false">

       <a-assets>
          <video id="Bunny" src="https://cdn.glitch.global/f4977530-2465-4b1b-a249-2d4c1bb9844b/y2mate.com%20-%20Big%20Bunny%201%20min%2053mb_360p.mp4?v=1693559149886"></video>
          </a-assets>

      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

      <a-entity mindar-image-target="targetIndex: 0">

      <a-video src="#Bunny" muted autoplay loop playsinline crossorigin="anonymous"  width="1" height="0.552" position="0 0 0"></a-video>
      </a-entity>

      </a-scene>
  </body>
</html>`

BostonLeeK commented 10 months ago

look on my updated codepen https://codepen.io/bostonleek/pen/abPZVvY yes u need add event when marker is found to play a file something like that

 window.addEventListener('targetFound', function () {
    // Get video element by id
    var videoElement = document.getElementById("Bunny");

    // Play the video
    videoElement.play();
  });

and it will be work on android and iphone without need to tap from user

Fatima-Aslam commented 10 months ago

Thank you so much dear, this code is working.

Fatima-Aslam commented 10 months ago

How can I play a greenscreen video using a green shader? I add this script <script src="https://unpkg.com/aframe-chromakey-material/dist/aframe-chromakey-material.min.js"></script> and use it like this:

<a-assets>
<video id="greenscreenvideo" opacity="0" loop="true" autoplay  playsinline webkit-playsinline crossorigin="anonymous" muted="true"
        src="https://cdn.glitch.global/f4977530-2465-4b1b-a249-2d4c1bb9844b/y2mate.com%20-%20Dancing%20Monkey%20Green%20Screen%20Status%20%20Green%20Screen%20Effects%20%20Chroma%20Key%20HD_480p.mp4?v=1693578478350"></video>  </a-assets>

<a-entity mindar-image-target="targetIndex: 0">
      <a-video
        material="shader: chromakey; src: #greenscreenvideo; color: 0.1 0.9 0.2"
        position="0 0 0"
        rotation="0 0 0"
        scale="1 1 1"
      ></a-video>
    </a-entity>

But the black plane shows over the marker.

BostonLeeK commented 10 months ago

I update pen, check https://codepen.io/bostonleek/pen/abPZVvY

Fatima-Aslam commented 10 months ago

Thank you dear, it work for me. One last question, Is there any way to play audio on IOS. I used this:


<script>
    AFRAME.registerComponent('soundhandler', {
    tick: function () {
           var entity = document.querySelector('[sound]');
         if (document.querySelector('a-video').object3D.visible == true) {
            entity.components.sound.playSound();
        } else {
            entity.components.sound.pauseSound();
        }
      }
    });
  </script>

<a-assets>
      <video id="Bunny" loop="true" autoplay  playsinline webkit-playsinline crossorigin="anonymous" muted="true"
        src="https://cdn.glitch.global/9ad62917-d66a-4d3c-aed7-76c49e80d745/y2mate.com%20-%20Birthday%20cake%20green%20screen_v240P.mp4?v=1693622271893"></video>
      <audio id="song" loop="true" autoplay crossorigin="anonymous" preload="auto" src="https://cdn.glitch.global/9ad62917-d66a-4d3c-aed7-76c49e80d745/Happy_birthday_english(chosic.com).mp3?v=1693622538319"></audio>
    </a-assets>

    <a-entity mindar-image-target="targetIndex: 0">
      <a-video shader="chromakey" color="0.1 0.9 0.2" src="#Bunny" width="1" height="0.552" position="0 0 0" soundhandler></a-video>
    </a-entity>
    <a-entity sound="src: #song" autoplay="false"></a-entity>

it works on Android, but not on IOS.....

BostonLeeK commented 10 months ago

Like I know, iOS don't give access to play audio without touch event from user

hiukim / mind-ar-js

Play gif in WebAR #449