ストリーミング映像を、ARマーカで表示する3Dオブジェクトのテクスチャにする方法を教えてください。
- 以下を試したのですが上手く表示されませんでした。
- <試したこと>
- カメラ付きのラズパイ(IPアドレス
192.168.33.102
)に以下を実装しました。 - ストリーミングには、MJPG-streamerを使用
- SSL通信のリバースプロキシサーバは、Nginx + オレオレ証明書 で構築
- リバースプロキシでストリーミング配信をSSL通信
- (
https://192.168.33.102/webcam1/?action=stream
を開くと配信映像が見えることを確認) - ARマーカで3Dオブジェクトを表示するaf.htmlを作成(A-Frameを使用)
- (
https://192.168.33.102/af.html
で開く) - 3Dオブジェクトのテクスチャにストリーミング映像を指定 ←これが上手くいかない
発生している問題・エラーメッセージ
- ラズパイと同じネットワークにいるWindows10 で
https://192.168.33.102/af.html
を開く - → Windows付属のカメラからの映像がブラウザに表示
- → Hiro のARマーカを映像に移すと立方体(3Dオブジェクト)が表示
- → ただし、立方体のテクスチャはストリーミング映像ではなく真っ黒になる
- → ブラウザ(Chrome)をデバッグモードにすると、以下の警告メッセージが表示されてた。
WebGL: INVALID_VALUE: texImage2D: no video @ three.js:19341 240[.WebGL-0000024303993270]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
該当のソースコード
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <title>test</title> 7 </head> 8 <body style="margin:0px; overflow:hidden;"> 9 <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script> 10 <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script> 11 <a-scene embedded arjs="debugUIEnabled:false;"> 12 <a-assets> 13 <!-- <video id="my-video" src="arsample.mp4" autoplay="true"> mp4動画を指定すると問題ない--> 14 <video id="my-video" src="https://192.168.33.102/webcam1/?action=stream" autoplay="true"> <!-- ストリーミング映像を指定すると上手く動かない--> 15 </a-assets> 16 17 <a-marker preset="hiro"> 18 <a-entity geometry="primitive: box" material="src: #my-video"></a-entity> 19 </a-marker> 20 <a-entity camera></a-entity> 21 </a-scene> 22 </body> 23</html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。