(失敗)ストリーミング映像を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マーカを映すと…
ARマーカの起点に立方体の3Dオブジェクトが表示されます。そして、その立方体のテクスチャがラズパイで作ったストリーミング映像になる!…
はずだったのですが、実際には真っ黒な立方体が出来上がった(悲) ↓
ブラウザ(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 追記
動く方法を見つけましたぁ!こちらに紹介しています。
こんな弱小ブログでもサポートしてくれる人がいることに感謝です。