Three.js: ビデオテクスチャをストリーミングするためのSafari / FirefoxDOM例外18

逆さまの問題は問題の一部ですか？

逆さまは問題の一部ではありません。 それは私が怠惰だった> _ <

ここで再現できます。 中間のキャンバスを試してみましたか？

：+1：、キャンバス2Dのように中間？

はい、テクスチャとしてキャンバス2dを使用し、それにビデオのdrawImageを実行します。

今からやります。 https://dl.dropboxusercontent.com/u/1595444/shaka-player/shaka-canvas.html

SafariではDOM Exception 18スローされていないように見えますが、画像は転送されません。 Firefoxと同じです。 それはブラウザの実装だということですか？

同じ問題に直面しています。 SafariはDomException 18をスローしますが、Firefoxは画像をロードしませんが、エラーも表示しません。 @ jonobr1 Firefoxでエラーが発生していますか？

Firefoxにエラーはありませんが、画像もありません。 WebKitでバグを報告します
それぞれとMozillaを使用して、追加情報が表示されるかどうかを確認します。

私はあなたたちのことを知りませんが、ストリーミングビデオのデモを見たことがありません
WebGLテクスチャにアップロードされました。 たぶんYouTubeをソースにしたものはありますか？
2016年2月11日木曜日午後11時11分タハサビ[email protected]
書きました：

同じ問題に直面しています。 SafariはDomException 18をスローし、Firefoxはスローしません
画像をロードしますが、エラーも表示されません。 @ jonobr1
https://github.com/jonobr1 Firefoxでエラーが発生していますか？

—
このメールに直接返信するか、GitHubで表示してください
https://github.com/mrdoob/three.js/issues/8110#issuecomment-183208337 。

ビデオのストリーミング自体は問題ではありません。 jsでビデオ要素を作成し、video.srcを使用してビデオ要素のソースを設定すると、ビデオは正常にストリーミングされます。 shakaを使用したアダプティブストリーミングが問題です。 問題はwebkitとgeckoでのCORS実装にあると感じているため、SafariのDOM Exception18です。 以下の例は、すべてのブラウザの同じドメインのビデオソースで完全に機能します。

            var video = document.createElement( 'video' );
            video.width = 640;
            video.height = 360;
            video.autoplay = true;
            video.loop = true;
            video.src = "<your mp4 source>";

           // adding the line below makes cross origin videos work, but just for chrome
           // video.crossOrigin = 'anonymous';

            var texture = new THREE.VideoTexture( video );
            texture.minFilter = THREE.LinearFilter;

            var material   = new THREE.MeshBasicMaterial( { map : texture } );

            mesh = new THREE.Mesh( geometry, material );

明確にするために、 video.src = "<your mp4 source>";がストリーミングされているとは思いません。 プログレッシブダウンロードだと思い

男はまだこれを解決しているだけの人々です。 人々がVRビデオをやろうとしている今、それは悪化するだけです。

ありがたいことに、チケットが開いているか、これを伝えようとするとシャットダウンされます。

何年もの間、SafariはCORSに問題を抱えてきました。 それは深刻な欠陥であり、彼らはそれを完全に軽蔑して扱ってきました。 2Dキャンバスの描画も影響しています。

2014年7月以降、Webkitの問題が未割り当てのまま残っているため、Appleで直接チケットを作成しました。 それまで、WebGLビデオは基本的にIOSとSafariでは役に立ちません。 ただし、インラインビデオを再生するiPhoneも必要です。

Appleに複製を提出することは、彼らがそれを急ぐのに役立つかもしれないと私は信じている。

こちらをご覧ください。 Androidでビデオテクスチャと360ビデオを完全に機能させることはほぼ完了しましたが、Chrome Devは、クロムを使用して精力的に作業しなければならなかったレンダリングの問題を修正しただけです。 Chromeでビデオ再生のパフォーマンスの問題が発生しました。

私は今Safariでこの混乱に取り組んでいます！

これは実際のアップルチケットのレーダーであり、一言一句発行されます

https://openradar.appspot.com/24641824

https://forums.developer.apple.com/message/113161#113161

実際のWebkitの問題。 それらは作品です。

https://bugs.webkit.org/show_bug.cgi?id=135379

基本的にこれはthree.jsとは何の関係もありませんが、 @ mrdoobはこれを開いたままにしておくことが重要です。

スナップショットのキャンバス2D描画のように、スケーリングすることのないリバースプロキシハックを実行する必要があります。 今のところここに文書化されています

https://flowplayer.electroteque.org/snapshot/fp6

location /video/ {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass //videos.electroteque.org/;
        proxy_redirect off;
    }

それはクラウドフロントに転送されます。 HLSを含むすべてのビデオで動作します。

これは、IOSでこれをブロックするための何よりも意図的な妨害行為のようです。 iOS上のFirefoxは、理由もなくCORSをサポートしていません。 CORSプロキシハッキングフォールバック機能が表示されています。 少なくともFirefoxは完全に機能すると思いました。

これは、Firefoxデスクトップが画像を描画しない理由をまだ説明していません。 オリジンヘッダーを送信し、Shakaなしで使用すると正常に機能します。 ビデオソースがblobを参照している場合にのみ（アダプティブストリーミングの場合のように）、画像の描画に失敗します。 また、イライラするエラーは報告されません。

