Live2D公式のCubism WebAR お試しガイドで紹介されている「Cubism WebAR Sample」をサンプルモデルの「Rice」を使って、そのままテストしていますが、スマホのWebカメラが起動せず、ARが実行できません。手順は、WebAR お試しガイドで紹介されているものを試しています。
@akagi 様
いつも弊社製品をご愛顧のほど誠にありがとうございます。
Live2D スタッフでございます。
WebARプロジェクトの docs/TroubleShooting.md に、Webカメラが動作しないときの確認事項を記載しております。
こちらに記載されている事項をご確認いただけますでしょうか？
よろしくお願いいたします。
返信、ありがとうございます。
start.batを実行し、簡易サーバでの実行は、問題ありませんでしたが、Netfily環境での実行では、Webカメラの起動確認せず、ブラウザの画面が黒いままです。
ご指摘のあったdocs/TroubleShooting.md を確認しましたが特に原因となりそうな点は見当たりませんでした。
以下にこちらで確認した詳細をリストにしました。
ビルド時にエラーが発生します
- 依存ライブラリのダウンロードを行なっているか確認してください→OK
-
/node_modulesフォルダがプロジェクト内にあることを確認してください→OK
/CubismWebSamples/や/CubismWebSamples/Core/が空になっていないか確認してください→OK
AR マーカーが認識できない・モデルが表示されない←ここまで実行できていない。
アプリケーションのエラーによる場合←確認できない
アプリケーションにアクセスできない
- 推奨されている OS とブラウザのバージョンを使用しているか確認してください→OK
- 推奨環境は README.md を参照してください→OK
- https 接続でアプリケーションにアクセスできているか確認してください→OK（Netfily環境）
- セキュリティソフトがインストールされている場合は、セキュリティソフトのファイアウォール設定を一時的にOFFにしてください→OK
- 携帯端末等で動作確認する際は簡易サーバを立てているマシンと同じネットワークに接続している必要があります→OK（Netfily環境）
- 簡易サーバの再起動、ブラウザアプリケーションの再起動を行ってください→OK（Netfily環境）
Web カメラが利用できない
- ブラウザの設定でアプリーションにカメラ利用の許可がされているか確認してください→OK
- OS の設定でブラウザにカメラ利用の権限を付与しているか確認してください→OK
- https 接続でアプリケーションにアクセスできているか確認してください→OK
御返事ありがとうございます。
特に、SSL証明書の追加などしていません。
リンク先の「Cubism WebAR お試しガイド」の手順に従って、「Cubism WebAR Sample」
をNetlifyの環境で実行しています。
使用データは、「CubismWebARSample-1.1」サンプルキャラは「Rice」を使用しております。
すみません。SSL証明書の確認や追加方法を教えて頂けると幸いです。
@akagi 様
回答ありがとうございます。
返答が遅れてしまい申し訳ありませんが、現在確認中となっております。
回答までもう少々お待ちくださいませ。
お手数をおかけしてしまい誠に申し訳ありませんが、よろしくお願いいたします。
@akagi 様
回答が遅れてしまい申し訳ありません。
お使いいただいているプロジェクトに、SSH証明書を追加して正常に動作するかをご確認していただけませんでしょうか？
具体的には、scripts/[OS]/start を実行する前に、以下の設定を行います。
・OpenSSLをインストール
・WebARの実行開始用スクリプトにSSH証明書作成処理を追加
・OpenSSLをインストール
以下を参考にしてください。
・WebARの実行開始用スクリプトにSSH証明書作成処理を追加
Windowsの場合：/scripts/windows/start.bat の7行目に以下を追加
cmd /c "npm run openssl"
macの場合：/scripts/mac/start.bat の8行目に以下を追加
npm run openssl
linuxの場合：/scripts/linux/start.bat の8行目に以下を追加
npm run openssl
お手数をおかけしてしまい申し訳ありませんが、こちらご確認よろしくお願いいたします。
返信、ありがとうございます。
OpenSSL追加についてですが、以前start.batを実行し、簡易サーバでの実行は、問題無く動作しました。
問題があるのは、Netfily環境での実行で、スマホのカメラの起動確認できず、ブラウザの画面が黒いままです。この現象もOpenSSLをPCにインストールして、/scripts/windows/start.bat の7行目にcmd /c "npm run openssl"追加する必要はありますか？
Netfily環境で使用するのは、 install.batとbuild.batを実行後、
以下の4つのデータを別のフォルダにまとめてアップすればOKとあります。
・「assets」フォルダ
・「dist」フォルダ
・「lib」フォルダ
・「index.html」
start.batの使用は簡易サーバでの環境で実行した場合に必要な手順だと思います。
Netfilyにアップしているデータに問題があるのではないでしょうか？
すみません。いろいろ多忙な所、ご迷惑をお掛けして恐縮ですが宜しくお願いします。
@akagi 様
ご確認していただき、誠にありがとうございます。
こちら調査させていただきますので、回答まで少々お時間をいただきます。
お手数をおかけしてしまい誠に申し訳ありませんが、よろしくお願いいたします。
@akagi 様
回答が遅れてしまい申し訳ありません。
こちら調査したところ、Netlifyの仕様変更により、デフォルトで開くindex.htmlをdistフォルダから探すようになっていたことが原因です。
現在のCubism WebAR Sampleは、index.htmlのあるフォルダ階層はdistフォルダ内ではないため、当該ページを開いてもWebカメラを取得する処理などが行われません。
これを回避するためには、distフォルダの名前を変更し、index.html内のdistフォルダを参照している箇所を変更したフォルダ名に書き換えてください。
書き換えが必要な箇所は、index.htmlの26行目にあるdistになります。
<script src="./dist/main.bundle.js">
<script src="./(変更したフォルダ名)/main.bundle.js">
こちらの不具合につきましては、今後の修正で対応させていただきます。
ご迷惑をおかけしてしまい誠に申し訳ありませんが、よろしくお願いいたします。
回答、ありがとうございます。
ご指示通り、フォルダ名を変更して実行しました。Webカメラを起動するようになりましたが、Live2Dで作成したキャラ画像が表示されません。
もともとは、distフォルダ以下のmain.bundle.jsを読み込むようになっていたと思うのですが、フォルダ名を変更したため、main.bundle.jsが読み込まれないのではないでしょうか？
御忙しい所恐縮ですが、ご返答頂けると幸いです。
すいません。解決しました。Webカメラの角度の問題でした。お騒がせしてすみません。
「いいね！」 1