Three.js: Safari / IOSのHLSが機能しなくなった

フレームをドロップしますが、キャンバスに描画し、キャンバスレンダラーでレンダリングします。 webglには何かが必要です。

これは美しさです。 プロキシされたHLSストリームを使用してkpanoデモを少し変更しました。

現在SafariOSXで動作していますが、IOS 9では動作していません。違いは何ですか？ 私は悲しいことにwebglフラグや、それらが何をするのかについての専門家ではありません。 IOS9では、まだ黒いフレームです。

http://dev.electroteque.org/threejs/webgl.html

この最後のリンクは、サファリ9.1.3 / mac os x10.11.6でのみ黒のrect /サウンドです

HLSとは何ですか？

@makc本当に？ 私はOSX10.10とSafari10を持っています。それはAppleによる最近の妨害行為の変更を説明しています。 Safari 10です。つまり、Safari 10であれば、私たちは皆元気です。

@mrdoob HLS = Appleストリーミング。 つまり、ライブストリームだけでなく、VODにも使用できます。 ライブストリーミングは、Terradeckのギアで標準になるでしょう。 すなわちhttp://dev.electroteque.org/video/360/hls/ultra_light_flight.m3u8

違いは何でしょうか？ 最初の例でいくつか変更してみました。 2番目の例は生のwebgl関数です。

したがって、texImage2Dは部分的にHLSをレンダリングしますが、iOSではまだレンダリングしません。Safari10ではないためかもしれません。

いくつかのWebkitバグチケットについて報告したことをお許しください。

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

私は今、彼らの妨害行為を回避する方法を理解する必要があります。 IOSで動作するHLSをさらにテストするには、それを動作させる必要があります。 アップルは真剣に私に彼らの火を消すために汗を流させています。

OSXレンダリングを取得できれば、それが始まりです。 three.jsの違いを理解する必要がありますか？

私はまだ何が違うのかを比較するために削減方法をしようとしています。 それがわかったら、IOSも動作する可能性があります。

おそらく、three.js内の余分なシェーダープログラムがレンダリングの問題を引き起こしていますか？ 私はそれを理解していませんが、生のwebglの例で、正距円筒図法の例でthree.jsが行っていることを複製しようとしています。 このためのシェーダーコードの例はありますか？

ここでいくつかの生の関数を見つけました。これは、three.jsが実行していることを完全に複製できることを願っています。 一部の変数はワールド位置のように外部で設定されるため、シェーダープログラムを直接コピーすることはできません。

https://bl.ocks.org/mbostock/5446416

私はちょうどこれまたはおそらく関連する問題に遭遇したかもしれません。 S3バケットにh264mp4ファイルがあり、それらをblobとしてvideo.srcにロードしています。

Amazon Webベースのアップローダーを使用してS3バケットにアップロードする場合、モバイルSafari（iOS 10.0.1）に直接ロードするとビデオは正常に再生されますが、three.jsビューアーを使用して再生しようとすると、黒いスクリーン。 ただし、Cyber​​duckを使用してS3バケットにアップロードすると、MobileSafariおよびthree.jsで直接正常に再生されます。

Cyber​​duckがメタデータ「Content-Type = video / mp4」を設定しており、AWSアップローダーが「Content-Type = application / octet-stream」であるようです。 このメタデータを手動でvideo / mp4に設定すると、すべてが正しく機能します。

奇妙な問題、そして私に多くの頭の引っかき傷を引き起こした問題。 これがこのチケットと同じ根本的な問題であるかどうか、または新しいチケットを作成する必要があるかどうかを教えてください。

ありがとう、
ダスティン

これは、mpegtsフラグメントまたはmp4ではないフラグメント化されたファイルのようにHLSメイト用です。 Mp4はSafariとIOSの両方で問題ありません。 サイバーダックのmimetypeを確認したところ、mpegtsが正しいと表示されています。

もちろん、IOSではなく、生のwebglの例でも同じストリームが機能しています。 あなたの問題は私のものと似ていますが、黒いフレームのようです。 レンダリングはまったくありません。

@danrossiokかっこいい。 自分の問題専用の新しいチケットを作成します。 ありがとう。

これが問題だと思います： www.krpano.com/ios/bugs/ios10-webgl-video-texture-crash/
私は現在、three.jsに対して同じ回避策を実装しようとしていますが、それほど遠くはありません。

@phaseOne。 これは、OSXとIOSの両方の問題としてのサファリの問題です。 Mp4はIOSとOSXで正常に動作しています。 アンチエイリアスをいじくりまわします。

それでも2つの違いを理解することはできません。 生のwebglの例はまだIOSで機能しませんが、OSXで機能させることは始まりです。

ドロップインできる、動作する等長方形シェーダープログラムを見つけることができるかどうか疑問に思っています。

詳細はこちら： http ：

これはブラウザのバグであると認識していますが、これらのWebGLバグが修正されるまでにかかる時間を考えると、回避策を実装する必要があるかもしれません。

キャンバスを通してテクスチャーを使用する場合、ビデオはサファリで表示されました。
ただし、iOSにはまだCORSの問題があるため、同じオリジンでのみ機能しました。
https://bugs.webkit.org/show_bug.cgi?id=135379

私はwebglに精通していませんが、以下を参照してください。
https://github.com/NishimuraT/videojs-panorama/commit/bd99200d8831c7ad0d10d742e087953da0f44169

@NishimuraT私はあなたがcanavasrenderを使用することを意味することを知っていると思います。 還元法をやってみました。

それは機能していたと思いますが、CPUが原因で深刻なドロップフレームと再生パフォーマンスの問題が発生します。 明らかにIOSではさらに悪い。 Ipad3はすでにwebglのフレームをドロップします。

@danrossi少し誤解がありました。 ごめんなさい。 見当違いのものを送っていました。

生のwebglとシェーダーを使用するelevrプロジェクトでも同じ問題を確認しました。 私の帰り道を動かすには、それをハックする必要があります。 そこにある何かがレンダリングの問題を引き起こしており、three.jsにも同じように影響します。

私はelevrで、それが壊れている原因となっているテクスチャをバインドする自動クリアであることを確認しました。

webGL.gl.bindTexture(webGL.gl.TEXTURE_2D, null);

これがコメントアウトされている場合は、機能しています。

これも問題を引き起こしていました、それが何のためにあるのかわかりません。

webGL.gl.pixelStorei(webGL.gl.UNPACK_FLIP_Y_WEBGL, true);

たぶん、three.jsで同じことをしている自動クリアプロパティがありますか？

私はへの多くの参照を見ます

state.bindTexture(_gl.TEXTURE_2D, null);

しかし、それがどこにあるのかわからない。 それをする必要がありますか？

コードが狂っていて、テクスチャ描画の問題の原因を突き止めることができません。 このテクスチャの結合に何かがあるようです。

@danrossiそれを適切にレンダリングするページはありますか？

ノイズメイトについて申し訳ありません。 私はもっ​​とABテストをしました。 elevrデモでもコメントアウトしなければならなかったので、確かに私が言ったことのようです。

_gl.pixelStorei（_gl.UNPACK_FLIP_Y_WEBGL、texture.flipY）;
https://github.com/mrdoob/three.js/blob/6c7f000734f8579da37fb39e5c2e9e5e2dfb14f8/src/renderers/webgl/WebGLTextures.js#L411

これが問題の原因です。 ただし、それがないと、テクスチャは逆さまになります。 別のテストを追加して、現在機能していることを示します。

http://dev.electroteque.org/threejs/hlsbroken.html
http://dev.electroteque.org/threejs/hls.html

私が見つけた別の生の例は、FLIP_Yをコメントアウトしました。 Webkitのバグの可能性はありますか？

http://dev.electroteque.org/threejs/webgl3.html

唯一のflipYへの言及はこれですが、毎晩Webkitはまだ問題です

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

ハードウェアアクセラレーションを壊すと思われるflipYを無効にすると、機能しますか？

texture = new THREE.VideoTexture( video );
                texture.minFilter = THREE.LinearFilter;
                texture.format = THREE.RGBFormat;
                texture.magFilter = THREE.LinearFilter;
                texture.flipY = false;

http://dev.electroteque.org/threejs/hlsflipy.html

今それがwebkitのバグかどうかを確認しようとしています。 今のところ、テクスチャを回転させて回避するにはどうすればよいですか？

今のところ、テクスチャを回転させて回避するにはどうすればよいですか？

ジオメトリUVを反転するか、シェーダーでそれを実行しないのはなぜですか

@makcどうすればいいのかわからない。

さらに頭を上げるためだけに。 このFlipYの「修正」は、IOS9では役に立ちません。テストしただけです。

他の何かが今そこに問題です。 これを追跡するだけでも数日かかりました。

見た目からすると、Three.JSではなくすべてのWebkitの問題である可能性があります。 いつものように、これについては申し訳ありません。

私もそこにレポートを提出しましたhttps://bugs.webkit.org/show_bug.cgi?id=163866

どうしたらいいのかわからない。

http://jsfiddle.net/hfj7gm6t/2182/

@makcは、UVを反転させることを確認すると役立ちます。 これとどのように逆にしますか？

uv.setY (i, 1 - uv.getY (i));

http://dev.electroteque.org/threejs/hls.html

ただし、IOSではまだ問題が明らかです。

@makc。 このシェーダープログラムがフリップを実行している可能性は十分にあります。これはデモソースの1つに含まれていました。

attribute vec2 vx;varying vec2 tx;void main(){gl_Position=vec4(vx.x*2.0-1.0,1.0-vx.y*2.0,0,1);tx=vx;}

FlipYフラグを使用していないため、シェーダープログラムで機能しているように見えるため、元のデモで機能しているように見えます。

http://dev.electroteque.org/threejs/webglnoflip.html

それをthree.jsに統合する方法がわかりませんか？ シェーダープログラムを使用する方が良いでしょうか？

私はまだIOSをデバッグしています。

これは面白いです。 その計算をこの例に複製しようとすると、それは反転しているように見えますが、それでもひどくスケーリングされます。

http://dev.electroteque.org/threejs/webglflipped.html

したがって、gl_Positionはその位置を制御します。

 gl_Position = vec4(aVertexPosition.x*2.0-1.0,1.0-aVertexPosition.y*2.0,0,1);

シェーダープログラムを使用する方が良いでしょうか？