Dashは、Dash.jsおよびビデオテクスチャで正常に機能します。 ただし、変更のリファクタリングが完了したら、Windows / OSX全体で確認します。

FirefoxOSXとWindowsは完全に機能します。 ダッシュまたは通常のhtml5ストリーミングを使用。

以下とは別に：

これらのログはOSXとWindowsの両方に表示されます。

Error: WebGL: Disallowing antialiased backbuffers due to blacklisting.

VmwareのWindows10でFirefoxを実行しています。 このため、FirefoxはWebglをブロックしていると思います。 それはCanvasRendererにフォールバックしていました。 この設定でwebglを明確に有効にする必要がありました。

webgl.force-enabled=true

WebGLサポートとCanvasRendererへのフォールバックを確認する必要がありますが、それが問題だとは思いません。

WebGLとCanvasの両方が機能するにはCORSサポートが必要であるため、Firefoxは除外されます。 今では、これらすべてのWebkitブラジャーとAppleです。

参考までに、これは私の生成されたビデオタグがどのように見えるかです。

Safariに大騒ぎするクロスオリジンプロパティが必要です。 Firefoxでは動作しないと言った人は誰でも正しくありません。

Safariは何年もの間それを実装できなかったので、リバースプロキシハックを必要とするクロスドメインビデオに対してWebGLがSafariで動作しないのはそのためです。

CORSのIEサポートも危険です。 IE11もそれを実装できませんでした。 エッジブラウザはCORSとWebglで問題ありません。

<video crossorigin="anonymous" x-webkit-airplay="allow" preload="auto" webkit-playsinline="true" src="blob:http%3A//localhost%3A8000/8a0dd373-8cb1-4a1d-9ad2-60d0b8f001bf" width="1024" height="512"></video>

ねえ@danrossi 、熱意が大好き！ dash.jsで動作するオンラインの例はありますか？

また、SafariとFirefoxの両方でバグを報告しました。 あなたはここでそれらの両方の進捗状況を見ることができます：

https://bugs.webkit.org/show_bug.cgi?id=154189

https://bugzilla.mozilla.org/show_bug.cgi?id=1248054

そのようなビデオタグでdash.jsを試してください。 サファリがダッシュで動作しているかどうかをプロキシハックで確認します。

私のように、CORSの問題について重複したチケットを発行することにより、AppleにCORSの問題に関与してもらうことをお勧めします。 つまり、Webkitチケットは、2014年7月以降そこにある可能性がありますが、これと同じくらい不自由な何かが、彼らが行動を起こすべきでした。

SafariでMediaSourceを使用している場合、プロキシハッキングを確認しても何も起こりません。mp4ファイルでは問題ありません。 したがって、最終的にCORSを実装したとしても、これは破られます。

Webkitの問題にコメントを残しましたが、2014年以降主要なCORSチケットが割り当てられていないことを考えると、SafariとIOSはVRにとってかなり死んでいます。

Firefoxは、Windows10とOSXではまったく問題ありません。 FirefoxはIOSにCORSを持っていないので、そこでは役に立たない。 私は彼らにそうするためのチケットを作るかもしれないので、少なくとも何かがIOSで働いています。

あなたのWebkitチケットに別のコメントを残しました。 これらはCORSの主要な問題に関連しているため、おそらく一度にマージして処理する必要があります。

私を本当に夢中にさせているのは、チケットが割り当てられているのに、実際のCORS問題のチケットが2年間高く乾燥したままになっているため、SafariのVRが役に立たなくなっていることです。

繰り返しますが、これはthree.jsとは何の関係もありませんが、SafariとIOSが詰め込まれていることに気付いた人のために開いたままにしておく必要があります。

すでにAppleチケットに追加したiPhoneのインラインビデオハックの調査を行った後、CORSがなくても2Dキャンバスに描画しても問題ないようです。 それからデータURIを取得しようとすると、問題があるので私の間違いです。 したがって、WebGLを使用する場合、SafariにはCORSサポートがなく、代わりにキャンバスレンダラーに頼らなければならないため、これも問題のようです。

フレームをドロップするため、IOSでうまく機能しないか、うまく機能しません。mpegdashでうまく機能しないように、オーディオを再生するにはオーディオタグを実行する必要があると思います。

http://stanko.github.io/html-canvas-video-player/を参照して

簡単にするために、この生のwebglの例を更新して、サファリにmp4を使用しました。 そのWebkitチケットも更新しました。 これは、CORSサポートが不足しているためです。

https://jsfiddle.net/7t77rz6L/11/

「SecurityError：DOM例外18：ユーザーエージェントのセキュリティポリシーを突破しようとしました。」

問題の報告にご協力いただきありがとうございます。 私もこれをthree.jsの外で見ましたが、とても迷惑です。

アップル ！ 可能であれば、重複チケットの大量の波が必要です。 つまり、YoutubeはWebGLをサポートしていると確信していますが、Safariは機能せず、現在の360プレーヤーでは機能しないため、なぜ彼らがそれについて何もしていないのかわかりません。 プロキシハッキングでもiPhoneがインラインで再生されないことを確認したので、VRやVRメガネはiPhoneではまったく役に立たない。 実際にビデオを再生しないように、オーディオを個別に再生し、新しいフレームを取得するためにビデオの時間を更新するという非常に危険なハックが必要です。 それはダッシュでは機能しません。

