見出し画像

(失敗)ストリーミング映像を3Dオブジェクトのテクスチャにできない!

概要

ストリーミング映像をARで表示する3Dオブジェクトのテクスチャにしたい!   が、できない。
動画(mp4)はテクスチャにできるけど、ストリーミング映像に置き換えると上手く動かない。

という話。

ーーー 追記2020年7月 ーーー
動く方法みつけて github にソースを公開しています。

ーーーーーーーーーーーーーーーー

作った環境

(1)カメラ付きのラズパイを用意する
(2)ラズパイは、Wifi接続
(3)ラズパイの IPアドレス 192.168.3.102
(4)ストリーミングは、MJPG-streamerを使用
(5)SSL通信のリバースプロキシサーバは、`Nginx + オレオレ証明書`で構築
(6)リバースプロキシでストリーミング配信をSSL通信
    (https://192.168.3.102/webcam1/?action=stream で開く)
(7)ARマーカで3Dオブジェクトを表示する html を作成(A-Frame,threejs で2種類作成)
    (https://192.168.3.102/xxx.html で開く)
(8)3Dオブジェクトのテクスチャにストリーミング映像を指定
  ↑これが上手くいかない

環境の作り方は ↓ で書いておきました。

A-Frameを使った html

aframe.html ファイルは、/var/www/ 配下に格納します
これで https://192.168.3.102/aframe.html で開けばARが使えます。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>test</title>
 </head>
 <body style="margin:0px; overflow:hidden;">
   <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
   <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
   <a-scene embedded arjs="debugUIEnabled:false;">
     <a-assets>
       <!-- <video id="my-video" src="arsample.mp4" autoplay="true"> ← OK:動画なら表示される -->
       <video id="my-video" src="https://192.168.3.102/webcam1/?action=stream" autoplay="true"> <!-- NG:テクスチャが黒色になる -->
     </a-assets>
     <a-marker preset="hiro">
       <!-- <a-box position="0 0.5 0" wireframe="true"></a-box> -->
       <a-entity geometry="primitive: box" material="src: #my-video"></a-entity>
     </a-marker>
     <a-entity camera></a-entity>
   </a-scene>
 </body>
</html>

動作

ラズパイと同じネットワークにあるWindows でブラウザを起動し、https://192.168.3.102/aframe/af.html を開くと、Windows接続のカメラからの映像が表示されます。そこにARマーカを映すと…

画像1


ARマーカの起点に立方体の3Dオブジェクトが表示されます。そして、その立方体のテクスチャがラズパイで作ったストリーミング映像になる!…
はずだったのですが、実際には真っ黒な立方体が出来上がった(悲) ↓

画像2

ブラウザ(chrome)のデバッグモードにすると警告メッセージが表示されました。この警告には、互換性がないとか書いているっぽい。う~ん困った

three.js:19341 WebGL: INVALID_VALUE: texImage2D: no video
[.WebGL-000002682BA658C0]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.

おわりに

おわってない。まだ終わってない。でもどうすれば解決するのかわからない。6か月以上かけてここまではできたけど、この問題がどうしても解決できない。なんとかならんか…  調査は続く

2018/11/19 追記

動く方法を見つけましたぁ!こちらに紹介しています。


こんな弱小ブログでもサポートしてくれる人がいることに感謝です。