シェーダープログラムはフレームごとに1回実行されますが、全体が開始する前にジオメトリ内のuvを1回だけ反転します。

@makcは、おそらく最初に値を設定するのが最善でしょう。 私が正しければ、これらのuv値はシェーダープログラムの変数であり、計算に使用されますか？

ソースには、gl_Positionへの参照がいくつかあります。 これが正しいかどうかはわかりませんが、このようなものがあります

gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

ありがとう。

私はIOSSafariでwebglを使ってあらゆる種類のトリックを試し、フレームをレンダリングできるかどうかを確認しました。今のところ、フレームは真っ黒です。 Mp4は大丈夫です。

これについてはあまりリソー​​スがありません。 私の発見者も探していると思います。 ライブストリーミング用ですが、VODもあります。

私は誰かにいくつかのことをテストしてもらいました。 彼らは、FLIPY修正を加えたこの生のwebglの例はIOS 10で機能すると信じていますが、three.jsバージョンは実際にはクラッシュしていません。

テクスチャをブロック状にするNEARESTフィルタを使用していることに気づきました。それを再現しようとしましたが、同じ問題が発生しました。

したがって、これらはどちらも機能しません

http://dev.electroteque.org/threejs/hls.html
http://dev.electroteque.org/threejs/hls2.html

しかし、これは彼らのためですが、私にとってのIOS9はそうではありません

http://dev.electroteque.org/threejs/webglworking.html

非常に重くて苦痛なテストを行った後、デモと問題を微調整しました。

FlipYの回避策は、OSX 10.11とmacOS、IOS 9および10の両方のHLSに必要です。生のwebglの例では、シェーダープログラムで実行されるため、FlipYを使用しません。 three.jsでは、ジオメトリを反転させる必要があります。

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

エミュレータではないことを確認したら、IOS10でのHLSの演色問題に関して別のチケットを提供する必要があるかもしれません。

誰もSafariをサポートしたくないのも不思議ではありませんが、人々はSafariが機能する必要があります。

ここで、さまざまなrgb形式の設定を提供する必要がありました。 デフォルトのものは垂直カラーバーを生成しますが、rgbaのものは色が正しくありません。 しかし、エミュレーターでは。 Ipadデバイスがサポートされなくなったため、IOS10を正しくテストできなくなりました。 確認のために、IOS10を搭載したiPhoneを手に入れてみます。

http://dev.electroteque.org/webgl/threejs-hls.html
http://dev.electroteque.org/webgl/threejsrgba-hls.html

http://dev.electroteque.org/webgl/webgl.html
http://dev.electroteque.org/webgl/webglrgba.html

これらの2つの例に集中してください。 RGBフラグは実際のデバイスでは違いがなく、シミュレーターはRGBA形式を使用すると、誤った出力を生成しますが、同様の出力を生成します。

FlipYの回避策は、HLSを備えたIOS 9/10 / OSXSafariに必要です。

HLS webGLレンダリングで色の問題を再現することができましたが、Webkitの薄片状のバグがthree.jsの問題であるかどうかはわかりませんが、2番目のチケットが必要になります。

非常に多くの大きな欠陥やバグが原因で、これがショーストッパーになっています。

したがって、このようなHLS webgl出力は、IOS9ではなくIOS10で部分的にしか機能しません。現在、多くのデバイスが9でスタックしています。 9の回避策を見つける必要があります。

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

やあ！ 私は同じ問題を抱えています。 今、何か解決策はありますか？

はい、それらのデモではそうですが、IOS 10の色空間の問題に関する2番目のチケットを確認してください。Webkit/ Appleに代わってIOS9で動作させるための努力はないようです。つまり、Ipad3などの古いデバイスは除外されます。とにかく5fpsをほとんどレンダリングできませんでした。 最初にIOS10を機能させることに集中する必要があります。

これはこの問題の回避策ですが、Webkitに報告されています。 これはすべてのSafariで問題になります。

http://dev.electroteque.org/webgl/webgl.htmlが機能していないようです。 私はios10でページをテストしました。 しかし、ページが読み込まれるとサファリがクラッシュします。

threejsの例を使用してください。

この問題にリストされているすべての例をテストしました。 http://dev.electroteque.org/webgl/webglrgba.htmlのみが機能しているようです。 しかし、色空間の問題があります。

@wuyingfengsuiこれは

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

あなたはおそらく私が賭けているシミュレーターをチェックしているでしょう。 それは大きな問題です。 緑色のカラーバーを表示するフレームを更新しないだけではありません。 RGBAフラグを使用すると、シミュレーターでも機能します。 そこには奇妙なグラフィックの問題があります。

実際のIDeviceでは、シミュレータのRGBAフラグと同じようにRGBフラグを使用すると、色空間の問題が発生します。

Ipad 3が廃止されたため、今のところIOS 10のテストは適切に行われていませんが、ありがたいことにiPhoneにアクセスできました。

その上にあるCORSプロキシURLにも注意してください。

今色空間の問題についてはこれを参照してください

https://github.com/mrdoob/three.js/issues/10067

そして、このWebkitチケットは、彼らがわざわざ修正してリリースをプッシュすることはないと思います。

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

iOS 10 iphone7でRGBをRGBAに変更すると機能することがわかりました。

わかりました。デバイスごとに異なります。 RGBAに更新しました。 これはどう？

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

@danrossi動作します。

@wuyingfengsuiこれに関しては、Webkitチケットを更新する必要があります。 他にも色のフラグをいじる必要があると思いますが、うまくいけば1つが正しいものです。 異なるHLSストリームを試しましたが、同じでした。

three.js定数には、さまざまな値を使用できることがわかります。 つまり、これら。 処理されるバイト型フラグもあります。 試行錯誤と非常に疲れる試行錯誤。

https://github.com/mrdoob/three.js/blob/dev/src/constants.js#L126

残念ながら、IOS 9は完全に冗長化されているため、機能しません。 古いデバイスはIOS10を取得しません。

ある種の妨害行為が行われていると思いますが、Safari 10がリリースされる前は機能していたと思いますか？ 私のテスト段階は、Appleと、時にはAndroidとのすべての不一致のために、数ヶ月かかりました。 私がHLSをテストしたとき、それが機能していたことはかなり確信しています。

私はwebGLに精通していません。 Webkitで修正されるまで解決できないと思います。

これは、テクスチャをwebglにアップロードするものです。 そこにあるそれらのフラグは興味深いものです。

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);

@wuyingfengsuiがmacOSでCORSの問題を部分的に「修正」するのに5年以上かかった場合は、息を止めないでください。

そのため、誰かがそこに座って回避策を見つけなければなりません。悲しいことに、それは私自身です。

生のwebglの例をとると、これらのフラグが混乱する可能性があります。 または、定数とプロパティ「format」および「type」を使用してthree.jsを介して実行します。タイプはバイトタイプであり、フォーマットは、RGBAがほとんど機能しないようにするために必要なカラーフォーマットです。

明日はそれぞれの旗を確認するために時間を費やし、うまくいけば1つの組み合わせが機能します。

@danrossi調子はどう？

考えられるすべてのフラグをいじってみましたが、何もありませんでした。 RGBフラグとRGBAフラグのみを取得でき、バイトタイプは符号なしです。 他のオプションはちょうど黒いキャンバスを示しました。 他に何をすべきかわからない？

@danrossiお疲れ様でした。 Hls.jsがMSEでました。 ただし、SafariMobileはMSEをサポートしていません。

@wuyingfengsuiこれはIOSのネイティブHLSの問題です。上記の修正は、

ダッシュストリーミングでは、プロキシが回避されていても、古いSafariでCORSの問題が発生していました。 たぶんmacOSでは彼らもそれを修正しましたか？

上記のコード修正を使用してthree.jsで回避策を提供する以外に、実行できることはおそらくありません。

私はwebkitとAppleがそれを修正することはないだろう。 だから今、このチケットに注目しています。 RGBフラグのものは現在IOS10レンダリングに関連しています。 そこに閉じ込められたIOS9以前のデバイスは詰め込まれています。

https://github.com/mrdoob/three.js/issues/10067

ここに更新はありますか？ iOSの固定演色で動作する人はいますか？

このチケットを参照してください。

https://github.com/mrdoob/three.js/issues/10067

HLSの回避策がthree.jsに入り、その外に出なければならないのではないかと思います。

その回避策のコードは次のとおりです

texture = new THREE.VideoTexture( video );
texture.minFilter = THREE.LinearFilter;
texture.format = THREE.RGBAFormat;
texture.magFilter = THREE.LinearFilter;
texture.generateMipmaps = false;
texture.flipY = false;

var geometry = new THREE.SphereBufferGeometry( 500, 64, 44 );
geometry.scale( - 1, 1, 1 );

var uv = geometry.getAttribute('uv');
for (var i = 0; i < uv.count; i++) {
     uv.setY (i, 1 - uv.getY (i));
}

webglフラグをいじりたい場合は、生のwebglの例を使用してください。 私はすべての可能なオプションを試しましたが、今は何もしていません。 それはうまくそして本当に妨害されており、webkitからの応答はありません。

http://dev.electroteque.org/webgl/webgl.html

ありがとう。 HLS以外にiOSビデオフラグにストリーミングする他のビデオフォーマットはありますか？ レンダリングの問題なしにH.264をストリーミングすることは可能ですか？

@ pedrofranceschimp4は問題あり

このチケットに関連するflipY修正は、HLSストリームとSafariにのみ適用する必要があります。 このFlipY修正は、IOS10を取得できない古いデバイスをシャットアウトするIOS9では機能しません。

テストに使用していたIpad3で、HLSとWebGlが機能することはありません。 私は新しいiPhoneでテストしなければなりませんでした。 IOS 10シミュレータはほとんど機能せず、他の問題と同様のカラーアーティファクトの問題がありました。

少なくともIOS10上のiPhoneのインラインフラグは機能し、インラインビデオとwebglは現在可能ですが、CORSは依然として問題です。 CORSは、macOSのSafariでのみ修正されます。

Safariのポイントは、もう1つの古典的なWebkitのバグであり、他のブラウザーでのHLS.JSストリーミングは問題ないためです。

キャンバスを追加することで修正できることがわかりました。 ただし、iOS10でのみ機能します。このコミットを確認してください： //github.com/yanwsh/videojs-panorama/commit/0122b1bbd31093b77ca7f09900afa74e2c537037

