sabomate / AR-video_viewer

0 stars 0 forks source link

画像マーカの準備ができない場合は複数回に一回ある #22

Closed tagahei closed 8 months ago

tagahei commented 8 months ago

更新しているとできない場合がある

対応

解決!!!

原因:複数タブ同時実行だった...

ローカルと本番実行をタブ開いて同時にしてた 本番環境を二つなども無理っぽい

気づくかぁ!そんなもん!!!

ブラウザモジュールについて調べえてみたけどようわからんかった

tagahei commented 8 months ago

動作の違いにおけるConsoleの差

多分ほぼ一緒 動いた時 動かなかった時
image image

動作の違いにおけるNetworkの差

明らかにYoslab.*が読み取れてないっぽいな ちゃんとそいういう感じでよかった

動いた時 動かなかった時
image image
tagahei commented 8 months ago

おんなじ感じのやつのやつ 多分Hostと同じURLじゃないとダメ的な感じっぽい...

画像記述子ファイルにアクセスする際には、そのウェブサービスのドメイン名を含むURLを使用する必要がある 成功したときに下記の出力が出る

base path: https://ar-videoviewer.web.app

This problem has bothered me for a long time, and now it has finally been solved. View the source code of image descriptors file loaded by ar.js (aframe-ar-nft.js file)

// after the ARController is set up, we load the NFT Marker
        var regexM = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#()?&//=]*)/igm
        var reM = regexM.test(msg.marker);
        if (reM == true) {
            console.log('msg.marker=', msg.marker);
            nftMarkerUrl = msg.marker;
        } else if (reM == false) {
            console.log('basePath=', basePath);
            nftMarkerUrl = basePath + '/' + msg.marker;
        }
        console.log('nftMarkerUrl=', nftMarkerUrl);

        ar.loadNFTMarker(nftMarkerUrl, function (markerId) {
            ar.trackNFTMarkerId(markerId);
            postMessage({ type: 'endLoading' })
        }, function (err) {
            console.log('Error in loading marker on Worker', err)
        });

As can be seen from the source code, if we specify that the URL of NFT is provided in the form of domain name, such as the URL of the official demo https://arjs-cors-proxy.herok/... , then directly use the URL we passed in; Otherwise, use basepath + the URL we passed in. Ar.js (actually A-frame) is different in handling NFT URL and model URL. There are two correct configuration methods:

  1. HTML deployed web services must support domain name access, and the URL of NTF must be configured as the complete domain name access path where the image descriptors file is located;
  2. HTML deploys local web services, which are accessed by 127.0.0.1 or service IP address. The URL paths of NTF and model must be configured as relative paths. The path of NFT must contain the web service name, while the URL path of mode does not contain the web service name. Here is an correct example of No.2, using Tomcat at https://localhost:8443/AR.js/index.html
  <a-nft
            type='nft' url='AR.js/aframe/examples/image-tracking/nft/trex/trex-image/trex'
            smooth='true' smoothCount='10' smoothTolerance='0.01' smoothThreshold='5'>
            <a-entity
                gltf-model='aframe/examples/image-tracking/nft/trex/scene.gltf'
                scale="5 5 5"
                position="150 300 -100"
                >
            </a-entity>
        </a-nft>
tagahei commented 8 months ago

え...src直下でも動いたんだが...

    <a-nft
        type="nft"
        id="nft"
        url="./descriptors/Yoslab"
        smooth="true"
        smoothCount="10"
        smoothTolerance=".01"
        smoothThreshold="5"
      >

でも発生しているconsoleやNetoworkは一緒や

tagahei commented 8 months ago

urlをbasePathで設定してみた

下記どっちもやってみた

url="https://ar-videoviewer.web.app/src/descriptors/Yoslab"       
url="ar-videoviewer.web.app/src/descriptors/Yoslab"

そもそも読み取りができるorできないがある また,読み取りまで行けた場合は下記エラーが出た.よく見たやつやなぁ

Uncaught TypeError: Cannot perform %TypedArray%.prototype.set on a detached ArrayBuffer

パスの違いに関わらず,エラーが出るときと出ないときが分かれるってことは,URLの違いは関係ない気がする ...てかそもそも「a-nftタグがURLから取得する」が行われないときがあるってことか?

tagahei commented 8 months ago

URLを"aaa"にした

やっぱおかしいよなぁぁぁ!!!🧔‍♂️

動いた時(エラーが出たとき) 動かなかった時(エラーが出なかった時
image image
tagahei commented 8 months ago

原因特定したいよぉ

もともとURLで取得できていないって思ってたけど,a-nftタグのURLを取得するって処理が行われている場合と行われていないときがある

その違いを確認,判断したい

...とりあえずconsole見ても違いはなかった....

tagahei commented 8 months ago

あとでよもーっと

tagahei commented 8 months ago

次試すこと

公式ドキュメント 特徴量ファイルはGithubかGligeに置こうって書いてある,それを試すかぁ

Point to the path containing the Image Descriptors you generated and downloaded before. Those files will have a common name. Remove the file extension (e.g. with “dinosaur.fset”, “dinosaur.iset” and so on, the path you have to add should end with “dinosaur”).

Serve the example from a local or remote server: Github Pages and Glitch are free and convenient options. Navigate to the URL on your device and you should see a T-Rex model after the loading screen disappears.

Visit this Codepen if you want to see right away how it looks without hosting your own.

You can replace the model above with any other assets: 2D videos, images, audio files. Any A-Frame a-entity is a valid child of the a-nft anchor.

tagahei commented 8 months ago

解決!!!

原因:複数タブ同時実行だった...

ローカルと本番実行をタブ開いて同時にしてた 本番環境を二つなども無理っぽい

気づくかぁ!そんなもん!!!