そして、それはフォーマットの権利が本当の非技術的な問題であるという法的な問題ではありませんか？ それで、あなたは私が想定している他のフォーマットを試しましたか？ webm oggは、Media Source Extensions MSEのアイデアもあるようです。また、MP4 H.264とは異なるハイプロファイル設定があり、ローエンドのハードウェアでは実行されません（問題）。
私は、ビデオ形式の互換性に関する問題が技術的ではなく、より多くのライセンスと合法であるか、または単にフリークの問題を制御していることを思い出します。
とにかくとても衝撃的なので+1。 私たちはいつでもボイコットできると思います。結局、うまくいかないものを誰も使用しないでしょう。 私はAndroidとChromeを、これを含む他の多くの理由で排他的に使用しています。

これは、CORS機能が不足しているWebkitの問題です。 彼らはそれをうまくやることができると考えて何年もの間それを無駄にさせてきました。 今だけWebglを使おうとしている人々は問題を抱えており、ただ気づいています。 起こるのを待っている事故。 インラインで再生しないようにiPhoneを強制するのと同じです。 同じドメインのビデオは、実際の使用法ではありません。

Android Chromeには、キャンバスへのレンダリングにもwebglの問題があります。 私はちょうど1か月かけてそれに対処し、最終的にそのチケットで最新のDevが再び機能していることを確認しました。 少なくともAndroidはVRメガネとWebVRで動作しますが、iPhoneは動作しません。

実際にローカルにロードされたダッシュファイルをもう一度試して、何が起こるかを確認します。

Webkitチケットにステータスの更新があります。 彼らはそのチケットで作業するために何か他のものを修正しなければならなかったと思いますが、それでも実際のcorsバグチケットには誰も割り当てられていません。 絶対にすべてがそれを修正することを期待しており、うまくいけばIOSとsafariの両方にリリースされます。 これはアップルにとって非常に恥ずかしいことです。 彼らは理由もなくこれを何年も手放しました。

@danrossi私たちを最新の状態に保ってくれてありがとう！ 😊

@danrossi素晴らしい仕事！ すべての更新をありがとう

??? Webkit開発者は現在機能していますか？

ステータスの更新が別の言い方をしているのを見たことがありませんが、コミットのノイズがあります。 確認します。

これが最後の更新です。 これでCORSサポートの欠如も実際に修正されるかどうかは誰にもわかりません。

https://bugs.webkit.org/show_bug.cgi?id=125157#c29

それがIOSになるかどうかは誰にも分かりません。 iPhoneのインラインビデオ再生の問題も懸念されます。 それについてAppleに別のバグチケットを作成する必要がありますか？

申し訳ありませんが、動作しているとおっしゃっていたと思います。 とても近いようです。 私はAppleのレーダーチケットを持っていますが、彼らは応答していません。 VRがプラットフォーム上で機能するように行動したり注意を払ったりする場合は、複製を作成する必要があります。

だから私はAppleに圧力がかかっていると信じています。 彼らはあなたが見ることもコメントすることもできない重複があったと主張して私のチケットを閉じました、そしてそれは非常に早いチケットのように見えます。 しかし、それでもWebGLのiPhoneインラインビデオ再生については説明していません。 それは彼らが何年もかかるかもしれないと提供するために不平を言うことの山を必要とします。

Chromeの担当者に確認するために戻ってきましたが、Chrome DevAndroidはまだWebGLのレンダリングに問題があるようです。 表示するためにオンにできるフラグがいくつかありますが、フレームが大幅にドロップされます。

標準のAndroidブラウザにはSafariのようなCORSの問題があるので役に立たない。 Firefox IOSにはCORSサポートもなく、チケットを追加して実装してもらう予定です。 すべてを損なうこのCORSのものは、衝撃的です。

したがって、すべての機能が機能するモバイルのサポートベクターが必要な場合。 Android Firefoxは毎晩、向きのバグを修正しました。それだけです。 とても悲しい。

興味があれば、私はここで正式にチケットを作成したので、少なくともIOS上のFirefoxでWebVRが機能し、Safariを忘れている可能性があります。 ただし、iPhoneでインラインビデオを再生できるかどうかはまだ確認していません。 CORSサポートに基づいて行動する方が早いかもしれませんが、衝撃的ではありません。

https://bugzilla.mozilla.org/show_bug.cgi?id=1256083

Appleの無効化メカニズムを確認すると、Firefoxのネイティブプレーヤーにもビデオが強制されます。 それの外見からの意図的な妨害。

これは、Mac上のFirefoxのキャンバスにも何も表示されません（Chromeでも機能します）。iOSの問題ではありません。

ああ、ffは2時50分頃に写真を表示し始めます

ここで間違えないでください。 これはCORSの問題であり、IOS / Safariと関係があります。 そのダッシュの例については何も知りませんが、OSX上のFirefoxでビデオテクスチャを使用してダッシュをテストしました。

FirefoxのDashでは、ビデオファイルをダッシュ​​互換にするために処理するときに作成するセグメントに問題があるようです。 ファイルをセグメント化しないことはFirefoxで機能するようです（セグメント化されたビデオの最後の数秒が再生される理由も説明できるかもしれません）。

2016年3月13日には、午前9時51分pmに、danrossi [email protected]書きました：