それはイベントではありませんでした。 drawImageでキャンバスレンダリングを使用しています。 WebGLではありません。 つまり、three.jsキャンバスレンダラーを使用するのと同じです。 Canvasレンダラーは実際にIOSを吸い込み、フレームをドロップして使用できなくなります。 これはあなたの修正ですか？

品質はあまり良くありません。 しかし、それは機能します:)

フレームのドロップは品質の問題以上のものです:)

@mrdoob回避策としてキャンバスレンダラーを試しましたが、これは私のために行います。 メッシュの表示という問題が何であるかわかりません。 回転も正しくありません。 mp4ファイルをロードすると、正しく表示されますが、メッシュラインは表示されます。

それでも、これを行うフレームはドロップされます。

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

@danrossi

@mrdoobこの問題はSafariのHLSに関するものです。 これらすべてのデモを行うのは本当に大変です。 しかし、私はいくつかの組み合わせを作りました。

また、Chromeがmp4ahhのSafariCORSプロキシバージョンを使用していない限り、mp4の再生を拒否することも確認しました。

奇妙なCanvasRendererの問題に関する限り、IOS 10のHLSの問題を一時的に修正する可能性があります。ここに組み合わせがあるので、その動作と、考えられる奇妙な回転値のオフセットを示します。 コードはすべて同じです。 テクスチャの上にメッシュグリッドがあります。

Safariの場合

http://dev.electroteque.org/webgl/webgl-mp4.html
http://dev.electroteque.org/webgl/canvas-hls.html

Chromeの場合

http://dev.electroteque.org/webgl/webgl-webm.html
http://dev.electroteque.org/webgl/canvas-webm.html

@danrossiSafariバージョンも

これはIOS10で機能するはずですが、色のアーティファクトが見られるはずです。

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

これらの他のものは、IOSの問題を回避するためのCanvasRendererテストです。少なくともデスクトップブラウザで動作するはずですが、動作しません。

これはどのIOSでも機能するはずですが、Imはそれについてあまり心配していません。

http://dev.electroteque.org/webgl/webgl-mp4.html

CanvasRenderソリューションがIOSにとって良い回避策になるとは思いませんが、それはオプションです。 CORSプロキシが必要なだけでなく、キャンバスの描画によってフレームがドロップされるだけです。 Safari OSXは、threejs-hls.htmlでFlipYの回避策を使用できます

キャンバスのデモを更新しましたが、外部で描画する必要はないようです。

ただし、球のジオメトリに奇妙な問題があり、理解できません。そのため、画像が正しくレンダリングまたは回転せず、すべてが点に歪んでいます。

左上の領域をクリックして、orbitcontrolsでドラッグしてみてください。

メッシュの問題は、メッシュの表示を停止するために、MeshBasicMaterialに「overdraw：0.5」を追加する必要があることです。

CanvasRendererを使用する場合、サファリでCORSプロキシを必要としません。 次にSoftwareRendererを調べて、CanvasRendererがドロップするフレームが多すぎるためにうまくいくかどうかを確認します。

http://dev.electroteque.org/webgl/canvas-mp4.html
http://dev.electroteque.org/webgl/canvas-hls.html

CanvasRendererが明らかにドロップフレームのために減価償却されたとマークされていることを考慮してください。 最後の手段は、SoftwareRendererでビデオテクスチャを試すことだけだと思います。 その変更はまだ機能していないようで、セットアップ例を見つけることができません。 ただの黒い帆布です。

カラーグリッチの回避策はありますか？ すべてが青みがかっています

@andreabadesso 2つのチケットを設定しているので、それらをマージする必要があります。

OSXの場合、FlipYの回避策を実行すると、その厄介な問題が修正されます。 IOS 10の場合、他のものが完全に必要です。

キャンバスの描画は大きな失敗であり、箱から出して適切にレンダリングすることすらできず、ジェモエトリーが歪んでいるようです。 フレームもドロップします。

私は今でもキャンバスの描画に依存している「SoftwareRenderer」で運試しをしています。 私が手に入れるのは今は黒い帆布だけなので何もありません。 ビデオテクスチャを使用する方法についてのドキュメントはありません。

他に選択肢はありません。webkitは応答せず、考えられるすべてのwebglフラグを試しました。 戻ってエンコーディングを試してみることができましたが、HLSは動作中のmp4ファイルからパッケージ化されています。

一方、誰かが必死の解決策を必要とする場合、これは.tsファイルを監視し、それらを.mp4に変換し、WebSocketを発行して、クライアントがmp4（ios10で動作している）の次のフラグメントをダウンロードできるようにします。

https://github.com/Lab21k/node-hls-mp4-ws/

誰かが興味を持っているなら、私は完全な解決策を提供することができます。

@andreabadessoソリューションに関するクライアントの実装はありますか？

それは非常に危険です。 CORSプロキシが必要なだけでなく、リアルタイムでFFMPEGを通過しようとしています：O IOSはWebSocketも実行しますか？ 私はそれがwebrtcを行うことができないことを知っています。

SoftwareRendererオプションを使用して、キャンバス描画を介してビデオテクスチャを取得しようとするのも悪いことです。 ただの黒いフレームです。 どちらのオプションも行き止まりでした。少なくともSoftwareRendererがビデオテクスチャで動作し、画像テクスチャのみが表示されることを望んでいました。

みなさん、こんにちは。私はこの1日間色の問題に取り組んできましたが、自分のユースケースに適した回避策を見つけました。 このスレッドはとても役に立ちました。貢献したいと思います。
問題は、赤と青の色が入れ替わるだけです。 そこで、ffmpegを使用してこれらの色を事前に切り替えました。 threejsで色が再切り替えされると、ビデオは通常の外観に戻ります。
これは最適なソリューションではありませんが、機能します。 （IOS 10.2でテスト済み）

@Yralec

私はそれがエンコーディングの問題であるか、エンコーディングをいじくり回しているのだと思いました。

しかし、それはwowzaライブストリーミングについて言うのに役立つことはありません。 ライブエンコーダーの動作を制御できる人はいないでしょう。 おそらくVODの場合。

確認するためのffmpegフラグはありますか？

それでも素晴らしい。 まだ必要なFlipYの問題を除けば、これはthree.jsの問題ではないようです。

Webkitがこのような理由を理解することはできません。

@danrossi

これが私が使用したコマンドです：
ffmpeg -i in.mp4 -hls_time 10 -hls_list_size 0 -vf "colorchannelmixer = rr = 0.0：rb = 1.0：bb = 0.0：br = 1.0、vflip" -pix_fmt yuv420p out.m3u8
ご覧のとおり、私も出力を反転しているので、threejsでそれを行う必要はありません。

わかりました、それについて尋ねるつもりでした。

青と緑を入れ替えるシェーダーを書くほうが簡単ではないでしょうか。

@mrdoobシェーダーについての知識はほとんどないので、私にとってはそうではありませんでした（私もそうは思いませんでした）が、赤と青を入れ替えるシェーダーの書き方を知っていれば、ほぼ間違いなくより良い解決策です。
また、ライブストリーミングが最終的に機能する可能性があります。

@mrdoob私はあなたが何かに

私はいくつかの調査を行いましたが、このようなチャネル順序の交換があるようです。私はシェーダーの専門家ではありません。

gl_FragColor = texture2D(u_image, v_texCoord).bgra;

私の生のwebglの例の@mredoobは、このようなものを試しましたが、プログラムが壊れており、エラーが発生します。 したがって、これは明らかに非常に偽のテクスチャから色を取得し、「bgra」が赤と青のチャネルを入れ替える場所です。

これから実用的な解決策を得る方法はまだわかりません。

 gl.shaderSource(ps, "precision mediump float;uniform sampler2D sm;varying vec2 tx;void main(){gl_FragColor=texture2D(sm,txt).bgra;}");

単にコピーして貼り付けるだけでプログラムエラーが発生しました。

上記のコードを使用します。 レンダリングされているものがIOS10で表示されているものであることを確認できるので、シェーダーで交換された赤とぼかしの色を反転させる必要がありますか？

http://dev.electroteque.org/webgl/webglbgra.html

@Yralecは、シェーダーでカラーチャネルの順序を反転することを確認すると、

gl.texImage2D（gl.TEXTURE_2D、0、gl.RGBA、gl.RGBA、gl.UNSIGNED_BYTE、video）;

@mrdoob組み込みのシェーダープログラムにこのテクスチャの色の変更を適用するにはどうすればよいですか？

gl_FragColor=texture2D(sm,txt).bgra;

@mrdoob。 修正。 これは人々が使用するものかもしれません。

gl_FragColor = texture2D( tEquirect, sampleUV )

var equirect_frag = "uniform sampler2D tEquirect;\nuniform float tFlip;\nvarying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvec3 direction = normalize( vWorldPosition );\n\tvec2 sampleUV;\n\tsampleUV.y = saturate( tFlip * direction.y * -0.5 + 0.5 );\n\tsampleUV.x = atan( direction.z, direction.x ) * RECIPROCAL_PI2 + 0.5;\n\tgl_FragColor = texture2D( tEquirect, sampleUV );\n}\n";

それを変更するためにそれにアクセスする方法は？

@danrossiJSでこのようなものをハックすることができます

THREE.ShaderLib[ 'equirect' ].fragmentShader = THREE.ShaderLib[ 'equirect' ].fragmentShader.replace( "texture2D( tEquirect, sampleUV );", "texture2D( tEquirect, sampleUV ).bgra;" );

シェーダーをTHREE.ShaderMaterialにコピーする必要があると思いますが、テクスチャを適用する方法がわかりませんか？

var equirect_frag = "uniform sampler2D tEquirect;\nuniform float tFlip;\nvarying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvec3 direction = normalize( vWorldPosition );\n\tvec2 sampleUV;\n\tsampleUV.y = saturate( tFlip * direction.y * -0.5 + 0.5 );\n\tsampleUV.x = atan( direction.z, direction.x ) * RECIPROCAL_PI2 + 0.5;\n\tgl_FragColor = texture2D( tEquirect, sampleUV );\n}\n";

                var equirect_vert = "varying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvWorldPosition = transformDirection( position, modelMatrix );\n\t#include <begin_vertex>\n\t#include <project_vertex>\n}\n";


                var uniforms =  {
                    tEquirect: { value: null },
                    tFlip: { value: - 1 }
                };

                var material = new THREE.ShaderMaterial( {
                    uniforms: uniforms,
                    vertexShader: equirect_vert,
                    fragmentShader: equirect_frag
                });

