【WebAR】Image trackingを使って指定の画像にブラウザカメラをかざしても映像が再生されない。

実現したいこと

黒縁のマーカーのMaker trackingではないImage trackingとAR,jsを利用して、
WebARを実現したいのですが、fse,fes3,isetファイルを用意して、コードを記述して
画像にブラウザカメラをかざしてもなにも表示されません。

映像が再生されるはずなのですが…

発生している問題・エラーメッセージ

エラーなどはないのですが、画像のように指定した画像にカメラをかざしても映像は再生されません。

※ここに記述しているソースコードはスクショ画像とは少し見た目が違います。

また、スマホ（iPhoneSE2）を横向きにしてかざすとQRコードの所に小さく何か四角い物がガタガタと
揺れながら表示されていて、多分これが表示させたい映像なのでしょうけど、これでは成功とは言えません…画面に大きく再生させたいのに…

該当のソースコード

<!doctype html>
<html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
        <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
        <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
        
        <script>
      alert('【使い方・注意事項】この後カメラが表示されますが、そのカメラを専用画像にかざしてください。\機関車の映像が流れます。\nボリュームマークをタップすると音声が出ます。\n詳しくはカメラ表示後のインフォメーションをタップしてください。');
    </script>
       
    </head>

    <body style="margin: 0; overflow: hidden;">
        <a-scene
            vr-mode-ui="enabled: false"
            device-orientation-permission-ui="enabled: false"
            embedded arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;"
        >

            <a-assets>
                <video
                    id="vid"
                    src="assets/asset.mp4"
                    preload="auto"
                    response-type="arraybuffer"
                    loop
                    crossorigin
                    webkit-playsinline
                    muted
                    playsinline
                ></video>
                <audio src="videopath" autoplay></audio>
            </a-assets>

<a-nft
      type="nft"
      url="https://akibashinji.fun/train/assets/train"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
                <a-video
                link="https://jr-central.co.jp/"
         animation-mixer="loop:repeat"
                    src="#vid"
                    width="2.6" height="1.4" position="0 0 0" rotation="270 0 0" play="true"
                    class="clickable"
                    gesture-handler
                ></a-video>
            </a-nft>
            <a-entity camera></a-entity>
        </a-scene>
    </body>
</html>

試したこと

NFT Creatorで下記の画像のような設定でファイルを作ったり
nmpをアップデートしてみました。

行動規範の内容に同意します

回答1件

自己解決

<a-scene mindar-image="imageTargetSrc:assets/marker.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
  <a-assets>
    <video
                    id="normal-vid"
                    id="vid"
                    src="assets/asset.mp4"
                    preload="auto"
                    crossorigin="anonymous"
                    webkit-playsinline
                    videohandler
                    muted
                    autoplay
                    playsinline
                    style="display:none"
                > </video>
  </a-assets>
  
 <a-entity
            mindar-image-target="targetIndex: 0"
            material="shader: chromakey; src: #vid; color: 0.1 0.9 0.2"
            geometry="primitive: plane; width: 2.0; height: 1.4"
            position="0 0 0"
            rotation="270 0 0"
            markerhandler
             smooth="true"
                smoothCount="10"
                smoothTolerance="0.01"
                smoothThreshold="5"
                raycaster="objects: .clickable"
                emitevents="true"
                cursor="fuse: false; rayOrigin: mouse;"
            autoplay="false">
        </a-entity>
        
         <a-video
                id="independent-video"
                link="href: https://www.youtube.com/results?search_query=%E9%A2%A8%E9%96%93%E6%98%A5%E8%8F%9C;"
                    src="#vid"
                    width="2.6" height="1.4" position="0 0 0" rotation="270 0 0" play="true"
                    class="clickable"
                    autoplay="false"
                    gesture-handler
                    ></a-video>
        
        <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
</a-scene>

こちらのコードで解決しました。

投稿2023/09/04 06:02

ryuu072yeah

総合スコア2