ここで間違えないでください。 これはCORSの問題であり、IOS / Safariと関係があります。 そのダッシュの例については何も知りませんが、OSX上のFirefoxでビデオテクスチャを使用してダッシュをテストしました。

—
このメールに直接返信するか、GitHubで表示してください。

これは、three.jsで正常にテストしたパッケージファイルです。 私はbento4を使用しました。 h264キーフレーム間隔はまだ（2,3,4）* HLSのようなフレームレートです。 WebGLでは問題ありません。 CORSの問題は、IOS上のWebkit、Apple、Firefoxにとって非常に大きな問題です。 「crossorigin」属性を指定する必要があります。

https://videos.electroteque.org/dash/nodrm/bbb/bbb.mpd

これをここに持ってきて申し訳ありませんが、人々は知る必要があります。

こんにちはみんな私はちょうど私に苦痛の世界をもたらすモバイルのために本当に間違ったそして後ろ向きで同じ古いものを解決しました。

Samsung Gearは、S7のブラウザで独自のアプリを起動しようとします。 誰かにWebGL / WebVRをテストしてもらい、Gearメガネをかけると、Chromeの代わりに独自のアプリケーションが起動します。 WebVRの要点は、Glassesにフルスクリーンで移動するときにWebGLキャンバスを起動することです。

つまり、彼らのばかげたアプリはChromeではなく標準のAndroidブラウザコードを使用しているため、WebGLビデオテクスチャやクロスドメインビデオ、さらにはWebVRAPIもサポートしていないようです。

アプリは非常に古いニュースであり、ダウンロードされたコンテンツ全体がそれを再生することを期待しています。 プログレッシブダウンロードmp4ファイルもそうですが、現在はすべてセグメント化されたストリーミングであるため、モデルは古くなっています。

私は、本番ChromeがS7でWebGLビデオテクスチャをレンダリングしているように見えることを理解しましたが、私のS3は完全に壊れており、Chrome開発者で何ヶ月もそれを理解しようとしています。

まだIOSで何が起こっているのか分かりません。 現在、IOSはVRにはまったく役に立たない。 Webkitは、VRを役に立たなくするために、何年にもわたって提供できなかったクロスドメインセキュリティサポートをいまだに詰め込んでいます。 したがって、上記のすべて。

参考：このコミットhttps://github.com/mrdoob/three.js/commit/854ebf5bd6179a3046d4b901b12a9cbc99008c61はFirefoxの問題を修正し

こんにちは、Appleが私のバグチケットを無視して閉じたので、ステルスでこれによると、Appleはそれを修正したようですが、SafariではあるがmacOSではあるように見えるコードをフォークしました。 まだ誰も使っていないOSとブラウザ。

彼らがそれをWebkitにマージして戻さず、現在のブラウザーにパッチを適用した更新を提供しない場合、人々は待つ必要がありますが、それでもレガシープロキシフォールバックを提供します。

プロキシハックは機能しませんが、これはDashでは引き続き機能しますが、再度確認されます。

https://twitter.com/zenoc/status/742770789880111104

やあみんな情報をありがとう、

しかし実際には、誰かがここにリストされている「リバースプロキシハック」を実装する方法を詳細に説明できれば：
https://github.com/mrdoob/three.js/issues/8110#issuecomment -183570240

それは素晴らしいことです

thnx
サール

apacheの場合

 ProxyPass /video/ //videos.electroteque.org/
    ProxyPassReverse /video/ //videos.electroteque.org/

nginxの場合

location /video/ {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass //videos.electroteque.org/;
    proxy_redirect off;
    }

私が収集したものから、現在のWebkitブラウザーは変更を確認できません。 彼らはそれをMacとIOSOSのために誰も持っていない準備ができているでしょう。 「フレームワークの問題」が原因で、IOS用のCORSをいじくり回しています。

Stage3Dがハードウェアアクセラレーションを実現できる場合は、Flashソリューションに頼らなければならないかもしれませんが、それが好きではありません。 それは常にbitmapdataを描画しています。

迅速な返信ありがとうございます

わかりました。Appleがこれを修正するまで、まだ回避策はありません。

フォールバックオプションの「DOMException18」をキャッチするのはどうですか？ どうすればそれを捕まえることができますか？

THREE.WebGLRendererオブジェクトのrender（）呼び出しに配置しようとしましたが、キャッチされません。

一時的なビデオで検出を行います。 NS

testVideo.hasAttribute("crossOrigin")

ブラウザの検出を行うこともできます。 そのSafariとIE11。

このクレイジーな問題について注意してください。 Ipadにデプロイしない限り、IOSでVRモードをまだテストできません。

CordovaアプリはWebViewを使用します。 インラインで再生するオプションがあるので、その厄介な問題を回避します。 これは、ユーザーの操作を回避します。 これはそれらすべての中で最もクレイジーで、私を夢中にさせています。

WebViewは、ローカルのhtmlファイルがfile：//で実行されている場合でも、CORSを完全に回避しているよう

疑似VR方向コントロールを確認できませんが、タッチコントロールが機能しているため、古い段ボールのステレオ効果も機能しています。 そのWebkitチケットを更新します。

Androidでのテストは、Chromiumの人々に修正して諦めさせるために3か月を費やしたChromeレンダリングのバグのために問題になっています。 悲しいことに完全に黒く、エラーが表示されていないCORSの問題ではないことを願っています。