他の方法は、IOSのHLSストリームにのみ適用する必要があるため、柔軟性がありません。

実際、これはサファリでレンダリングされますが、FlipYの修正は壊れます。 逆さまに再生します。 頭がおかしくなります。 AppleとWebkitのおかげでこのすべての努力はははは。

var uniforms =  {
                    tEquirect: { value: texture },
                    tFlip: { value: - 1 }
                };

                var material = new THREE.ShaderMaterial( {
                    uniforms: uniforms,
                    vertexShader: equirect_vert,
                    fragmentShader: equirect_frag
                });

@WestLangleyパッチが機能していないようです。 色が反転しているはずですが、そうではありません。

gl_FragColor = texture2D（sm、txt）.bgra;

これは、[b] lueと[r] edを交換するための正しいシェーダーです。デフォルトの順序はrgbaであるため、bgraはそれらを交換します。

FlipY修正ブレーク

txt-> vec2（txt.x、1.0 --txt.y）たとえば

方法がわからない

http://jsfiddle.net/p2duvg51/14/

パッチが機能していないようです。 色が反転しているはずですが、そうではありません。

パッチの適用が遅すぎる可能性があります

@makcはい、私の生のwebglの例では、シェーダーでフリップを実行しています。

私のthreejsの例で投稿されたUVコードでフリップが行われた場合、シェーダーでフレームごとにフリップされないと思います。 処理するために計算された不要なものを削除すると思いました。

生のwebglの例では、頂点シェーダーで反転しています

attribute vec2 vx;varying vec2 tx;void main(){gl_Position=vec4(vx.x*2.0-1.0,1.0-vx.y*2.0,0,1);tx=vx;}

次に、フラグメントシェーダーで、これによりカラーチャネルが反転します。

precision mediump float;uniform sampler2D sm;varying vec2 tx;void main(){gl_FragColor=texture2D(sm,tx).bgra;}

それをthree.jsで複製しようとするのが今の問題です。

すみません、これは機能しているようですが、FlipY修正は機能しません。 bgraを追加するのを忘れました。

var equirect_frag = "uniform sampler2D tEquirect;\nuniform float tFlip;\nvarying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvec3 direction = normalize( vWorldPosition );\n\tvec2 sampleUV;\n\tsampleUV.y = saturate( tFlip * direction.y * -0.5 + 0.5 );\n\tsampleUV.x = atan( direction.z, direction.x ) * RECIPROCAL_PI2 + 0.5;\n\tgl_FragColor = texture2D( tEquirect, sampleUV ).bgra;\n}\n";

                var equirect_vert = "varying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvWorldPosition = transformDirection( position, modelMatrix );\n\t#include <begin_vertex>\n\t#include <project_vertex>\n}\n";




                var uniforms =  {
                    tEquirect: { value: texture },
                    tFlip: { value: 1 }
                };

                var material = new THREE.ShaderMaterial( {
                    uniforms: uniforms,
                    vertexShader: equirect_vert,
                    fragmentShader: equirect_frag
                });

デフォルトのtFlip値を1に変更すると、正しい方向に表示されるので、HLSのFlipY問題の別の修正オプションはありますか？

tFlip: { value: 1 }

ビデオはシミュレーターでのレンダリングを停止することを決定しましたが、少なくとも色の変化が見られます。 パッチをデバッグしても、シェーダーコードが確実に置き換えられますが、残念ながらパッチは機能しません。

その値でフリップを実行できるのは、負ではなく正の1だけであるようです。

古いデバイスが廃止されてIpad3のようになると、IOS10にアクセスできなくなりました。10.10でしか実行できないソフトウェアがあるため、外付けドライブで起動したmacOSにシミュレータをロードする必要があります。 このすべての妨害で楽しい時間。

フレームを更新して正しく回転しているかどうかはまだわかりません。

うまくいけば、この例はIOS10で機能します。これは私が今できる最善のことです。 Safariでは、反転した色が表示されます。

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

シェーダーマテリアルを使用すると、画像のスケーリングとジオメトリが台無しになり、カメラの回転がこのように機能しなくなります

camera.position.x = (Math.PI / 2);

このパッチを機能させるために試してみる必要があります。

これはまだカメラの位置を混乱させますが、うまくいくように見えました。 私はそれが実行可能な選択肢ではないと思います。 このようにするだけで、さらに多くのバグが発生します。 MeshBasicMaterialを使用した場合と同じようにはレンダリングされません。

THREE.ShaderLib[ 'equirect' ].fragmentShader = THREE.ShaderLib[ 'equirect' ].fragmentShader.replace( "texture2D( tEquirect, sampleUV );", "texture2D( tEquirect, sampleUV ).bgra;" );
                THREE.ShaderLib[ 'equirect'].uniforms.tEquirect = { value: texture };
                THREE.ShaderLib[ 'equirect'].uniforms.tFlip = { value: 1 };

                var material2 = new THREE.ShaderMaterial( {
                    uniforms: THREE.ShaderLib[ 'equirect'].uniforms,
                    vertexShader: THREE.ShaderLib[ 'equirect'].vertexShader,
                    fragmentShader: THREE.ShaderLib[ 'equirect' ].fragmentShader
                });

基本素材を使おうとしたらうまくいきません。 NS

THREE.ShaderLib[ 'equirect' ].fragmentShader = THREE.ShaderLib[ 'equirect' ].fragmentShader.replace( "texture2D( tEquirect, sampleUV );", "texture2D( tEquirect, sampleUV ).bgra;" );
                var material  = new THREE.MeshBasicMaterial( { map : texture } );

組み込みのシェーダーをハックしようとするのではなく、カスタムシェーダーを作成するだけです。

どうぞ！ 😀

const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight;

var camera = new THREE.PerspectiveCamera( 75, WIDTH / HEIGHT );

var scene = new THREE.Scene();

// geometry

var geometry = new THREE.SphereGeometry( 1, 32, 16 );

// material

var loader = new THREE.TextureLoader();
var texture = loader.load( 'https://threejs.org/examples/textures/2294472375_24a3b8ef46_o.jpg');

// material

var material = new THREE.ShaderMaterial( {
    uniforms: {
        texture: new THREE.Uniform( texture )
    },
    vertexShader: [
        "varying vec2 vUV;",
        "void main() {",
        "   vUV = vec2( 1.0 - uv.x, uv.y );", // fipY: 1.0 - uv.y
        "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
        "}"
    ].join( "\n" ),
    fragmentShader: [
        "uniform sampler2D texture;",
        "varying vec2 vUV;",
        "void main() {",
        "   gl_FragColor = texture2D( texture, vUV ).bgra;",
        "}"
    ].join( "\n" ),
    side: THREE.BackSide
} );

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

var renderer = new THREE.WebGLRenderer();
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );

function animate( time ) {
    requestAnimationFrame( animate );
    mesh.rotation.y = time * 0.0001;
    renderer.render( scene, camera );
}

animate();

https://jsfiddle.net/9jy92zxn/

黒い画面だけをレンダリングしません。

@danrossiそれは私のために働きます。

var material = new THREE.ShaderMaterial({
      uniforms: {
        texture: { value: texture }
      },
      vertexShader: [
        "varying vec2 vUV;",
        "void main() {",
        "   vUV = vec2( uv.x, 1.0 - uv.y );",
        "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
        "}"
      ].join("\n"),
      fragmentShader: [
        "uniform sampler2D texture;",
        "varying vec2 vUV;",
        "void main() {",
        " gl_FragColor = texture2D( texture, vUV  ).bgra;",
        "}"
      ].join("\n")
    });

色の種類と変数名を更新することを忘れないでください

ここにレンダリングされます...（Chrome 55、OSX）

この問題は、HLSストリームとSafari、特にiOSを使用したビデオテクスチャに関するものです：|

meshbasic_fragがどのように機能し、テクスチャがどのように適用されるかがわかりません。 それが使用しているものです。

使用または選択されていることがわからないequirect_fragプログラム。

gl_FragColor = vec4( outgoingLight, diffuseColor.a );

これが私が見るすべてです。

meshbasic_fragとequirect_fragを忘れるべきだと思います。 私のコードをベースとして使用して、これを置き換えてみてください：

var loader = new THREE.TextureLoader();
var texture = loader.load( 'https://threejs.org/examples/textures/2294472375_24a3b8ef46_o.jpg');

このようなもので：

var video = document.getElementById( 'video' );
var texture = new THREE.VideoTexture( video );

@mrdoob

裏側が問題を引き起こしていました。 このシェーダープログラムは確かに通常のプログラムよりもはるかにクリーンです。 違いはなんですか ？

カスタムシェーダーを使用すると、元のFlipY修正が失われます。

for (var i = 0; i < uv.count; i++) {
    uv.setY (i, 1 - uv.getY (i));
}

頂点コードを少し変更する必要があり、xが反転し、yが反転する必要がありました。 すぐにそれを上げます。

var uniforms = {
    texture: { value: texture }
};

var vertexShader = [
    "varying vec2 vUV;",
    "void main() {",
    "   vUV = vec2( uv.x, 1.0 - uv.y );", // fipY: 1.0 - uv.y
    "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
    "}"
].join( "\n" );

var fragmentShader = [
    "uniform sampler2D texture;",
    "varying vec2 vUV;",
    "void main() {",
    "   gl_FragColor = texture2D( texture, vUV ).bgra;",
    "}"
].join( "\n" );

var material = new THREE.ShaderMaterial( {
    uniforms: uniforms,
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    //side: THREE.BackSide
});

このシェーダープログラムは確かに通常のプログラムよりもはるかにクリーンです。 違いはなんですか ？

魔法！ 😉

@mrdoobありがとうチャンピオン。 ノイズについては申し訳ありませんが、これについてはAppleをもう一度非難します。

したがって、等長方形のビデオの場合、これを使用するようにデモを更新する必要はありませんか？ したがって、MeshBasicMaterialで使用されているシェーダープログラムは、このようなビデオテクスチャには不要ですか？ ブラウザやさまざまなビデオ形式でテストします。

閉じましょうか。

これが更新されたデモです

http://dev.electroteque.org/webgl/threejs-bgra.html

したがって、等長方形のビデオの場合、これを使用するようにデモを更新する必要はありませんか？ したがって、MeshBasicMaterialで使用されているシェーダープログラムは、このようなビデオテクスチャには不要ですか？

