Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

problem playing a video #16

Closed
jhonrymat opened this issue Mar 22, 2021 · 10 comments
Closed

problem playing a video #16

jhonrymat opened this issue Mar 22, 2021 · 10 comments

Comments

@jhonrymat
Copy link

Hello, I am new to programming and augmented reality, I am studying your code a bit, but I find the problem that the video starts when loading the page and not when recognizing the augmented reality image, some example or advice where I modify this thank you very much.
`

<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@0.3.2/dist/mindar.prod.js"></script>
<script>
  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 text = document.querySelector("#text");

    profileButton.setAttribute("visible", true);
    setTimeout(() => {
      webButton.setAttribute("visible", true);
    }, 300);
    setTimeout(() => {
      emailButton.setAttribute("visible", true);
    }, 600);
    setTimeout(() => {
      locationButton.setAttribute("visible", true);
    }, 900);

    let currentTab = "";
    webButton.addEventListener("click", function(evt) {
      text.setAttribute("value", "https://softmind.tech");
      currentTab = "web";
    });
    emailButton.addEventListener("click", function(evt) {
      text.setAttribute("value", "hello@softmind.tech");
      currentTab = "email";
    });
    profileButton.addEventListener("click", function(evt) {
      text.setAttribute("value", "AR, VR solutions and consultation");
      currentTab = "profile";
    });
    locationButton.addEventListener("click", function(evt) {
      console.log("loc");
      text.setAttribute("value", "Vancouver, Canada | Hong Kong");
      currentTab = "location";
    });

    text.addEventListener("click", function(evt) {
      if (currentTab === "web") {
        window.location.href = "https://softmind.tech";
      }
    });
  };

  const showPortfolio = done => {
    const portfolio = document.querySelector("#portfolio-panel");
    const portfolioLeftButton = document.querySelector(
      "#portfolio-left-button"
    );
    const portfolioRightButton = document.querySelector(
      "#portfolio-right-button"
    );
    const paintandquestPreviewButton = document.querySelector(
      "#paintandquest-preview-button"
    );

    let y = 0;
    let currentItem = 0;

    portfolio.setAttribute("visible", true);

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

        paintandquestPreviewButton.addEventListener("click", () => {
          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 {
            document
              .querySelector("#paintandquest-video-link")
              .setAttribute("src", "#paintandquest-video-webm");
            document.querySelector("#paintandquest-video-webm").play();
          }
        });

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

  const showAvatar = onDone => {
    const avatar = document.querySelector("#avatar");
    let z = -0.3;
    const id = setInterval(() => {
      z += 0.008;
      if (z >= 0.3) {
        clearInterval(id);
        onDone();
      }
      avatar.setAttribute("position", "0 -0.25 " + z);
    }, 10);
  };

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

<style>
  body {
    margin: 0;
  }
  .example-container {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
  }

  #example-scanning-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: transparent;
    z-index: 2;
  }
  @media (min-aspect-ratio: 1/1) {
    #example-scanning-overlay .inner {
      width: 50vh;
      height: 50vh;
    }
  }
  @media (max-aspect-ratio: 1/1) {
    #example-scanning-overlay .inner {
      width: 80vw;
      height: 80vw;
    }
  }

  #example-scanning-overlay .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    background: linear-gradient(to right, white 10px, transparent 10px) 0 0,
      linear-gradient(to right, white 10px, transparent 10px) 0 100%,
        linear-gradient(to left, white 10px, transparent 10px) 100% 0,
          linear-gradient(to left, white 10px, transparent 10px) 100% 100%,
            linear-gradient(to bottom, white 10px, transparent 10px) 0 0,
              linear-gradient(to bottom, white 10px, transparent 10px) 100%
                  0,
                linear-gradient(to top, white 10px, transparent 10px) 0 100%,
                  linear-gradient(to top, white 10px, transparent 10px) 100%
                    100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
  }

  #example-scanning-overlay.hidden {
    display: none;
  }

  #example-scanning-overlay img {
    opacity: 0.6;
    width: 90%;
    align-self: center;
  }

  #example-scanning-overlay .inner .scanline {
    position: absolute;
    width: 100%;
    height: 10px;
    background: white;
    animation: move 2s linear infinite;
  }
  @keyframes move {
    0%,
    100% {
      top: 0%;
    }
    50% {
      top: calc(100% - 10px);
    }
  }
</style>
  <a-scene
    mindar="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@0.3.1/examples/assets/card-example/card.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="./assets/card-example/card.png" />
      <img id="icon-web" src="./assets/card-example/icons/web.png" />
      <img
        id="icon-location"
        src="./assets/card-example/icons/location.png"
      />
      <img
        id="icon-profile"
        src="./assets/card-example/icons/profile.png"
      />
      <img id="icon-phone" src="./assets/card-example/icons/phone.png" />
      <img id="icon-email" src="./assets/card-example/icons/email.png" />
      <img
        id="icon-play"
        src="https://cdn.glitch.com/b38eb9a2-8d3c-4e64-998d-6d0738b4c845%2Fplay.png?v=1616294545285"
      />
      <img id="icon-left" src="./assets/card-example/icons/left.png" />
      <img id="icon-right" src="./assets/card-example/icons/right.png" />
      <img
        id="paintandquest-preview"
        src="./assets/card-example/portfolio/paintandquest-preview.png"
      />
      <video
        id="paintandquest-video-mp4"
        autoplay="false"
        loop="true"
        src="https://cdn.glitch.com/d854003b-b32d-455a-98db-95fe418cab4c%2Fpaintandquest.mp4?v=1616389137177"
      ></video>
      <video
        id="paintandquest-video-webm"
        autoplay="false"
        loop="true"
        src="https://cdn.glitch.com/d854003b-b32d-455a-98db-95fe418cab4c%2Fpaintandquest.webm?v=1616389074156"
      ></video>
      <img
        id="coffeemachine-preview"
        src="./assets/card-example/portfolio/coffeemachine-preview.png"
      />
      <img
        id="peak-preview"
        src="./assets/card-example/portfolio/peak-preview.png"
      />

      <a-asset-item
        id="avatarModel"
        src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@0.3.1/examples/assets/card-example/softmind/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>

    <a-entity id="mytarget" mytarget mindar-image-target="targetIndex: 0">
      <a-plane
        src="#card"
        position="0 0 0"
        height="0.552"
        width="1"
        rotation="0 0 0"
      ></a-plane>

      <a-entity visible="false" id="portfolio-panel" position="0 0 -0.01">
        <a-text
          value="Portfolio"
          color="black"
          align="center"
          width="2"
          position="0 0.4 0"
        ></a-text>
        <a-entity id="portfolio-item0">
          <a-video
            id="paintandquest-video-link"
            webkit-playsinline
            playsinline
            width="1"
            height="0.552"
            position="0 0 0"
          ></a-video>
          <a-image
            id="paintandquest-preview-button"
            class="clickable"
            src="#paintandquest-preview"
            alpha-test="0.5"
            position="0 0 0"
            height="0.552"
            width="1"
          >
          </a-image>
        </a-entity>
        <a-entity id="portfolio-item1" visible="false">
          <a-image
            class="clickable"
            src="#coffeemachine-preview"
            alpha-test="0.5"
            position="0 0 0"
            height="0.552"
            width="1"
          >
          </a-image>
        </a-entity>
        <a-entity id="portfolio-item2" visible="false">
          <a-image
            class="clickable"
            src="#peak-preview"
            alpha-test="0.5"
            position="0 0 0"
            height="0.552"
            width="1"
          >
          </a-image>
        </a-entity>

        <a-image
          visible="false"
          id="portfolio-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="portfolio-right-button"
          class="clickable"
          src="#icon-right"
          position="0.7 0 0"
          height="0.15"
          width="0.15"
        ></a-image>
      </a-entity>

      <a-image
        visible="false"
        id="profile-button"
        class="clickable"
        src="#icon-profile"
        position="-0.42 -0.5 0"
        height="0.15"
        width="0.15"
        animation="property: scale; to: 1.2 1.2 1.2; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate"
      ></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"
        animation="property: scale; to: 1.2 1.2 1.2; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate"
      ></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"
        animation="property: scale; to: 1.2 1.2 1.2; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate"
      ></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"
        animation="property: scale; to: 1.2 1.2 1.2; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate"
      ></a-image>

      <a-gltf-model
        id="avatar"
        rotation="0 0 0"
        position="0 -0.25 0"
        scale="0.004 0.004 0.004"
        src="#avatarModel"
      ></a-gltf-model>

      <a-text
        id="text"
        class="clickable"
        value=""
        color="black"
        align="center"
        width="2"
        position="0 -1 0"
        geometry="primitive:plane; height: 0.1; width: 2;"
        material="opacity: 0.5"
      ></a-text>
    </a-entity>
  </a-scene>
</div>
`
@hiukim
Copy link
Owner