だから私はこれを正しくしましたか？ サーバーにプロキシハックを実装することで、webglでwebglビデオテクスチャを使用する唯一の方法ですか？

Safariは完全に完全にボロックスであり、IOSも同様です。 Cordova WebViewベースのアプリを使用している場合は、インライン再生、自動再生が可能で、理由を尋ねることはありませんが、CORSは問題ではありません。 これは、IOSのmp4 / HLSの場合です。

しかし、私が報告して見つけたように。 彼らは古いデバイスを抑制し、それらを遅くして人々にアップグレードを強制します。 Ipad 3はWebGLには役に立たず、5fpsでレンダリングします。 新しいデバイスである必要があります。

OSX上のSafariでは、mediasourceは完全に完全にボロックスになっています。 CORSプロキシはそこでは機能しません。 mp4ファイルまたはネイティブHLSである必要もあります。 ネイティブHLSを使用して、CORSプロキシURLを提供します。

Appleのこれらの不発弾は、macOSで修正をリリースすることを計画しているので、まだ誰も行っていません。

彼らはIOSの根本的なフレームワークの問題を修正しようとしています。 したがって、CORSはIOSの次のリリースでも修正されるとは思えません。

どちらもWebVRを持っておらず、どちらも冗談です。 彼らはWebVRをある種のジョークとして扱い、何年も遅れています。

デスクトップ上のWebVRにはWindowsSDKが必要なので、OSXはまだオプションではありませんが、少なくともAPIはクライアントテスト用に存在する可能性がありますか？ Androidにデフォルトの段ボールディスプレイがある場合、IOSがWebVRを有効にできない理由がわかりませんか？

彼らはこのCORSの問題を何年も長引かせており、これはその産物です。

これは本当にクレイジーに聞こえます。
（申し訳ありませんが、私はフルスタック開発者ではありません）
確認したいのですが、サーバーにアクセスできない場合、webglのビデオテクスチャはiOSでは不可能ですか？ プロキシハックを使用すると、iOSでは機能しますがOSXでは機能しませんか？

iframeを試すことができます。 私はまだそれを試していません。 プレーヤーは、ビデオファイルを使用してクラウドフロントに座っている必要があります。

ただし、動的コードには役立ちません。 つまり、いくつかの疑似リンク。

ビデオリンクは//videos.electroteque.org/360/video.mp4です

iframeページは//videos.electroteque.org/360/player.htmlです。

Appleは、私が信じる標準で先導しています。 プレーヤー用の静的ファイルiframeページが必要な場合。

Chrome foriOSがインライン再生を追加することを確認しました。
https://bugs.chromium.org/p/chromium/issues/detail?id=395206
火、2016年8月23日には5:18でdanrossi [email protected]書きました：

iframeを試すことができます。 私はまだそれを試していません。 プレイヤーはする必要があります
ビデオファイルをクラウドフロントに置いてください。

ただし、動的コードには役立ちません。 つまり、いくつかの疑似リンク。

ビデオリンクは//videos.electroteque.org/360/video.mp4です

iframeページは//videos.electroteque.org/360/player.htmlです。

Appleは、私が信じる標準で先導しています。 静的が必要な場所
プレーヤーのiframeページをファイルします。

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/mrdoob/three.js/issues/8110#issuecomment -241712327、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AANbgfcQaLhx_UmJHEmViJ76_Hi4uikSks5qiuUKgaJpZM4HYtu3
。

はい！ 🤘

iOSでChromeをテストしました。 彼らが持っているとは知りませんでした。

FirefoxのようなWebkitも使用しているようです。 そして、CORSの問題に苦しんでいます。 iOSでChromeをリモートデバッグするのは困難です。これは、Appleの側に明らかなハード制限があり、weinreがクラッシュし続けるためです。 しかし、URLを回避するCORS作業を変更すると、黒いフレームが表示されます。 つまり、IOSのChrome、Firefox、SafariではCORSが機能しなくなっていることを私は知っています。 適切なCORSプロキシURLを使用すると、「機能」します

インライン再生は問題の一部であり、iPhoneの問題です。

インライン再生はiOS10で提供されます。iframeソリューションはCORSの問題で機能しますが、子ウィンドウでdevicemotion orientationchangeイベントと

ええ、インライン再生だけを取得することは問題の半分にすぎません。 CORSの問題ははるかに重要ですが、IOS 10では発生しません。CORSの問題はSafariでは完全に修正される可能性がありますが、macOSでは修正される可能性があります。

Iframeの回避策は、たとえばクラウドストレージと同じドメインに配置する必要があるオプションではありません。 たぶん、cname sub.domain.comがdomain.comであるように見せるために、ある種のDNSハックがありますが、わかりません。

@thiagopntsでは、これらのイベントは、フルスクリーンでもiframe組み込みプレーヤーで無効になりますか？

私たちがテストしたものからの@danrossi 、 window添付されたすべてのイベントはiframe内で発生しません

ナイスワンアップル！

@thiagopnts corsの問題を修正するiframeの例を

@cheesyeyesはこちら： http ： //thiago.me/kaleidoscope/iframe.html
ページがgithubページの下にある場合、iframeとビデオがGoogleドライブから読み込まれます