MeshBasicMaterialはより柔軟性があり、シェーダーを作成する必要はありません。 この特定のケースでは、問題を回避するためにカスタムシェーダーを作成する方が簡単でした。

閉じましょうか。

うん！

IOS10では正常に動作しています。シミュレータでフレームが更新されていないことだけです。 ハードウェアを待つ必要があります。 他のチケットを閉じます。

var vertexShader = [
    "varying vec2 vUV;",
    "void main() {",
    "   vUV = vec2( uv.x, uv.y );", // fipY: 1.0 - uv.y
    "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
    "}"
].join( "\n" );

var fragmentShader = [
    "uniform sampler2D texture;",
    "varying vec2 vUV;",
    "void main() {",
    "   gl_FragColor = texture2D( texture, vUV );",
    "}"
].join( "\n" );

フリッピーを少し調整するだけで、同じプログラムがwebmを使用してchromeで動作しています。

@mrdoobこのシェーダーは、ビデオテクスチャを備えたすべてのブラウザで機能すると思います。 フリップ修正「1.0--uv.y」は、SafariのHLSにのみ必要です。 カラーチャネルの反転は、HLSを搭載したIOS10でのみ必要です。

CORSプロキシを含む回避策のかなりクレイジーなレイヤー。

これは、meshbasicmaterialが提供するシェーダーよりもパフォーマンスが優れていると思います。 それでは、これをビデオテクスチャの標準にする必要がありますか？ 回転は頂点コードで機能するようです。

こんにちは、みんな
HLSライブストリームを表示するthree.jsを使用して360vrプレーヤーを作成しようとしています（.m3u8はhls.jsで再生されます）
webglが有効になっているSafariosxで動作しますが、ipad 10.2では、すべての試行が黒いキャンバスで失われます（サウンドは機能しています）
vr360モードを無効にすると、ビデオストリームはすべてのデバイスで正常に機能します。
提案された方法のいくつかを試しましたが、まだ黒いキャンバスのレンダリングがあります。
誰かが回避する方法を知っていますか？

FlipYとカラーチャンネルの反転の修正はこのスレッドにあります。

私が追跡したWebkitのバグは古く、結局はそれについての傲慢さを取り除いてしまいました。 それはまだ開いていますが、誰もそれらを見ることはありません。

SafariのFlipY修正が必要です。 したがって、three.jsテクスチャではまだ無効にします。

これが、プレーヤーソリューション用に考案した正式なes6メソッドです。 このがらくたを狩ってから数ヶ月経っても、私はまだ悪夢を抱えています。

シェーダーマテリアルソリューションを考案してくれたチャンピオンのmrdoobに感謝します。 現在、すべてのブラウザでこれを使用しています。 これは、生成されるシェーダーよりも単純なシェーダーです。 ビデオテクスチャ専用です。

 static getVertexShader(unflipY) {
        return [
            "varying vec2 vUV;",
            "void main() {",
            "   vUV = vec2( uv.x, " + (unflipY ? "1.0 - uv.y" : "uv.y") + ");", // fipY: 1.0 - uv.y
            "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
            "}"
        ].join( "\n" );
    }

    static getFragmentShader(invertColour) {
        return  [
            "uniform sampler2D texture;",
            "varying vec2 vUV;",
            "void main() {",
            "   gl_FragColor = texture2D( texture, vUV )" + (invertColour ? ".bgra" : "") + ";",
            "}"
        ].join( "\n" );
    }

    static createShaderMaterial(texture, unflipY, invertColour) {

        texture.flipY = !unflipY;

        if (invertColour) {
            texture.format = THREE.RGBAFormat;
        }

        return new THREE.ShaderMaterial( {
            uniforms: { texture: { value: texture } },
            vertexShader: WebVRUtils.getVertexShader(unflipY),
            fragmentShader: WebVRUtils.getFragmentShader(invertColour)
        });
    }

利用方法

 let invertColour = false;

        if (WebVRUtils.isSafari) {
            this.hasHLS = hasHls;
            invertColour = hasHls && WebVRUtils.isIpad;
        }

        this.material = WebVRUtils.createShaderMaterial(this.texture, this.hasHLS, invertColour);

three.jsの_gl.pixelStorei（_gl.UNPACK_FLIP_Y_WEBGL、texture.flipY）の行にコメントを付けると、Safariでビデオが表示されます（10.0.2、以前のバージョンでは、開発ツールでwebglを有効にするだけで済みました。オプションは現在利用できません）が、iPadとiPhone（これが私のターゲットです）でまだ問題があります
シェーダーマテリアルソリューションについて、コードに正確に適用する方法がわかりません...
ご協力ありがとうございました

MacOs Safari 10でも、テストでFlipYを無効にする必要がありました。

