17

リモート ビデオを WebGL のテクスチャに割り当てたいと考えています。ビデオ ソースはドキュメント ソースとは異なるため、ビデオ ソースAccess-Control-Allow-Origin:*の http ヘッダーに追加しました。さらに、 を使用して、匿名のオリジンを video タグに割り当てましたvideo.crossOrigin = '';。興味深いことに、クロスドメイン属性は画像では機能しますが、ビデオ タグでは機能しません。WebGL テクスチャがビデオ オブジェクトに割り当てられるとすぐに、javascript は次の例外をスローします。

キャッチされないエラー: SECURITY_ERR: DOM 例外 18

この問題を再現するための jsfiddle を次に示します。この例は、three.js の webgl_kinect の例に基づいています: http://jsfiddle.net/ZgeTU/2/

関連するセクションは次のとおりです。

// CROSS-ORIGIN VIDEO SOURCE 
// REMOTE VIDEO SOURCE PROVIDES "Access-Control-Allow-Origin:*" HEADER
video.src =
  'http://kammerl.de/threejs/three.js/examples/textures/kinect.webm';
// DEFINING ANONYMOUS ORIGIN
video.crossOrigin = '';
video.play();

その後、video タグが Three.js テクスチャに割り当てられます。

texture = new THREE.Texture( video );

どうやら、webGL で crossOrigin ビデオを使用するこの問題はしばらくの間知られていますが、これに関する更新は見つかりませんでした: http://jbuckley.ca/2012/02/cross-origin-video/

この問題のステータスを知っている人はいますか? webGL でリモート ビデオにアクセスするための回避策はありますか? どんな助けでも大歓迎です！

ありがとう！

4

3 に答える 3

2

jqueryを使用していて、クライアント側での処理が推奨されているため、プラグインまたはcorsプラグインの基礎を確認することをお勧めします（2,3）。

正しく実行し、各ブラウザーに適切なヘッダーを追加していると仮定して（4,5）、wiresharkなどのパケットアナライザーを取り出し、パケットを調べて、より多くの洞察を得ることができます。

ただし、そうは言っても、CORSforWebGLが進行中の可能性は十分にあります。仕様どおりに実装するために、ブラウザはサポートを改訂しています（1）。

幸運を。

（1）出典：https ：//www.khronos.org/webgl/public-mailing-list/archives/1106/msg00042.html

（2）ソース：archive.plugins.jquery.com/project/cors

（3）出典：saltybeagle.com/2009/09/cross-origin-resource-sharing-demo/

（4）出典：www.html5rocks.com/en/tutorials/cors/

（5）ソース：github.com/saltybeagle/cors

また、注意してください：www.jaanga.com/2012/04/access-cross-origin-images-from.html

于 2013-01-14T17:31:02.743 に答える
0

コメントありがとうございます。

Mozilla の Benoit Jacob が、この問題に関するバグ レポートを提出しました: https://bugzilla.mozilla.org/show_bug.cgi?id=837153

.. よりコンパクトなテスト ケースを作成しました: http://people.mozilla.org/~bjacob/video-cors.html

于 2013-02-01T20:13:59.270 に答える