はい、Safariで動作しますが、あまり実用的ではありません。 CDNにある各ビデオの静的htmlファイル？

皆さん、この問題を解決する必要がありますか？

だからあなたにできることは何もないと思います。 fpsの問題でわかったように、「古いIdeviceはスロットリングを使用して廃止することを意図していた」のと同じです。

ヨセミテのSafariでは、以前にはなかった奇妙なことが変更されました。 私が行った多くのことで、CORSによる機能検出が壊れています。

それが本当にどれほど壊れているかを働いている人々に頭を上げるだけです。

var testVideo = document.createElement("video");
 testVideo.crossOrigin = "anonymous";
console.log(testVideo.hasAttribute("crossOrigin"));

IE11では、期待どおりにfalseを返します。 Safariではそれは真実ですが、CORSのバグはまだ明らかに存在しています。 機能検出は、明らかにプロキシハッキングを必要とするためにあります。 狂気。

だから私はいくつかの半分焼かれた変更がプッシュされたと思わずにはいられませんか？

crossOriginフラグによるこの奇妙な変更は、Safari10にあります。 Safari9にはありませんでした。

いくつかのWebkitバグチケットについて報告しました。

彼らは行って、IOSアップデートでCORSプロキシハッキングを妨害しました。 macOSは、SafariでもCORSの問題を修正していないと報告されています。

私は今、彼らの妨害を回避する方法を理解する必要があります。

真剣に汗をかきます。

皆さん、あなたの役割を果たして、あなたが知っている人々にAppleデバイスの使用をやめるように説得してください。 Appleが新しいIE5であることを彼らに知らせてください。

悲しいことに、IOSのCORSはフレームワークの制限であり、IOS 10で修正する必要はなかったと思います。それ以外は、Webkitを使用するものはすべて問題です。

どうやらCORSの問題はmacOSのSafariで修正されていますが、最新のアップデートです。 インラインビデオ再生はIOS10でも機能します。

これは、HLS用のmp4ストリーミング用の2つのテストです。 HLSのものは、OSX Safariでまだ問題となっているFlipYの別のバグのため、追加の作業が必要です。

IOS 10でのHLSレンダリングは表示されていますが、カラーアーティファクトの問題があります。 フレームが機能しなくなりますが、エミュレーターとフレームのドロップに問題があると思います。 私は今、Apple側の時代遅れと肥大化したプログラミングのために、IOS10にアップデートできるデバイスを持っていません。 HLSのものはまだIOS9にまったく表示されません。どちらもmp4とHLS用のCORSプロキシを必要とします。

http://dev.electroteque.org/webgl/threejscors.html
http://dev.electroteque.org/webgl/threejscors-hls.html

現在、crossOrigin機能検出はOSX 10.11でのサポートを報告しているため使用できないという状況に陥っていますが、そのようなことはありません。 また、どのOSXサファリが使用されているかを検出する必要があります。 ひどい。

これは少しばかげており、実際のビデオベースのWebVR開発からiOSを実際に遠ざけています。 現在のプロジェクトの一部としてクロスドメインリソースをプルしようとしていますが、これが私を妨げている唯一のことです。 すべてのAndroidとデスクトップ/ラップトップで動作しますが、もちろんiOSでは動作しません...

@theDrGray iframeハックを試すことはできますが、iframeは

つまり、CDNでは、ビデオごとに静的なビデオプレーヤーのセットアップが必要ですが、これは悪いことです。 私が遊んでいるかもしれないのは

filename.htmlが解析され、ロードされるファイル名はfilename.mp4、filename.webm、filename、m3u8 filename.mpdなどです。次に、filename.html？t = tokenのようなプライベートトークンをロードできます。

Amazon Lamda関数のみがビデオcnameと同じドメインで機能する場合、プレーヤーは動的である可能性がありますか？

他のすべてが失敗した場合は、CORSプロキシが必要であり、これを検出することが問題になります。 彼らはSafari10でそれを妨害しました。Safari10は「crossOrigin」のサポートを報告していますが、IOS10とYosemiteでは実際にはそうではありません。 OSX10.12ハハの二次チェックを行う必要があります

ES6プレーヤープロジェクトでのCORS検出は次のようになります

static supportsCORS() {
        let testVideo = document.createElement("video"),
            hasCORS = false;

        testVideo.crossOrigin = "anonymous";
        hasCORS = testVideo.hasAttribute("crossOrigin");
        testVideo = null;

        if (hasCORS) {

            if (WebVRUtils.isSafari) {

                if (WebVRUtils.isIpad) return false;
                return WebVRUtils.isNewSafari;
            }

            return true;
        }

        return false;

    }

    static get isSafari() {
        const userAgent = navigator.userAgent;
        return (/Safari/i).test(userAgent) && !(/Chrome/i).test(userAgent);
    }

    static get isIpad() {
        const userAgent = navigator.userAgent;
        return (/iP(hone|od|ad)/i).test(userAgent);
    }

    static get isNewSafari() {
        const version = /Mac OS X (10[\.\_\d]+)/.exec(navigator.userAgent)[1].split("_")[1];
        return +version >= 12;
    }

ここでも同じ問題が発生します。iOS以外のすべての場所で機能します。 だから動揺します。 私の成果物にはなんと大きな穴があります。 ソースパスが相対的である場合にのみ機能します（ひどいフレームレートを追加できます）...スケーリングシステムには理想的ではありません。 うーん....まあ....少なくとも頭を叩くのをやめることができます....それは不可能です....今のところ...それを中心に構築する...そしてUXフォールバックとメッセージング。

@danrossiコメントありがとうございます「どうやらCORSの問題はmacOSのSafariで修正されていますが、最新のアップデートです」が、コメント以外の詳細は見つかりませんでした。 これが動作するmacOSとSafariのバージョンを知っていますか？ それは、Appleがその修正をiOSに広める「兆候」でしょうか？

希望することができます...

2016年12月1日午後3時50分、「KieranFarr」 [email protected]は次のように書いています。

@danrossihttps ：//github.com/danrossiコメントありがとうございます
「どうやらCORSの問題はmacOSのSafariで修正されていますが、最新のものです
更新」、しかし私は他のどこにも他の詳細を見つけることができませんでした
あなたのコメントに加えて。 これはmacOSとSafariのバージョンを知っていますか
で動作します？ それはAppleがその修正を伝播する「兆候」でしょうか
iOS？

—
あなたがコメントしたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/mrdoob/three.js/issues/8110#issuecomment-264290616 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/ANKfT8A140W4hW0YMqq3L6AP_gljY4WUks5rDzMGgaJpZM4HYtu3
。

macOSの最近のアップデートが何であれ@kfarr 。 以前のバージョンのOSXとSafariにはまだ問題があります。 それがAppleの役割です。 修正を取得するためにユーザーに更新を強制します。

最新のmacOSSierra 10.12.1（16B2659）Safariバージョン10.0.1（12602.2.14.0.7）を使用してこのテストURLに対してテストすると、

iOS 10.2パブリックベータ3（14C5077b）のモバイルSafariでは、バグはまだ修正されていません。 新しいBeta4が利用可能ですが、まだインストールもテストもしていません。

はい、それはまだIOSの問題です。 WebViewCordovaベースのアプリを使用する場合。 CORSの問題はまったくありません。これは、最も奇妙な部分です。

うーん、うーん....コルドバラッパーが修正します！？！ 奇数...

2016年12月1日午後6時59分、「danrossi」 [email protected]は次のように書いています。

はい、それはまだIOSの問題です。 WebViewCordovaベースのアプリを使用する場合。
CORSの問題はまったくありません。これは、最も奇妙な部分です。

—
あなたがコメントしたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/mrdoob/three.js/issues/8110#issuecomment-264333449 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/ANKfT40CQRZqWYEJWmojo_Omvl38WeUlks5rD19GgaJpZM4HYtu3
。

はいはCORS制限を回避し、crossOrigin属性も必要ありません。 うまくいけば、それはオプションなので、彼らはそれを妨害しないでください。

Cordova WebViewでこの動作が発生する原因は何ですか？ このソースhttps://github.com/apache/cordova-ios/blob/master/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewEngine.mを読んでみましたが、関連するものを見つけることができません。

@ matti777それが機能し、うまくいけば彼らがハハです。

申し訳ありませんが、これがIOS10でも当てはまることを確認する必要があります。 今のところ、Cordovaを検出し、CORSプロキシソースを使用しようとはしていません。 私の機能は、必要に応じてCORSプロキシソースに切り替えます。

コルドバがUIWebViewで何が違うのかを知っていれば、そのコードを自分のネイティブアプリで複製して、THREE.jsテクスチャとしても使用するhtml5ビデオのCORSサポートを利用することを意味しました。

私たちはVimeoがホストするビデオを使用しており、フォームの公開URLは次のとおりです。

https：//player.vimeo.com/external / ...

..機能しません。ビデオは、これらがリダイレクトされるURLで機能します。

https://fpdl.vimeocdn.com/.。

おそらく、彼らのvimeocdn.comにはリバースプロキシ機能がインストールされていますか？ Vimeoに聞いてみるべきだと思います。

私はこれに非常に悩まされていると言わなければなりません。 スティーブありがとう。

• NS

IFRAMEソリューションを試してみます。 しかし、それを行う方法はよくわかりません。 私はコードからビデオ要素/キャンバスを作成しているので（もちろん、それらをDOMに追加することはありません）、次のようなものがあるかどうか疑問に思いました。

self.iframe = document.createElement("IFRAME");
self.iframe.setAttribute("src", 'https://player.vimeo.com/');
self.iframe.appendChild(self.video);

..で十分です。

それで、うーん、iOSビデオテクスチャをあきらめた後、私はAndroidに目を向けましたが、THREE.jsを通じて同様の動作に気づきました。 CORSビデオは再生されますが（オーディオは聞こえます）、ビデオはレンダリングされません。表示されるのは黒い画面だけです。 ちょうど今、THREE.jsr79とr84でこれを試しました。 ここで奇妙なことは、 http：//krpano.com/ios/bugs/ios8-webgl-video-cors/がAndroidで問題なく動作することです。

これは私がAndroidで使用しているコードです-それに関してはすべてのプラットフォーム-（ハードウェアアクセラレーションがオンになっていてWebChromeClientがインストールされている状態で、Webビューのネイティブアプリ内で実行されています）：

http://pastebin.com/Y1D3beti

動作しているkrpano.comの生のWebGLとの唯一の違いは、キャンバスを介してではなく、ビデオ要素から直接テクスチャをアップロードしていることです。これは私の問題ですか？ ビデオ画像の上や周りに何かを追加するには、キャンバスを介してレンダリングする必要があります。

• マティ

動作しているkrpano.comの生のWebGLとの唯一の違いは、キャンバスを介してではなく、ビデオ要素から直接テクスチャをアップロードしていることです。これは私の問題ですか？

多分？ ビデオを直接渡してみましたか？

このチケットは、SafariでのCORSの問題に関するものです。 macOSのSafari10は、Dashでも完全に修正されています。

IOS 10は依然としてCORの問題であり、CORSプロキシが必要です。 または、CORS制限をまったく使用しないCordovaWebviewアプリを使用します。

AndroidストックブラウザはCORSをサポートしておらず、CORSプロキシでさえ機能しません。

ChromeとFirefoxはAndroidのみ。

この特定の問題は、私が恐れているthree.jsとは何の関係もありません。 あまりにも多くのフレームをドロップするキャンバス描画も使用しません。

@danrossiあなたが構築しているものを見ることができますか？ かなり印象的ですね！

木、2017年1月26日には、午前8時41分AM danrossi [email protected]は書きました：

このチケットは、SafariでのCORSの問題に関するものです。 macOSのSafari10は
ダッシュでも完全に修正。

IOS 10は依然としてCORの問題であり、CORSプロキシが必要です。

AndroidストックブラウザはCORSをサポートしておらず、CORSプロキシもサポートしています
うまくいかない。

ChromeとFirefoxはAndroidのみ。

この特定の問題は、私が恐れているthree.jsとは何の関係もありません。 私
あまりにも多くのフレームをドロップするキャンバス描画も使用しません。

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/mrdoob/three.js/issues/8110#issuecomment-275438671 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AANbgazonmTe-yGDfgToCRVhTy_qyp_Eks5rWMy1gaJpZM4HYtu3
。

>>

http://jonobr1.com/

@danrossi Safariは完全に修正されていますか？ プロキシハックを使用してSafariを実行していますか？ ElCapitanのSafari10.0.3で、 https： //krpano.com/ios/bugs/ios8-webgl-video-cors/で SecurityError (DOM Exception 18): The operation is insecure.をまだ取得しています。

@timothyallanさまざまなビデオプレーヤー機能を開発しているので、他のプロジェクトが多すぎて集中できませんでした。 私が知る限り、彼らはmacOS Safariでそれを修正しました。彼らに関する限り、他のすべてのSafariはベーパーウェアです。 セキュリティアップデートでさえ、古いOSのアップデートは見られませんでした。

ここではIOS10が取引のブレーカーであり、それでも問題があります。 なぜそれが機能しないのか、そしてそれを回避する方法を常に人々に説明しなければなりませんでした。

Appleは人々が新しいオペレーティングシステムにアップデートすることを期待しており、それが最終的なものだと私は信じている。

SafariでのDashのwebglの問題そのチケットにステータス更新の小刻みと小片が表示されますが、私のテストでは、それはmacOSでも機能していたと思います。

ここで更新するだけです。 これらの殴打者は、まだ非常に静かですが、いくらかの刺激を与えました。

corsの修正はIOS11ベータ版です。 IOS10はそれを取得しません。

https://bugs.webkit.org/show_bug.cgi?id=135379#c92

新しいアップデート。 CORSが修正されたと報告されたデバイスのIOS11ベータ版。 ここで、IOS11をサポートする新しいデバイスが必要です。

シミュレーターが壊れていて、CORS修正がないので気にしないでください。

https://bugs.webkit.org/show_bug.cgi?id=135379#c108

わーい！！

2017年8月11日午前2時53分、「danrossi」 [email protected]は次のように書いています。

新しいアップデート。 CORSが修正されたと報告されたデバイスのIOS11ベータ版。 今
IOS11をサポートする新しいデバイスが必要です。

https://bugs.webkit.org/show_bug.cgi?id=135379#c108

—
あなたがコメントしたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/mrdoob/three.js/issues/8110#issuecomment-321742658 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/ANKfT5TG41uHQV8U_FrF8LaJ0EMKKIy_ks5sW_pjgaJpZM4HYtu3
。

CORSの確認はIOS11.1で修正されています。 私はついにテスト用のハードウェアデバイスを入手するための予算を手に入れました。 こんなに時間がかかりました。

11.1ではCORSプロキシは必要ありません。 CORS属性のサポートをSafariで適切にテストできるとは思いません。 クライアントのバージョンチェックを行う必要があります。

ただし、HLS / webglの回帰に関する大きな問題があります。

素晴らしい。 ありがとう！

2017年11月5日午前1時36分、「danrossi」 [email protected]は次のように書いています。

CORSの確認はIOS11.1で修正されています。 ついに予算を手に入れました
テスト用のハードウェアデバイス。 こんなに時間がかかりました。

11.1ではCORSプロキシは必要ありません。 CORS属性はないと思います
サポートはSafariで適切にテストできます。 クライアントバージョンを実行する必要があります
チェックします。

ただし、HLS / webglの回帰に関する大きな問題があります。

—
あなたがコメントしたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/mrdoob/three.js/issues/8110#issuecomment-341952485 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/ANKfT52MncuxghqJmPes4iFoO1a_K_Gfks5szVd1gaJpZM4HYtu3
。