はい、私の場合も同様です（以前の9.xxバージョンを除く）
しかし、解決策が私の解決策ではないように、モバイルデバイスでプレーヤーを使用する必要があります:-(

IOSではFlipY修正とカラーチャネル反転の両方が必要です。 そして、IOS10の場合のみ。IOS9では良くありません。これにより多くの古いデバイスが除外されます。 Appleが私のIpad3のようにそれらを減価償却したので、IOS 10はインライン再生をサポートしているので、とにかく望ましいでしょう。

私は今iOSでこれを修正することを検討しています。 しかし、私はコメントに少し混乱しています。

HLSビデオの場合：

• iOSは間違った順序でカラーチャンネルを提供しています（rgbaの代わりにbgra）。 それ以外の場合、値は正しいです。
• macOSは、X軸を反転する必要があるテクスチャを生成しています。 これは、setPixelStorei（UNPACK_FLIP_Y_WEBGL、true）を使用して回避できます。
• iOSは、X軸を反転する必要のあるテクスチャを生成していますが、上記の回避策は機能しません。

これは正しいです？

答えは上のこのチケットにあります。

皆さんへのヘッドサップと同じように、明らかに最新のiOS 10.3.3アップデートでbgrの

予想通り。 かなり標準的です。 頭を上げてくれてありがとう。

彼らは正しいことをし、私が作ったチケットを更新し、開いたままにして古くする必要があります。 修正がある場合にすべての開発者を更新します。 彼らはそうではありません。 では、今すぐマイナーバージョンをチェックする必要がありますか？

IOS 11にはCORS修正があるはずですが、まだ修正されていません。

なんとかxcode9ベータ版を入手できました。 10.3.3シミュレーターには10.3.1と11しか付属していません。11でテストしましたが、逆のrgbaがまだ必要なようです。 それ以外の場合は緑色のディスプレイが表示されるか、まったく表示されないはずです。 修正を無効にして、さらにテストを実行する必要があります。

IOS11シミュレーターは不発です。 10.3.3IOSシミュレーターはありません。 IOS11は明らかにCORSを修正しています。

iOS 11が公開されたので、私はいくつかのテストを実行していて、iPhone iOS 11のこのスレッドで修正を使用することができません（まだiPadを試していません）。

HLSを搭載したiPhoneおよびiPad上のiOS10.3.3で（CORSハック、FlipY、およびカラーフィックスを使用して）動作させることができます。
iPhone iOS 11では、HLSを使用した黒い画面が表示されます（CORSハック、FlipY、およびカラーフィックスを使用）。 他に修正すべき点があると思いますが、今のところ私はそれに指を置いていません。

CORSの問題に関しては、iOS 11では少なくともMP4プログレッシブダウンロードでは改善されているようですが、上記の理由でHLSを確認できません。

誰かが幸運を持っている場合は更新してください：/

私はIOS11を入手できるように真新しいiPadを入手するために最善を尽くしています。

エミュレータには修正がないため、失敗しました。

そこでカウンターハックをしなければならないかどうかを確認する必要があります。 または、RGBカラーチャネルを元に戻すことができる場合。

HLSのブラックレンダリングは良いスタートではなく、リグレッションを元に戻すのに何年もかかる通常の妨害です。 それがIOS9で起こることです。

CORSはIOS11で修正されているはずであり、プロキシは必要ありません

@danrossi iOS 11でもこの問題に直面しています。この問題の解決策を思いついた場合は、お知らせください。 iOS 10は、CORS修正とFlip Yで引き続き正常に機能しますが、iOS11はオーディオのみを再生します。

私はまだIOS11で新しいiPadを入手する必要があります。 HLSはIOS11ベータシミュレーターで動作していますか？ CORSに関連している可能性があります。 RGBチャンネルフリップは反転した色を表示します。 黒はCORSに関連している可能性がありますか？

CORSプロキシを使用せずに使用してみましたが、同じ問題が発生します。 私もFlipYを使わずに試しましたが、何も変わりません。 音声のみ、ビデオなし：/

iOS11デバイスでも同じ問題があります。音声のみで、ビデオはありません。この問題を解決した人はいますか？

ビデオを2Dキャンバスに描画し、その2Dキャンバスをwebglのテクスチャとして使用することで機能しました。

iOS11で2Dキャンバステクスチャを正しく取得できません。コードを投稿していただけますか？

それは非常に悪い考えです。 キャンバスの描画はプロセッサを集中的に使用します。

この問題に関して、Webkitチケットを更新しました。 彼らはまったくそれに対処していません。 回避策にも完全なシェーダーとソースコードを提供しました。 あなたが主張するものは現在機能していません。

他の誰かが問題を抱えていることを私は知っています。 しかし、実際の新しいデバイスを入手するまで、まだ適切にテストすることはできません。 シミュレーターはそれを正しく表示しています。 計画された時代遅れに直面しており、iPhone5でさえIOS11を入手することはできません。

こちらがまたチケットです。 https://bugs.webkit.org/show_bug.cgi?id=163866#c17

@LoveLetterIloveUは私のサンプルコードです： https ： //htmlvideocanvas-sibabi.c9users.io/hello-world.html（iOSでのみ開く）
@danrossiは正しいです、それは最良の解決策ではありません。 基本的には、ポインタをバインドするのではなく、バイト配列のメモリコピーを実行します。 ただし、アップルがプロジェクトを維持している間、それは仕事をします。 私はまだこのアプローチを評価しており、mp4フォールバックメソッドも準備ができています。

もちろん、シェーダーを微調整するすべての人の助けを借りて、上記の解決策を見つけるために丸2か月を費やしました。ありがとうございます。 それは、彼らが別の回避策を見つけることに対抗するためのより多くの時間を意味します。

あるといいのですが。

彼らは、flipy / HLS / webglの問題を修正しようとはまったくしていません。私が作成したチケットで、確認できます。

結局、彼らはCORSの問題を修正しただけです。 彼らがDashを機能させることができたかどうかはまだわかりませんが。

Apple / webkitは私の側のとげです。 それは私が行って自分でそれを修正しようとしなければならないことを意味するかもしれません、そして私はc ++をしません。 直したら本当におもしろいですが、髪はそのままにしておきたいです。

FlipYが有効/無効になっていることを確認するために、誰かがコードを投稿して私に見てもらうことはできますか？

ここに私のコメントを参照してください。 私はこの妨害の混乱の絶対的な根性を持っていました。 テクスチャでflipYを無効にすると、画像が表示されますが、上下が逆になります。 ここは黒いフレームです。 スタート地点に戻る。 それらはIOS9で問題であったリグレッションを引き起こしました。

https://bugs.webkit.org/show_bug.cgi?id=163866#c19

見られたり、対処されたりしたことのない元のWebkitチケットを閉じます。 そして、証拠を集めるのに時間がかかるので、すぐに新しいものを始めます。

元のFlipYの問題を超えて移動しました。 OSをリリースする前に、HLSがWebGLで動作することを確認することすら気にしないようです。

元のWebkitチケットを閉じて、新しいチケットを開始しました。具体的には、webglを使用したHLSビデオテクスチャが完全に壊れており、回避策はまだありません。 元のFlipYの回避策はもう関係ありません。

私はすべてのwebkitwebgl適合性テストがMp4を使用していることを発見しました。

彼らはApple独自のストリーミングフォーマットでテストすることをこれまで気にしませんでした。 したがって、なぜそれが壊れていて、まったく新しいIOS11アップデートでまだ壊れているのか。

詳細はこちらをご覧ください

https://bugs.webkit.org/show_bug.cgi?id=163866#c22

@danrossi新しく開いたWebkitのチケットへのリンクはありますか？ 私はiOS11でこの問題に遭遇したばかりで、開発を追跡したいと思っています。

私は彼らのために彼らの仕事に自己資金を提供しています。 Khronosテストmp4ファイルから生成されたHLSを使用して適合性テストを実行しています。 合格したと主張していますが、テストでは何かが表示されているかどうかを証明できません。 キャンバスはここにも表示されません。 実際、私はテストがIOSで正しく機能するとはまったく思いません。 ログはありません。

HLSテクスチャが機能しないことを証明するには、独自のテストファイルを使用する必要があります。 他のテストファイルを作成しました。アップロードしてチケットを作成します。

必要なwebglパラメータ、または前回のように無効にする必要がある別のパラメータがあることを期待しています。

Webkitのテストファイルで見る限り、OKです。 これらはIOSテスト用に設計されていません。 ユーザーがクリックして再生する機能はありません。 Mp4は、属性が指定されていなくても、IOS 11で発見した何らかの理由で自動再生できますが、HLSはまだ自動再生できません。

特にIOS向けにテストが行​​われているとは思いませんし、HLS向けにテストが行​​われていないことは間違いありません。

したがって、問題。 それは悪いことを超えています。

チケットを提出するために必要なものがあります。

私が見る限り。 webglwebkitテストには欠陥があります。 彼らはwebglキャンバスの出力を気にしません。 彼らは非常に小さなサイズでプレビュー出力としてビデオをキャンバスに描画しています。

彼らはwebglキャンバスを持っていますが、そのサイズは非常に小さいので、レンダリングされているかどうかさえわかりません。

HLSのテストを変更する必要がありましたが、合格しませんでした。 そして今、私はwebglキャンバスのサイズを大きくしました。それは黒です。

ユーザークリックを追加するようにコードを変更した後、テストは実際にIOSで実行を開始します。

私が見る限り、HLSのテストはこれまで行われておらず、テストには欠陥があります。 そして、それは絶対にすべての人を妨害しました。

どうぞ。 私は本当にAppleに対する忍耐力を失い、彼らの問題を解決してテストを実行するためにどれだけの個人的な仕事が必要かを失っています。

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

2日間で、それを見る緊急性はありません。 私はこれが決して対処されないだろうと思う。 CORSを修正するには、何年もかかり、IOSの複数のバージョンとデバイスのアップグレードが必要ですか？

webglフラグとシェーダーコードを試して、何かできるかどうかを確認します。

そこに行って騒音を出してください。 それはまだ見られていないので。 彼らが実際に自分のブラウザでHLSをテストすることをまったく気にしていないように。

@jernobleは、この問題についてWebkitチームで誰が私たちを助けてくれるかを指摘できますか？ 誰かがそれを調べたり、私たちに最新情報を教えてくれたら本当にありがたいです。 ここでのGitHubの問題は非常に長いですが、ここに要約されています： https ：

こんにちは@radiantmediaplayer。 @grorgと私はどちらも、この問題についてpingを実行するのに適した人物です。 私はそのWebKitバグに自分自身をCCし、それを追跡するレーダーを作成します。

やあみんな。 @sorobで説明されているように、一時的なキャンバスを使用してhttp://redgetan.cc/demo/ios_11_hls_webgl_canvas_workaround/index.htmlで機能していることがわかります。 私はThree.jsに精通していないので、単純なjavascriptです。

CanvasRenderer。 それがソフトウェアレンダリングです。 生産に値するものではありません。

私はこれについて@danrossiと

@danrossiこの問題が解決されたことに気づきました。 もう一度開けていただけませんか？

真新しい問題はここにあります。 Three.JSとは関係ないので、アーカイブ用に保管しておいたと思います。

必要なテストのレベルは非常識でした。 IOS10の回避策を見つけるように私の背中を壊した。 そちらをご覧ください。

これまでのところ、これを回避するものはありません。 誰かがようやく見ていて、私たちのコントロール下にありません。 HLSを表示するテクスチャのコンテキストへの共有参照と関係があるのは、それを修正する可能性のあるMp4とは異なります。 私が集まる限り、彼らは実際にそれをするために時間を費やさなければなりません。 私はWindowsを使用しているので、このようなビルド環境をセットアップする手段がありません。

しかし、Webkitコードを見ると、IOS10でHLSに奇妙な色の問題が発生した理由がわかります。 色空間コードを使用しません。 したがって、IOS10 / Safariの両方の問題を回避するためのコード。

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

やあ。 私自身、IE11ビデオテクスチャサポート用のキャンバスレンダラーをロールバックして実装する必要があるようです。 WebGLでは機能しません。 誰かがそれについて尋ねていました。

私はそれが見られるのにかかっている率で計算します、修正するのに約2年かかるかもしれません。

IOS 11は、私がHLSで考えているソフトウェアレンダリングに苦しむ必要があります。 ビンでは、IOS全体がVR用です。 これは自分で実装します。

@ redgetan 、

キャンバス3のデモでは、レンダリングされている2Dビデオのみが表示されます。

申し訳ありませんが、webglレンダリングを使用していますが、テクスチャ画像ソースとしてキャンバスを使用しています。 私がそれを複製できるかどうかを確認します。 キャンバスをテクスチャとして使用すると、レンダリングと回転が正しく行われません。

どういうわけか私はこれをしなければなりませんでした。

通常どおりwebglレンダラーを使用します。 しかし、キャンバスのテクスチャとビデオの描画では、寸法を設定する必要がありました

imageContext.drawImage( video, 0, 0, image.width, image.height );

現在、正しくレンダリングされています。 IOS11でテストを実行します。

@danrossiは、iOS 11でどのように動作するかを教えてくれます。私は、ある時点で実際にその道を進む必要があるかもしれません。

大丈夫ですよ。 動作するようであれば、すぐにオンラインでfps統計ビューを使用した基本的なテストを追加します。 今は何か必要かもしれません。

IOSでプロセッサのパフォーマンスを確認する方法はありますか？

キャンバステクスチャテストを行いました。 動作していますが、解像度の高いビデオを使用すると転倒する可能性があります。

このHLSは低品質であるため、40fpsを維持しています。 より大きな解像度のmp4だけでなく、低品質も30fpsにとどまりました。

本番解像度ファイルは、10fpsを取得する可能性があります。 これは新しいIpad用です。

http://dev.electroteque.org/webgl/three-canvas.html

この問題は、現在このページで直面している問題と何か関係がありますか： https ：

MacまたはmacOSデバイスのサファリブラウザで開きます。 iPadまたはiPhoneは、ChromeブラウザまたはMozillaを使用している場合でも、この1ページを処理できません。

黒いページが表示されますが、Macの通常のChromeでは機能します

@vongohren macOSSafariとこのチケットで作成したシェーダーを使用してHLSで発見したFlipYの回避策を使用する必要があります。

ただし、Webkitチケットに戻ったところ、10.13のFlipYの問題が修正されたとのことです。 これはハイシエラだと思います。 私はクラウドベースのmacOSを使用しているので、それをテストする機会はありません。

これには、10.13のFlipY回避策を必要としないために、さらに別のプラットフォームバージョンチェックが必要になります。 したがって、バージョン13より前のものはすべてそれを必要とします。 複数のバグを回避するために、macOSとIOSに対して約4つの異なるプラットフォームとブラウザのバージョンチェックがあります。 IOS 11のチェックでは、ソフトウェアテクスチャレンダリングをオンにします。

10.13を確認できれば、これが役立つかもしれません。

これが私のすべてのチケットの詳細です。

https://bugs.webkit.org/show_bug.cgi?id=179417#c8
https://bugs.webkit.org/show_bug.cgi?id=176491

https://bugs.webkit.org/show_bug.cgi?id=180863#c3

@danrossi Ivは10.13を取得しましたが、テスト可能なデモを取得しましたか？

現在使用しているthree.jsバージョンは、これらの修正の新機能であるため、どこに適用するかわからない。
data.flipYという名前のデータを見つけ、falseに設定しました。 しかし、私のアプリには何もしませんでした。

このライブラリを介してthree.jsを使用しています： https ：

CORSの問題？

これは機能しますか？

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

またはこれ

http://dev.electroteque.org/webgl/three-hls-flipy.html

テストファイルの私の膨大なリストはそれらのチケットにあります。

FlipYはテクスチャで無効にできます

texture.flipY = false;

すべてがローカルにあるため、corsが影響を受ける理由がわかりません。 しかし、これら2つのリンクは、Mac 10.13では、サファリとクロームの両方で黒で表示されます。

そして、flipY機能は、単に画像を好転させるのではなく、多くのことをしませんでした。 でもまだ黒かった

10.13では、FlipYの回避策が壊れているIOS11と同じ問題が発生しているようです。 これは良い情報です。 報告すべきさらに別のバグ。 それはとても厄介で、私を狂わせます。 これはIOSチケットで更新します。 10.12では、FlipYバグを回避し、別のチケットを作成する必要があります。

だから今私のVR機能のように。 IOS 11および10.13のプラットフォームバージョンチェックを実行し、hlsのソフトウェアレンダリングキャンバステクスチャモードを提供する必要があります。

これは、機能チェック、特にcorsサポートまたはcorsプロキシソースの使用に使用している静的ユーティリティです。 明らかに、IOS 11のようなソフトウェアレンダリングを一時的にオンにするには、バージョンが13よりも大きいかどうかを確認する必要があります。

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

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

        if (hasCORS) {

            //if (_isSafari = WebVRUtils.safariCheck(userAgent)) {
            if (_isSafari) {
                return WebVRUtils.isNewSafari(userAgent);
            }

            //cors support check for IE 11 support. 
            _corsSupported = true;

            return true;
        }

        return false;

    }