hiukim commented Mar 22, 2021

@jhonrymat I'm not sure I understand what you mean. Can you provide screencaps?

@jhonrymat
Copy link
Author

just take the example of advanced.html and change the link of the video, for a video that has embedded audio, but when the page is opened the audio is played instantly without having clicked on the video

@hiukim
Copy link
Owner

hiukim commented Mar 22, 2021

@jhonrymat

Can you perhaps create a minimal and runnable example? That would help a lot.

Better off, are you able to confirm the problem is caused by MindAR. One good way to do that is remove MindAR and create a regular AFRAME scene with video, and make the "click and play" works.

After that, put in the MindAR library, and see what's the difference. Then we will know what's causing the problem.

@hiukim
Copy link
Owner

hiukim commented Mar 28, 2021

I run your example, and I couldn't see any video. So there is also no audio as well.

@jhonrymat
Copy link
Author

Hello again, could you please explain how to play a video I still can't find how, and then proceed to close the thread, thank you very much

@hiukim
Copy link
Owner

hiukim commented Apr 1, 2021

Now, I'm a bit confused about the problem you are having. Are you

  1. no able to play video, or
  2. can play video, but the video started playing incorrectly

if 1)
The interactive example you mentioned already provided an example of how to start a video.

if 2)
Can you provide a minimal and runnable example that I can replicate your issue.

@jhonrymat
Copy link
Author

jhonrymat commented Apr 1, 2021

You just want to put a video on top of an image but I don't know how to break down your example, just to use the video, I appreciate your help. I tried this way and I did not succeed.

https://glitch.com/edit/#!/mighty-arrow-pyrite?path=index.html%3A1%3A0

@hiukim
Copy link
Owner

hiukim commented Apr 6, 2021

@jhonrymat Your video doesn't play because the click event wasn't fired/captured. If you need to capture click event on aframe element, you need to setup the raycaster in camera, e.g.

 <a-camera cursor="fuse: false; rayOrigin: mouse;" raycaster="near: 10; far: 10000; objects: .clickable"></a-camera>
        <a-cursor></a-cursor>
      </a-camera>
<a-video class="clickable" src="#surfer" height="4.5" width="8" position="0 3 -9"
        ><a-image
          id="videocontrols"
          src="#play"
          position="0 -3 0"
          scale="0.5 0.5 1"
          play-pause
        ></a-image>
      </a-video>

@jhonrymat
Copy link
Author

jhonrymat commented Apr 10, 2021

Excellent, thank you very much, it was what I needed, you are the best. I close thread.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants