ストリーミング映像を、ARマーカで表示する3Dオブジェクトのテクスチャにすると警告が発生し配信映像が表示されない

ストリーミング映像を、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>