static isNewSafari(userAgent) {
        const osxVersion = /Mac OS X (10[\.\_\d]+)/.exec(userAgent);

        if (osxVersion) {

            //check for safari test to fix HLS problems.
           // _olderSafari = _browserVersion.match(/(\d+).(\d+).?(\d+)?/)[1] <= 10;

            const version = osxVersion[1].split("_")[1];
            return +version >= 12;
        }

        return WebVRUtils.isNewIOS(userAgent);
    }

    static isNewIOS(userAgent) {
        const version = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1];
        _isLatestIOS = (+version >= 11);
        return _isLatestIOS;
    }

あなたはこれについていくつかの素晴らしい仕事をしました、あなたがチケットを整理することを願っています：D

これがキャンバステクスチャの回避策です。 私はIOS11用にそれをアクティブにする必要がありました。私はそのmacOS13バージョンチェックを行い、それに対してもそれを有効にする必要があるかもしれません。 あなたがflipYの回避策が10.13のために壊れていると考えるなら？ 私は彼らに報告しなければなりません。

私の機能を含むすべての人のソフトウェアをAppleOSでかろうじて機能させる以外は、私はそれから何の利益も得られません。

これが私の完全な統合です。アップルの修正や回避策などの作業があります。 キューブマップビデオをサポートするようになりました。

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

これは、私が数年前に最初に報告して以来、何もせずにそこに座っていたので、継続しています。

これはあなたのために働きますか？

http://dev.electroteque.org/webgl/three-canvas.html

ここでキャンバステクスチャの回避策を言うとき、どこを指しますか？

そのflowplayerは甘く見えます！ たくさんの使用法を見たことがありますか？

このリンクには何が表示されますか： //dev.electroteque.org/webgl/three-canvas.html？
Chromeで開くと-バージョン63.0.3239.84（公式ビルド）（64ビット）-macOS 10.13.1で：
左隅にFPSメーターがあり、中央下にARをアクティブにするというボタンが付いた黒い背景が表示されます
それをクリックすると、設定ホイールと戻るボタンのある分割画面が表示されます。 しかし、キャンバス自体は真っ黒です。

macOS 10.13.1のSafariバージョン11.0.1（13604.3.5）で開くと：
左隅にFPSメーターがあり、中央下にARをアクティブにするというボタンが付いた飛行ビデオが表示されます。 360度完全に体験するためにスクロールすることもできます。
VRボタンをクリックすると、設定ホイールと戻るボタンのある分割画面が表示されます。 そして、ビデオキャンバスはスクロールできませんが、それはジャイロが制御するためのものだと思います。

しかし、VRモードから戻るボタンを押すと、ビデオがVRモードでスタックし、スクロールできなくなり、VRモードが開始されたビューでスタックします。

このデモは、SafariでのHLSレンダリング用です。 あなたがflipY修正デモがSafariで動作しないと思うなら

http://dev.electroteque.org/webgl/three-hls-flipy.html

次に、10.13およびIOS 11 Safariでキャンバステクスチャを使用する必要がありますか？

http://dev.electroteque.org/webgl/three-canvas.html

2つの間を教えてください。 回転コントロールは、黒いフレームではなく、レンダリングするだけではかまいません。

ここで参照しているIOS11 Webkitチケットに追加したので、10.13について重要です。 HLSレンダリングを完全に壊した「回帰」を想定しています。

@danrossiは両方ともサファリで動作し、

しかし、クロムに取り組んだものはありませんでした。

わかった。 素晴らしいレポートを元に戻す必要があります。

それで、これはまだ問題が正しいですか？

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

その場合は、macOSの標準としてFlipYの回避策を使用してください。

このページのHLSデモは、両方のブラウザで機能するはずです。 hlsプラグインを使用してChromeのメディアソースストリーミングを使用します。 また、macOSのFlipY回避策もあります。

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

あなたは正しいです
http://dev.electroteque.org/webgl/three-hls.html
これはクロームでもサファリでも機能しません

リンクフロープレーヤーは、両方のブラウザで機能します

チャンピオンに感謝します。 チケットを再度更新するのに十分な情報がありました。 macOSSafariの問題はIOS11の問題とは異なります。

IOS11のキャンバステクスチャの例を使用する必要があります。

また、macOS Safariの場合、テクスチャでFlipYを無効にし、シェーダーのY位置を逆にして、正しい方向に向けます。 IOS 10HLSのフラグメントシェーダでもカラーチャネル反転を行う必要があります。 シェーダーコードは上にあります。

だから私は今朝、上記の回避策でiOS 11のケースをクラックすることができたときの約1Hに満足しました（ @danrossi http://dev.electroteque.org/webgl/three-canvas.htmlであなたの例からインスピレーションを得ました） ...しかし、それから私は眼鏡をかけ、砂漠の太陽の下で氷の立方体のように感じました。

これは、iOS11.2.1を搭載したiPhone6 Plusで得た結果です。アニメーションは実際にはかなりスムーズですが、見苦しく、ピクセル化され、エイリアス化されています...

予想される動作は次のとおりです（Android8および最新のChromeを搭載したNexus5X-これは上記の回避策を使用しません）。

私たちのユースケースは360HTML5プレーヤーであり、上記の両方のサンプルで、ビデオは同じHLSシングルビットレートフィードですhttp://www.rmp-streaming.com：1935 / vod / sea360.mp4 / playlist.m3u8

回避策（コードについては以下を参照）をAndroidに適用すると、同じ醜いレンダリングが得られます。 これは、この新しい回避策で得られるはずのことですか、それとも何かが足りないのでしょうか。
いくつかの設定で遊んでみましたが、目立った改善は見られません。

    // image 
    this.image360 = document.createElement('canvas');
    this.image360.width = this.width;
    this.image360.height = this.height;
    this.imageContext360 = this.image360.getContext('2d');
    this.imageContext360.fillStyle = '#000000';
    this.imageContext360.fillRect(0, 0, this.width, this.height);
    // texture 
    this.texture360 = new THREE.Texture(this.image360);
    this.texture360.format = THREE.RGBFormat;
    this.texture360.minFilter = THREE.LinearFilter;
    this.texture360.magFilter = THREE.LinearFilter;
    this.texture360.generateMipmaps = false;
    this.texture360.wrapS = THREE.ClampToEdgeWrapping;
    this.texture360.wrapT = THREE.ClampToEdgeWrapping;
    this.texture360.flipY = true;
    this.texture360.needsUpdate = true;
    // mesh
    let geometry = new THREE.SphereGeometry(500, 80, 50);
    geometry.scale(-1, 1, 1);
    let material = new THREE.MeshBasicMaterial({ map: this.texture360 });
    this.mesh360 = new THREE.Mesh(geometry, material);
    this.scene360.add(this.mesh360);
    // renderer
    this.renderer360 = new THREE.WebGLRenderer({ antialias: false });
    this.renderer360.setClearColor(0x101010);
    this.renderer360.setPixelRatio(window.devicePixelRatio);
    this.renderer360.setSize(this.width, this.height, true);

私はこれをやっています。 私はこれがそれを正しくサイズ設定するべきであるとかなり確信しています。

video.addEventListener("loadeddata", function() {
                      video.width = THREE.Math.ceilPowerOfTwo(video.videoWidth);
                      video.height = THREE.Math.ceilPowerOfTwo(video.videoHeight);

                      image.width = video.width;
                      image.height = video.height;
                      //image.width = video.videoWidth;
                      //image.height = video.videoHeight;
                      //imageContext.fillRect( 0, 0, video.videoWidth, video.videoHeight);
                      imageContext.fillRect( 0, 0, image.width, image.height);


                      //console.log(video.videoWidth);
                });

だから私は少し突っついた後にそれを釘付けにしました。 私たちの構成では、オフドームキャンバスは、正しくレンダリングするために、再生されている現在のHLSレンディションの正確なサイズである必要があるようです（したがって、ABRの場合、レンディションが変更されるたびに更新する必要があります）。 私たちのテストでは、これはiOS 11で問題なく動作することが示されています（問題がないよりはましです）。 それが他の誰かを助けるならば、これをここに残してください。

ええ、それで私はビデオの幅を取得するためにloadedataイベントでそれを行います。 私は前にこれを理解しました、そしてそれはあなたの同じ問題を抱えていました。

ただし、ネイティブHLSの場合、ビットレートが変更されたときにイベントは発生しませんか？ 個人的には一度だけ設定しています。 Appleの回避策の量はすでに十分に信じられないほどです。

私が知っている、ABRHLSのレンディションの変更を検出するために使用できるSafariによって提供されるイベントはありません。 オフドームキャンバスの幅と高さを各AnimationFrameのvideo.videoWidthとvideo.videoHeightで更新するだけです（これはパフォーマンスの観点からはおそらく理想的ではありませんが、この段階では機能しており、次の段階まで解決します。オプションが利用可能になります）。 私たちのテストでは、新しいレンディションが表示されたときに、それに応じてvideo.videoWidthとvideo.videoHeightを更新する必要があることが示されています。

ええ、それが十分にハッキーである価値があるもののために。 そのため、特にフレームコールバックに条件ステートメントがある場合は、これを行うのは過剰です。 今のところうまくいくものは何でも私は推測します。

彼らはまだレンディション変更イベントを提供することはできません。 仕様はあると思いますが、実装されていませんか？

古いSafariのバグを回避するためのCORSプロキシ、HLSのフリッピーな修正、そして今ではこれで十分です。

すべてが機能していることをうれしく思います。 チケットの更新は、今月かそこらでまだ見ていません。

品質切り替えイベントに関するHTML5ビデオ仕様に何かを見たのを思い出せません。 Appleが管理するHLS仕様がありますが、品質の切り替えが発生したときにクライアントが何をすべきかについては説明されていません。 hls.jsのようなライブラリにはこれが実装されていますが、SafariのネイティブHTML5ビデオへのHLSでは利用できません。

一定の間隔でvideo.videoWidthにクエリを実行することで、ハックを「ポリフィル」してレンディションの変更を検出できることに気付きました。変更が検出されたら、サイズ変更コールバックを呼び出します。 これにより、負担が軽減されます。 これは、後の段階でプレーヤーに実装する予定です。

@radiantmediaplayer 「サイズ変更」イベントを使用して、基になる.videoWidthプロパティと.videoHeightプロパティへの変更を検出できるはずです。

こんにちはみんなここに私のコメントを参照してください。 動作しています。

テストを行い、動きを経験していたなんて試練だったのでしょう。 適切なフィードバックや応答を得るためだけに。 私は真剣に終わりました！ これ以上の回帰はありません!!

OSX 11.3ベータ版をインストールすると、動作します。 以前のOSX11にはソフトウェアレンダリングが必要であり、OSX10にはflipYとカラーフィックスが必要です。 複雑な互換性の混乱とプラットフォームバージョンの検出が必要です。

Safari macOSにはまだFlipYの問題があり、そこでも応答がありません。別のチケットに含まれています。 PCワークステーションにmacOSをインストールできるようになるまで、HLSを適切にテストすることはできません。 HLSはvmwareでの再生がブロックされています。

https://bugs.webkit.org/show_bug.cgi?id=179417#c43

FlipYの回避策は、OSX 11.3でも必要ありませんが、前に述べたと思います。

これが私の完全なIOSとSafariの互換性チェックです。CORSから始まります。

頭がおかしくなります。 これは非常識です。 私は将来を保証し、IOS12以外のものを含める必要がありました。

統合に取り組んでいます！ macOSで何が起こっているのかまだ確認できません。

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

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

        if (hasCORS) {

            //if (_isSafari = WebVRUtils.safariCheck(userAgent)) {
            //Safari still reports CORS support regardless a bug
            if (_isSafari) {
                return WebVRUtils.isNewSafari(userAgent);
            }

            //cors support check for IE 11 support. 
            _corsSupported = true;

            return true;
        }

        return false;

    }

static isNewSafari(userAgent) {
        const osxVersion = /Mac OS X (10[\.\_\d]+)/.exec(userAgent);

        if (osxVersion) {

            //check for safari test to fix HLS problems.
           // _olderSafari = _browserVersion.match(/(\d+).(\d+).?(\d+)?/)[1] <= 10;

            const version = osxVersion[1].split("_")[1];
            return +version >= 12;
        }

        return WebVRUtils.isNewIOS(userAgent);
    }

static isNewIOS(userAgent) {
        const platform = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/),
        version = +platform[1];

        _isLatestIOS = version >= 11;

        //if greater than 11.3 or 12
        _iOSHlsSupported = (_isLatestIOS && +platform[2] >= 3 || version >= 12);

        return _isLatestIOS;
    }

使用法

 set hls(value) {

        //if had a HLS source and the current playlist source isn't clear scene and revert the material.
        if (this.hasHls && this.isSafari && !value) {
            this.clearScene();
            this.initScene(value);
        }

        //flipY fix
        this.hasHls = value && this.isSafari;
        //IOS10 colour inversion fix
        this.invertHLS = this.isIpad;

        //if we have hls and IOS 11 or greater
        if (this.hasHls && WebVRUtils.isLatestIOS) {

          //IOS 11.3 or greater disable flipY and colour inversion fixes
          if (WebVRUtils.iOSHlsSupported) {
              this.hasHls = false;
              this.invertHLS = false;
          } else {
            //anything below IOS 11.3 use software rendering
            this.config.software = true;
          }

        }
    }

最後の重要な点を修正します。 IOS HLSレンダリングの実装は、わずかな時間で実行されており、非常に扱いにくいです。 レンダリングは、loadedataの後に開始する必要があります。

teximage2dエラーが発生するとすぐに、それ以上のレンダリングは行われず、黒のレンダリングだけで、修正は行われなかったように見えます。

ビデオデータがあるとすぐにレンダリングが開始されれば、問題ありません。 11.3以前は問題ありませんでした。

ビデオが再び機能しているようです（一時的なキャンバスの修正なし）。 最新のiOSバージョン11.3で検証済み（iphone 6s、7でテスト済み）。

はい、2月15日に更新したと思います。11.3で再び作業します。 更新はありません。 具体的に確認する必要があり、機能していました。

iOS 11.3（および同等のmacOSリリース）のビデオ->テクスチャに関する多くの問題を修正しました。 バグをクローズ/更新しなかった場合は申し訳ありません。

それでも問題が解決しない場合はお知らせください。 ダイレクトストリーム（mp4など）とHTTPライブストリームの両方が機能し、flipyが正確に反映される必要があると思います。

報告されたとき、それはすべて2月から行われます。 しかし、私はもともと昨年いつか報告しました。 私はIOSベータを11.3にランダムに更新し、それが機能し始めました。 複数のプラットフォームの回避策を処理するには、上記の互換性チェックコードが必要です。

IOS10にはflipY修正が必要です。 IOS11.0-11.2ではソフトウェアレンダリングの回避策が必要です。 11.3>通常どおりレンダリングできます。

誰かがこのための実用的なサンプル、jsfiddleなどを共有できますか？ それでもIOS11Safariで黒い画面が表示されました。 オーディオは聞こえましたが、HLSストリーミングのビデオは聞こえませんでした

@dhanishapaあなたのiOSバージョンは何ですか？ 11.3+ですか？

少し前（〜2018年5月）私もHLSで次の問題が発生していました（？<= 11.2）：

• ビデオのセグメントが再生中に繰り返されることがあります
• 動画が一時停止して黒い画面が表示されることがあります
• ビデオはバッファリングされますが、オーディオは続行されます

Vimeo（私は彼らのHLSサービスを使用しています）と連絡を取った後、彼らはApple開発チームに連絡し、修正に協力することができました。

Appleの開発チームから、報告された再生の問題の修正を含む新しいバージョンのiOS（11.3.1）がリリースされたという連絡を受けました。 この修正により、ビデオが黒い画面で停止したり、ビデオのセグメントが繰り返されたり、無限の読み込み状態に陥ったりするのを防ぐことができます。

アップロード中にソースとしてH264エンコードされたMP4を提供すると、11.3.1より前のiOSバージョンで再生の問題が解消されたことに気づきました。 アップロード中に入力フォーマットとしてQuicktimeを使用すると問題が発生しました。

各ビデオファイルによって生成されたマニフェストの間にいくつかの違いを見つけました（ビデオコーデック、つまり、動作しているものの「avc1.64001E、mp4a.40.2」と動作していないものの「hvc1.2.4.L63.90、mp4a.40.2」 ）。

おそらく、この情報は誰にとっても役立つでしょう。

やあ
IOSサファリでのHLSストリーミングに問題があります。
corsプロキシを使用しています。 ネイティブのhlsプレーヤーとhtml5プレーヤーを使用してみましたが、iOSで直接m3u8リンクを再生しようとしましたが、動作しませんが、サファリ（デスクトップ-マック）、クロム、Firefoxで動作し、IOS（iphone）では動作しません

corsはIOS11.0で修正されました。 私が解決した他の大きな修正は11.3にあります。 11.3は今出ているはずです。 プロキシはIOS10および9にのみ必要です。

それは私のために働いています🙆🏽‍♂️

これは、球体にマッピングされたHLSストリームのplayhouse-vrによる360ビデオ）。

macOS v10.13.4 + Safariv11.1およびiOS11.4.1 + Safariでテスト済み

iOS 14.0SafariとiPadOS14.0Safariで新しい黒い画面の問題が発生しています。 まったく同じプレーヤーがiOS13.7SafariとiPadOS13.7Safariで動作します。 three.js r120（r116から）にアップデートしようとしましたが、役に立ちませんでした。 macOS Safari14は大丈夫です。 誰かが同じものを見ていますか？ iOS 14をサポートするための次のステップは何ですか？

はい、iOS 14のリグレッションについては、 https：//bugs.webkit.org/show_bug.cgi？id = 215908とhttps://bugs.webkit.org/show_bug.cgi?id=216250の両方を確認してください。 多くのサイトが影響を受ける可能性があるため、両方に迅速に対処できることを願っています。

Safariとの終わりのない戦いです。 私自身の360機能についても苦情が出ると思います。 それらを修正するのに毎回数ヶ月かかります。 上記の元の回避策を見つけました。 だから、より多くの回避策を見つける時間！ WebkitはHLSをテストしません。私が自分で作成しなければならなかったWebGLのHLSテストはありません。

私の機能では、さまざまなIOSの肥大化した回避策をすべて削除しました。 しかし、そのうちの1つは11.0のキャンバスソフトウェアレンダリングを使用する必要がありました...私はまだプラットフォームチェックを行う必要があります。 IOS 13では、プラットフォームチェックが壊れています。 私はそれを段ボールプロジェクトで修正しなければなりませんでした。 HLSはすぐにはレンダリングされず、IOS 13でしばらく時間がかかることがわかりましたが、その問題をどのように修正したかを再検討する必要があります。

彼らは気にしません。 WebXR APIも、AndroidのようなWakelockAPIも実装されていません。

私の回避策によると、レンディションの変更時に再構成する必要があります。 そして、軌道制御のズームを無効にします。 これにより、IOS13でのブラックレンダリングが停止します。IOS14はチェックする必要があります。

            video.addEventListener("resize", () => {
                vrVideo.update();
                vrVideo.fullScreenResize(false);
            });

14.2をテストしました。 HLSOK。 上記の修正はそれを行います...