Three.js: HLS auf Safari / IOS funktioniert jetzt nicht

Es wird auf Leinwand gezeichnet und mit dem Leinwand-Renderer gerendert, obwohl Frames fallengelassen werden. Bei webgl ist etwas erforderlich.

Dies ist eine Schönheit. Ich habe eine Kpano-Demo mit dem Proxy-HLS-Stream ein wenig modifiziert.

Es funktioniert jetzt auf Safari OSX, aber nicht auf IOS 9. Irgendwelche Ideen, was der Unterschied ist? Ich bin leider kein Experte mit den Webgl-Flags oder was sie überhaupt tun. Auf IOS9 ist es immer noch ein schwarzer Rahmen.

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

dieser letzte Link ist schwarz gerade / Ton nur in Safari 9.1.3 / mac os x 10.11.6

Was ist HLS?

@makc wirklich? Ich habe OSX 10.10 und Safari 10. Nun, das erklärt die jüngste Sabotageänderung von Apple. Safari 10. Wenn wir also Safari 10 sind, sind wir alle gut.

@mrdoob HLS = Apple-Streaming. dh für Livestreams aber auch VOD. Live-Streaming wird mit der Terradeck-Ausrüstung zur Norm. zB http://dev.electroteque.org/video/360/hls/ultra_light_flight.m3u8

Irgendwelche Ideen, wo die Unterschiede liegen könnten? Ich habe versucht, einige Dinge im ersten Beispiel zu ändern. Das zweite Beispiel sind rohe Webgl-Funktionen.

also wird texImage2D teilweise HLS rendern, aber noch nicht auf IOS, vielleicht weil es nicht Safari 10 ist?

Bitte entschuldigen Sie, dass ich über ein paar Webkit-Bugtickets berichtet habe.

Sie haben den CORS-Proxy-Hack bei einem iOS-Update sabotiert. Es wird auch berichtet, dass macOS das CORS-Problem in Safari auch nicht behoben hat.

Ich muss jetzt herausfinden, wie ich ihre Sabotage umgehen kann. Ich muss das zum Laufen bringen, um HLS weiter zu testen, das auf IOS funktioniert. Apple bringt mich ernsthaft ins Schwitzen, um ihre Feuer zu löschen, hahah.

Wenn ich OSX-Rendering bekomme, wäre das ein Anfang. Ich muss nur herausfinden, was in Three.js anders ist?

Ich versuche immer noch, Reduktionsmethoden anzuwenden, um zu vergleichen, was anders ist. Sobald ich das herausgefunden habe, kann ich auch IOS zum Laufen bringen.

Vielleicht verursachen die zusätzlichen Shader-Programme in Three.js die Rendering-Probleme? Ich bin nicht darüber hinweg, aber ich versuche im rohen webgl-Beispiel zu replizieren, was Three.js in diesem equirectangular-Beispiel tut. Gibt es dafür einen Shader-Beispielcode?

Ich habe hier einige Rohfunktionen gefunden, die hoffentlich vollständig replizieren können, was Three.js tut. Ich kann die Shader-Programme nicht einfach direkt kopieren, da einige Variablen wie die Weltposition extern gesetzt werden.

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

Vielleicht bin ich gerade auf dieses oder ein damit zusammenhängendes Problem gestoßen. Ich habe h264 mp4-Dateien auf einem S3-Bucket und lade sie als Blob in eine video.src.

Wenn ich mit dem webbasierten Uploader von Amazon in meinen S3-Bucket hochlade, werden die Videos beim direkten Laden in Mobile Safari (iOS 10.0.1) problemlos wiedergegeben, aber wenn ich versuche, sie mit meinem Three.js-Viewer abzuspielen, bekomme ich nur ein schwarzer Bildschirm. Wenn ich jedoch mit Cyberduck in den S3-Bucket hochlade, spielen sie direkt in Mobile Safari und in Three.js problemlos.

Anscheinend setzt Cyberduck die Metadaten 'Content-Type=video/mp4' und der AWS-Uploader ist 'Content-Type=application/octet-stream'. Wenn ich diese Metadaten manuell auf Video/mp4 stelle, funktioniert alles richtig.

Seltsames Problem, und eines, das mir viel Kopfzerbrechen verursachte. Lassen Sie mich wissen, ob dies das gleiche zugrunde liegende Problem wie dieses Ticket ist oder ob ich ein neues erstellen soll.

Vielen Dank,
Dustin

Dies ist für HLS Mate wie bei mpegts Fragmenten oder fragmentierten Dateien nicht mp4. MP4 ist sowohl auf Safari als auch auf IOS in Ordnung. Ich habe den Mimetyp in Cyberduck überprüft und er sagt, dass die Mpegts korrekt sind.

Der gleiche Stream funktioniert bei mir im Raw-Webgl-Beispiel, nur natürlich nicht auf IOS. Ihr Problem scheint meinem jedoch wie in einem schwarzen Rahmen ähnlich zu sein. Überhaupt kein Rendern.

@danrossi ok cool. Ich werde ein neues Ticket speziell für mein Problem erstellen. Vielen Dank.

Ich denke, das ist das Problem: www.krpano.com/ios/bugs/ios10-webgl-video-texture-crash/
Ich versuche derzeit, dieselbe Problemumgehung für Three.js zu implementieren, komme aber nicht sehr weit.

@Phase Eins. Es ist ein Safari-Problem, das sowohl unter OSX als auch unter IOS ein Problem darstellt. MP4 funktioniert gut für IOS und OSX. Ich werde mit Antialiasing basteln.

Kann die Unterschiede zwischen den beiden immer noch nicht erkennen. Das rohe Webgl-Beispiel funktioniert jedoch immer noch nicht auf IOS, aber es ist ein Anfang, es unter OSX zum Laufen zu bringen.

Ich frage mich, ob ich ein funktionierendes Equirectangle-Shader-Programm finden kann, das ich vorbeibringen kann.

Weitere Informationen hier: http://stackoverflow.com/questions/39123109/rendering-a-video-with-webgl-in-ios-10-beta-7-safari-shows-weird-purplish-co.

Mir ist klar, dass dies ein Browserfehler ist, aber möglicherweise muss eine Problemumgehung implementiert werden, wenn man bedenkt, wie lange es dauert, diese WebGL-Fehler zu beheben.

Für den Fall, dass die Textur durch die Leinwand verwendet wird, wurde das Video in Safari angezeigt.
Da es in iOS jedoch immer noch CORS-Probleme gibt, funktionierte es nur in Same Origin.
https://bugs.webkit.org/show_bug.cgi?id=135379

Ich kenne mich mit dem webgl nicht aus, aber bitte beachten Sie Folgendes.
https://github.com/NishimuraT/videojs-panorama/commit/bd99200d8831c7ad0d10d742e087953da0f44169

@NishimuraT Ich glaube, ich weiß, was Sie meinen, verwenden Sie den Canavasrender. Ich habe das versucht, um die Reduktionsmethode zu machen.

Ich denke, das hat funktioniert, aber es verursacht schwere Drop-Frames und Probleme mit der Wiedergabeleistung aufgrund der CPU. Auf IOS natürlich schlimmer. Ipad 3 droppt bereits Frames für webgl.

@danrossi Ich hatte ein kleines Missverständnis. Es tut mir Leid. Ich hatte ein fehlgeleitetes Ding geschickt.

Ich habe das gleiche Problem mit dem elevr-Projekt bestätigt, das rohes Webgl und Shader verwendet. Werde das hacken müssen, um mich zurück zu arbeiten. Etwas darin verursacht Rendering-Probleme und würde sich auf drei.js genauso auswirken.

Ich habe in elevr bestätigt, dass es automatisch gelöscht wird und die Textur bindet, was dazu führt, dass sie bricht

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

Wenn dies auskommentiert ist, funktioniert es.

Dies hat auch ein Problem verursacht, ich bin mir nicht sicher, wofür es ist.

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

Vielleicht gibt es eine Autoclear-Eigenschaft, die in Three.js dasselbe tut?

Ich sehe viele Hinweise auf

state.bindTexture(_gl.TEXTURE_2D, null);

Weiß aber nicht wo es sein könnte. Ist es erforderlich, das zu tun?

Code ist zu verrückt, um herauszufinden, was das Problem mit der Texturzeichnung verursacht. Scheint etwas mit dieser Texturbindung zu haben.

@danrossi Gibt es eine Seite, die es richtig rendert?

Tut mir leid wegen der Geräuschkulisse. Ich habe weitere AB-Tests gemacht. Es scheint in der Tat das zu sein, was ich erwähnt habe, da ich es auch für die elevr-Demo auskommentieren musste.

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

Dies verursacht das Problem. Ohne sie steht die Textur jedoch auf dem Kopf. Ich werde einen weiteren Test hinzufügen, um zu zeigen, dass es jetzt funktioniert.

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

Ein weiteres rohes Beispiel, das ich gefunden habe, auskommentiert FLIP_Y. Möglicher Webkit-Bug jetzt?

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

Der einzige Hinweis auf flipY ist dies, aber Webkit nächtlich immer noch ein Problem

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

Wenn ich FlipY deaktiviere, von dem ich annehme, dass es die Hardwarebeschleunigung unterbricht, funktioniert es?

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

Ich versuche jetzt zu sehen, ob es sich um einen Webkit-Fehler handelt. Wie ist es möglich, die Textur zu drehen, um sie vorerst zu umgehen?

Wie ist es möglich, die Textur zu drehen, um sie vorerst zu umgehen?

Warum nicht einfach die Geometrie uv umdrehen oder das im Shader tun?

@makc Ich habe keine Ahnung, wie ich das

Nur um Köpfe weiter zu machen. Dieser FlipY-"Fix" hilft nicht auf IOS 9, habe ihn nur getestet.

Da ist jetzt etwas anderes ein Problem. Es hat Tage gedauert, nur diesen aufzuspüren.

Es kann das ganze Problem von Webkit sein, nicht Three.JS, wie es aussieht. Wie immer tut mir das leid.

Ich habe auch dort einen Bericht eingereicht https://bugs.webkit.org/show_bug.cgi?id=163866

Ich habe keine Ahnung, wie ich das anstellen soll.

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

@makc Bestätigen, dass das

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

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

Unter IOS ist das Problem jedoch immer noch offensichtlich.

@makc. Es ist durchaus möglich, dass dieses Shader-Programm den Flipp macht, dies war in einer der Demo-Quellen.

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;}

Es ist in der Original-Demo zu finden, die zu funktionieren schien, weil sie das FlipY-Flag nicht verwendet, es scheint dies im Shader-Programm zu tun.

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

Keine Ahnung, wie man das in Three.js einbindet? Wäre es besser, ein Shader-Programm zu verwenden?

Ich debugge jetzt noch IOS.

Dieser ist interessant. Durch den Versuch, diese Berechnung in diesem Beispiel zu replizieren, scheint es sie umzudrehen, skaliert sie jedoch immer noch schlecht.

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

gl_Position steuert also seine Position.

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

Wäre es besser, ein Shader-Programm zu verwenden?

Shader-Programm wird einmal in jedem Frame ausgeführt, im Gegensatz dazu, UVs in der Geometrie nur einmal zu spiegeln, bevor das Ganze beginnt.

@makc wahrscheinlich am besten dann einfach die Werte beim Start einstellen. Wenn ich richtig liege, sind diese UV-Werte Variablen im Shader-Programm und werden in der Berechnung verwendet ?

Ich sehe in den Quellen einige Hinweise auf gl_Position. Ich bin mir nicht sicher, ob das der richtige ist, aber es gibt so einen

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

Vielen Dank.

Ich habe alle möglichen Tricks mit webgl auf IOS Safari ausprobiert, um zu sehen, ob ich einen Frame zum Rendern bekomme, und er ist im Moment nur schwarz. MP4 ist in Ordnung.

Nicht viele Ressourcen dazu. Ich glaube, nach meiner Entdeckung suchen die Leute auch. Es ist übrigens für Live-Streaming, aber auch für VOD.

Ich habe jemanden testen lassen. Sie glauben, dass dieses rohe Webgl-Beispiel mit dem FLIPY-Fix unter IOS 10 funktioniert, aber die Three.js-Version stürzt tatsächlich nicht ab.

Mir ist aufgefallen, dass der NEAREST-Filter verwendet wurde, der die Textur blockartig macht. Ich habe versucht, das zu replizieren, aber das gleiche Problem für sie.

also keines davon funktioniert

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

Aber das ist für sie, obwohl IOS 9 für mich nicht funktioniert

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

Nach einigen sehr schweren und schmerzhaften Tests habe ich die Demos und das Problem verfeinert.

Der FlipY-Workaround ist für HLS sowohl für OSX 10.11 als auch für macOS, IOS 9 und 10 erforderlich. Das rohe Webgl-Beispiel verwendet FlipY nicht, da es im Shader-Programm enthalten ist. Bei Three.js muss die Geometrie umgedreht werden.

HLS-Rendering unter IOS 10 wird angezeigt, weist jedoch schwerwiegende Probleme mit Farbartefakten auf. Die Frames funktionieren nicht mehr, aber ich glaube, es liegt ein Problem mit dem Emulator und dem Dropping von Frames vor. Ich habe jetzt kein Gerät, das auf IOS 10 aktualisiert werden kann. Unter IOS 9 wird es überhaupt nicht angezeigt. Beide erfordern den CORS-Proxy für mp4 und HLS.

Möglicherweise muss ich jetzt ein weiteres Ticket in Bezug auf das Farbwiedergabeproblem mit HLS unter IOS 10 bereitstellen, sobald ich bestätigt habe, dass es sich nicht um den Emulator handelt.

Dies ist absolut schmerzhaft, kein Wunder, dass niemand Safari unterstützen möchte, aber die Leute brauchen es.

Ich musste hier verschiedene RGB-Formateinstellungen vornehmen. Die Standardeinstellung erzeugt vertikale Farbbalken, die RGB-Farbe sind falsch. Aber im Emulator. Ich kann IOS 10 jetzt nicht richtig testen, weil mein Ipad-Gerät nicht mehr unterstützt wird. Ich werde versuchen, ein Iphone mit IOS 10 zu ergattern, um dies zu bestätigen.

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

Bitte konzentrieren Sie sich auf diese beiden Beispiele. die RGB-Flags machen auf einem tatsächlichen Gerät keinen Unterschied, der Simulator erzeugt eine fehlerhafte Ausgabe, aber eine ähnliche Ausgabe, wenn das RGBA-Format verwendet wird.

Der FlipY-Workaround ist für IOS 9 / 10 / OSX Safari mit HLS erforderlich.

Ich konnte ein Farbproblem mit HLS-WebGL-Rendering replizieren, für das jetzt ein zweites Ticket erforderlich ist, obwohl ich nicht sicher bin, ob ein Webkit-Flakey-Fehler ein Three.js-Problem ist.

So viele massive Fehler und Fehler machen dies zu einem Showstopper.

Daher funktioniert eine solche HLS-Webgl-Ausgabe nur teilweise auf IOS 10, nicht auf IOS 9. Viele Geräte hängen jetzt auf 9 fest. Ich muss einen Workaround für 9 finden.

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

Hi! Ich habe das gleiche Problem. Hast du jetzt eine Lösung?

Ja, es ist in diesen Demos enthalten, aber überprüfen Sie das zweite Ticket bezüglich eines Farbraumproblems mit IOS 10. Es scheint, dass Webkit / Apple keine Anstrengungen unternehmen wird, es jemals auf IOS 9 zum Laufen zu bringen, was bedeutet, dass ältere Geräte wie das Ipad 3 weggelassen werden, obwohl es konnte sowieso kaum 5fps rendern. Sie müssen sich zuerst darauf konzentrieren, IOS 10 zum Laufen zu bringen.

Es ist jedoch ein Workaround für dieses Problem, das Webkit gemeldet wurde. Es ist ein Problem bei allen Safari.

http://dev.electroteque.org/webgl/webgl.html scheint nicht zu funktionieren. Ich habe die Seite auf ios10 getestet. Aber Safari stürzt ab, wenn die Seite geladen wird.

Verwenden Sie das Threejs-Beispiel.

Ich habe alle zu diesem Thema aufgeführten Beispiele getestet. Es scheint, dass nur http://dev.electroteque.org/webgl/webglrgba.html funktioniert. Aber es hat ein Farbraumproblem.

@wuyingfengsui das funktioniert auf IOS 10 Iphone.

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

Ich wette, Sie überprüfen wahrscheinlich einen Simulator. Das ist ein massives Problem. Es aktualisiert nicht nur den Rahmen nicht, sondern zeigt auch grüne Farbbalken an. Bei Verwendung des RGBA-Flags funktioniert es jedoch auf einem Simulator. Da gibt es ein seltsames Grafikproblem.

Auf einem tatsächlichen IDevice werden Sie das Farbraumproblem sehen, wenn Sie das RGB-Flag verwenden, wie Sie es mit dem RGBA-Flag im Simulator tun!

Ich werde vorerst verdrängt, IOS 10 richtig zu testen, weil das Ipad 3 veraltet ist, aber zum Glück hatte ich Zugang zu einem Iphone.

Beachten Sie auch die CORS-Proxy-URL.

Beziehen Sie sich jetzt auf das Farbraumproblem

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

und dieses Webkit-Ticket, von dem ich bezweifle, dass sie sich jemals die Mühe machen werden, es zu reparieren und eine Veröffentlichung voranzutreiben.

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

Ich finde es funktioniert, wenn ich auf iOS 10 iPhone 7 RGB in RGBA ändere.

ok, also ist es für verschiedene Geräte anders. Ich habe es auf RGBA aktualisiert. Wie ist das ?

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

@danrossi Es funktioniert.

@wuyingfengsui Ich muss das Webkit-Ticket diesbezüglich aktualisieren. Ich sehe, es gibt noch andere Farbflaggen, mit denen man sich anlegen kann, und hoffentlich ist eine die richtige. Ich habe verschiedene HLS-Streams ausprobiert und sie waren gleich.

Sie können in den drei.js-Konstanten sehen, dass es eine Reihe von Werten gibt, mit denen Sie spielen können. dh diese. Es gibt auch Byte-Typ-Flags, die behandelt werden. Versuch und Irrtum und sehr ermüdendes Versuch und Irrtum.

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

Leider wurde IOS 9 damit komplett überflüssig gemacht, es wird nicht funktionieren. Ältere Geräte werden nie IOS 10 bekommen.

Ich glaube , dass eine Art Sabotage im Gange ist und ich glaube , dass es vor der Veröffentlichung von Safari 10 funktioniert hat ? meine Testphase dauerte Monate wegen all der Ungereimtheiten mit Apple und manchmal Android. Ich bin mir ziemlich sicher, dass es funktioniert hat, als ich HLS getestet habe.

Ich kenne mich mit webGL nicht aus. Ich denke, es kann nicht gelöst werden, bis das Webkit es repariert.

Dadurch wird die Textur in webgl hochgeladen. Diese Flaggen dort sind von Interesse.

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

@wuyingfengsui Wenn sie über 5 Jahre

Deshalb muss jemand da sitzen und Workarounds finden und das bin leider ich selbst hahah.

Wenn Sie das rohe webgl-Beispiel nehmen, können Sie mit diesen Flags herumspielen. Oder tun Sie es über Three.js mit den Konstanten und den Eigenschaften "format" und "type". Der Typ ist der Byte-Typ, das Format ist das Farbformat, das Sie gesehen haben. RGBA ist erforderlich, damit es kaum funktioniert.

Ich werde morgen etwas Zeit damit verbringen, jede Flagge durchzugehen und hoffentlich funktioniert eine Kombination.

@danrossi Wie geht's?

Ich habe einfach versucht, mit jeder möglichen Flagge herumzuspielen und nichts. Es kann nur RGB- und RGBA-Flags akzeptieren und der Bytetyp ist ohne Vorzeichen. Andere Optionen zeigten nur eine schwarze Leinwand. Sie wissen nicht, was Sie sonst noch tun sollen?

@danrossi Danke für deine Arbeit. Ich finde, dass Hls.js das hls-Video mit MSE

@wuyingfengsui Dies ist jetzt ein natives HLS-Problem mit IOS, meine obigen Fixes

Beim Dash-Streaming hatte ältere Safari CORS-Probleme, selbst wenn der Proxy-Workaround funktionierte. Vielleicht haben sie das in macOS auch behoben?

Es gibt möglicherweise nichts anderes, als eine Umgehungsmethode in Three.js bereitzustellen, die die obigen Codekorrekturen verwendet.

Ich bezweifle, dass Webkit und Apple es jemals reparieren werden. Alle Augen sind jetzt auf dieses Ticket gerichtet. das RGB-Flag-Zeug bezieht sich jetzt auf das IOS 10-Rendering. IOS 9 und ältere Geräte, die darauf gefangen sind, sind vollgestopft.

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

Gibt es hier Updates? Hat es jemand mit fester Farbwiedergabe unter iOS zum Laufen gebracht?

Bitte beachten Sie dieses Ticket.

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

Ich bezweifle, dass der HLS-Workaround in Three.js einfließen wird, es muss außerhalb davon gehen.

Der Code für diese Problemumgehung lautet wie folgt

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));
}

Wenn Sie mit den webgl-Flags herumspielen möchten, verwenden Sie das rohe webgl-Beispiel. Ich habe alle möglichen Optionen ausprobiert und im Moment nichts. Es ist wirklich sabotiert und es gibt keine Reaktion vom Webkit.

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

Vielen Dank. Gibt es neben HLS noch andere Videoformate zum Streamen auf das iOS-Video-Flag? Ist es möglich, H.264 ohne Rendering-Probleme zu streamen?

@pedrofranceschi mp4 ist in Ordnung. Es ist nur HLS, das Optionen für das Live-Streaming von 360-Videos auf IOS bietet.

Der FlipY-Fix für dieses Ticket muss nur auf HLS-Streams und auf Safari angewendet werden. Dieser FlipY-Fix funktioniert nicht unter IOS 9, wodurch ältere Geräte ausgeschlossen werden, die IOS 10 nicht erhalten können.

Mein Ipad 3, das ich zum Testen verwendet habe, wird HLS und WebGl nie zum Laufen bringen. Ich musste auf einem neueren Iphone testen. Der IOS 10-Simulator funktionierte kaum und hatte ähnliche Probleme mit Farbartefakten wie das andere Problem.

Zumindest die Inline-Flags für Iphone auf IOS 10 funktionierten, Inline-Video und Webgl sind jetzt möglich, aber CORS ist immer noch ein Problem. CORS wird nur in Safari unter macOS behoben.

Ich betone Safari nur, da es sich um einen weiteren klassischen Webkit-Fehler handelt und das HLS.JS-Streaming auf anderen Browsern in Ordnung ist.

Ich habe festgestellt, dass es durch Hinzufügen einer zusätzlichen Leinwand behoben werden kann. Aber es funktioniert nur unter iOS 10. Schau dir diesen Commit an: https://github.com/yanwsh/videojs-panorama/commit/0122b1bbd31093b77ca7f09900afa74e2c537037

Das war kein Ereignis. Es verwendet Canvas-Rendering mit drawImage. Nicht WebGL. Also wie bei der Verwendung des Three.js-Canvas-Renderers. Canvas-Renderer saugt wirklich auf IOS verursacht ausgelassene Frames, die nicht verwendet werden können. Ist das Ihre Lösung?

Die Qualität ist nicht sehr gut. Aber es funktioniert :)

Das Dropping von Frames ist mehr als ein Qualitätsproblem :)

@mrdoob Ich habe den Canvas-Renderer als

Dabei werden immer noch Frames verworfen.

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

@danrossi

@mrdoob Dieses Problem

Ich habe auch gerade herausgefunden, dass Chrome sich jetzt weigert, mp4 abzuspielen, es sei denn, es verwendet die Safari CORS-Proxy-Version des mp4 ahh.

Was das bizarre CanvasRenderer-Problem angeht, das das HLS-Problem vorübergehend für IOS 10 beheben kann. Hier sind Kombinationen, also zeigen Sie, was es tut, und einige seltsame Rotationswert-Offsets sind möglich. Der Code ist der gleiche. Über der Textur befindet sich ein Mesh-Gitter.

Für Safari

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

Für Chrome

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

@danrossi Die Safari-Version funktioniert auch nicht auf iOS 10…

Dies sollte unter IOS 10 funktionieren, aber Sie sollten Farbartefakte sehen.

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

Diese anderen sind CanvasRenderer-Tests, um das IOS-Problem zu umgehen, es sollte zumindest auf Desktop-Browsern funktionieren und ist es nicht.

Dies sollte auf jedem IOS funktionieren, aber ich bin nicht allzu besorgt darüber.

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

Ich glaube nicht, dass die CanvasRender-Lösung eine gute Lösung für IOS sein wird, aber es ist eine Option. Da es nicht nur weiterhin den CORS-Proxy benötigt, führt das Zeichnen auf der Leinwand nur zu ausgelassenen Frames. Safari OSX kann den FlipY-Workaround in Threejs-hls.html verwenden

Ich habe die Canvas-Demos aktualisiert, es scheint nicht, dass sie extern gezeichnet werden muss.

Es gibt jedoch ein seltsames Problem mit der Kugelgeometrie, das ich nicht herausfinden kann, daher wird das Bild nicht richtig gerendert oder gedreht, es ist alles zu einem Punkt verzerrt.

Klicken Sie auf den oberen linken Bereich und versuchen Sie mit Orbitcontrols zu ziehen.

Das Netzproblem besteht darin, dass ich dem MeshBasicMaterial "overdraw: 0.5" hinzufügen muss, damit das Netz nicht mehr angezeigt wird.

Beide benötigen keine CORS-Proxys auf Safari, wenn Sie den CanvasRenderer verwenden. Ich werde versuchen, mir als nächstes SoftwareRenderer anzusehen, um zu sehen, ob das besser funktioniert, da CanvasRenderer zu viele Frames verwirft.

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

In Anbetracht der Tatsache, dass der CanvasRenderer aufgrund des offensichtlichen Droppings von Frames als abgewertet markiert wurde. Ich denke, der einzige letzte Ausweg ist, Videotexturen mit dem SoftwareRenderer auszuprobieren. Diese Änderung scheint noch nicht zu funktionieren und kann kein Beispiel-Setup finden. Es ist nur eine schwarze Leinwand.

Irgendwelche Workarounds für den Farbfehler? Alles ist blau

@andreabadesso Ich habe zwei Tickets eingerichtet, vielleicht sollte ich sie zusammenführen.

Für OSX wird das Durchführen des FlipY-Workarounds dieses unangenehme Problem beheben. Für IOS 10 ist etwas ganz anderes erforderlich.

Canvas-Zeichnen ist ein massiver Fehler, es wird nicht einmal richtig gerendert, die Geometrie scheint verzerrt zu sein. Es lässt auch Frames fallen.

Ich versuche jetzt mein Glück mit "SoftwareRenderer", der immer noch auf Leinwandzeichnung beruht. Alles, was ich bekomme, ist im Moment eine schwarze Leinwand, also nichts. Es gibt keine Dokumentation, wie man damit Videotexturen zum Laufen bekommt.

Es gibt einfach keine andere Möglichkeit, Webkit reagiert nicht und ich habe alle möglichen webgl-Flags ausprobiert. Ich könnte zurückgehen und versuchen, mit Kodierungen herumzuspielen, aber das HLS ist aus der funktionierenden mp4-Datei gepackt.

Wenn jemand eine verzweifelte Lösung benötigt, wird diese nach .ts-Dateien suchen, sie in .mp4 konvertieren und einen Websocket ausgeben, damit der Client das nächste Fragment in mp4 herunterladen kann (das auf ios10 funktioniert):

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

Ich kann die vollständige Lösung bereitstellen, wenn jemand interessiert ist.

@andreabadesso Haben Sie die Client-Implementierung zu Ihrer Lösung?

Das ist extrem fragwürdig. Sie brauchen nicht nur noch einen CORS-Proxy, er versucht auch, FFMPEG in Echtzeit zu passieren :O Macht IOS überhaupt Websockets? Ich weiß, dass Webrtc nicht funktioniert.

Der Versuch, eine Videotextur per Canvas-Zeichnung immer noch über die SoftwareRenderer-Option zu erhalten, ist ebenfalls schlecht. Es ist nur ein schwarzer Rahmen. Beide Optionen waren eine Sackgasse Ich hatte gehofft, dass zumindest der SoftwareRenderer mit Videotexturen funktioniert, nur eine Bildtextur anzeigt.

Hallo zusammen, ich habe am letzten Tag an dem Farbproblem gearbeitet und eine Problemumgehung gefunden, die für meinen Anwendungsfall funktioniert. Dieser Thread war sehr hilfreich und ich würde gerne dazu beitragen.
Das Problem ist nur, dass die Farben Rot und Blau vertauscht werden. Also habe ich ffmpeg verwendet, um diese Farben vorzuschalten. Wenn die Farben wieder auf Threejs umgeschaltet werden, kehrt das Video zu seinem normalen Aussehen zurück.
Es ist keine optimale Lösung, aber es funktioniert. (getestet auf IOS 10.2)

@Yralec

Ich dachte, es war ein Codierungsproblem oder ein Herumspielen mit der Codierung.

Das ist jedoch nicht hilfreich für das Wowza-Live-Streaming. Niemand wird die Kontrolle über die Funktionsweise von Live-Encodern haben. Für VOD vielleicht.

Hast du das ffmpeg-Flag, um das zu bestätigen?

Immer noch erstaunlich. Es hört sich so an, als ob dies mit Three.js kein Problem ist, abgesehen von dem FlipY-Problem, das noch benötigt wird.

Ich kann einfach nicht verstehen, warum Webkit so ist.

@danrossi

Hier ist der Befehl, den ich verwendet habe:
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
Wie Sie sehen, drehe ich auch die Ausgabe um, damit ich das in Threejs nicht selbst tun muss.

ok danach wollte ich fragen.

Wäre es nicht einfacher, einen Shader zu schreiben, der Blau und Grün vertauscht?

@mrdoob Ich habe sehr wenig Wissen über Shader, also war es für mich nicht (daran habe ich auch nicht gedacht), aber wenn Sie wissen, wie man einen schreibt, der Rot und Blau
Auch Livestreaming könnte endlich funktionieren.

@mrdoob Ich denke, du bist auf etwas

Ich habe ein wenig recherchiert und es scheint, dass es einen solchen Channel-Order-Swap gibt. Ich bin kein Experte für Shader.

gl_FragColor = texture2D(u_image, v_texCoord).bgra;

@mredoob in meinem rohen webgl-Beispiel habe ich so etwas versucht, aber das Programm ist kaputt und verursacht Fehler. Hier erhält es also Farben aus der Textur, die offensichtlich sehr gefälscht ist, und "bgra" vertauscht den roten und blauen Kanal.

Noch keine Ahnung wie man daraus eine funktionierende Lösung bekommt.

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

Beim Kopieren und Einfügen ist ein Programmfehler aufgetreten.

Verwenden Sie diesen Code oben. Ich kann bestätigen, dass das, was gerendert wird, in IOS 10 sichtbar ist, also sollte es hoffentlich die Rot- und Unschärfefarben invertieren, die im Shader ausgetauscht werden?

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

@Yralec , das das Invertieren der Farbkanalreihenfolge auf dem Shader bestätigt, wird in IOS10 wieder invertiert. Im Simulator musste ich das Farbformat in rgba ändern, damit es ohne seltsame Linien gerendert wird.

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

@mrdoob wie ist es möglich, diese Änderung der

gl_FragColor=texture2D(sm,txt).bgra;

@mrdoob. Korrektur. Dies könnte diejenige sein, die die Leute verwenden würden.

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";

Wie bekomme ich Zugriff darauf, um es zu ändern?

@danrossi Du kannst so etwas in JS hacken

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

Ich glaube, ich muss die Shader in ein THREE.ShaderMaterial kopieren, aber keine Ahnung, wie man die Textur anwendet?

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
                });

Dieser andere Weg ist unflexibel, da er nur für HLS-Streams in IOS angewendet werden muss.

Tatsächlich wird dies in Safari gerendert, aber der FlipY-Fix bricht ab. Es spielt sich verkehrt herum. der Verstand nervt. All dieser Aufwand wegen Apple und Webkit haha.

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

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

@WestLangley der Patch scheint nicht zu funktionieren. Ich sollte Farben invertiert sehen, aber nicht.

gl_FragColor=texture2D(sm,txt).bgra;

Dies ist der richtige Shader, um [b]lue und [r]ed zu tauschen: Die Standardreihenfolge ist rgba, also tauscht bgra sie aus.

FlipY repariert Pausen

txt -> vec2(txt.x, 1.0 - txt.y) zum Beispiel

keine ahnung wie

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

der Patch scheint nicht zu funktionieren. Ich sollte Farben invertiert sehen, aber nicht.

vielleicht wendest du den Patch zu spät an

@makc ja in meinem rohen webgl-Beispiel macht es den Flip im Shader.

Ich glaube, wenn der Flip auf dem UV-Code durchgeführt wird, der in meinem Threejs-Beispiel gepostet wird, wird er nicht Frame für Frame im Shader gespiegelt. Ich dachte, das würde einen unnötigen Rechenaufwand beseitigen.

im rohen webgl-Beispiel ist der Vertex-Shader umgedreht

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;}

dann invertiert dies im Fragment-Shader die Farbkanäle.

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

Der Versuch, das in Three.js zu replizieren, ist jetzt das Problem.

Entschuldigung, das scheint zu funktionieren, aber der FlipY-Fix funktioniert nicht. Ich habe vergessen, bgra hinzuzufügen.

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
                });

Wenn ich den Standard-tFlip-Wert auf 1 ändere, wird er richtig angezeigt, also eine weitere Fixoption für das FlipY-Problem mit HLS?

tFlip: { value: 1 }

Das Video hat beschlossen, das Rendern im Simulator zu stoppen, aber zumindest sehe ich eine Farbänderung. Der Patch funktioniert leider nicht, obwohl er beim Debuggen definitiv den Shader-Code ersetzt.

Es scheint, dass ich mit diesem Wert einen Flip machen kann, der ihm nur eine positive 1 anstatt eine negative gibt.

Ich habe den Zugriff auf IOS10 verloren, nachdem ältere Geräte wie mein Ipad 3 veraltet waren. Lustige Zeiten mit all dieser Sabotage.

Ich habe keine Ahnung, ob es den Rahmen aktualisiert und sich noch richtig dreht.

Hoffentlich funktioniert dieses Beispiel auf IOS 10. Es ist das Beste, was ich im Moment tun kann. In Safari sollte es invertierte Farben anzeigen.

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

Die Verwendung des Shadermaterials verdreht die Bildskalierung, die Geometrie und verhindert, dass die Kameradrehung so funktioniert

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

Muss versuchen, diesen Patch zum Laufen zu bringen.

Dies schien zu funktionieren, obwohl es immer noch mit der Kameraposition kollidiert. Ich glaube nicht, dass es eine praktikable Option ist. Es produziert noch mehr Fehler, wenn man es auf diese Weise macht. Rendert nicht wie bei der Verwendung von 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
                });

Wenn ich versucht habe, das Basismaterial zu verwenden, funktioniert es nicht. dh

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

Anstatt zu versuchen, den integrierten Shader zu hacken, würde ich einfach einen benutzerdefinierten Shader erstellen.

Bitte schön! 😀

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/

Rendert nicht nur einen schwarzen Bildschirm.

@danrossi Bei mir funktioniert es.

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")
    });

Denken Sie daran, den Farbtyp und die Variablennamen zu aktualisieren

Hier wird gerendert... (Chrome 55, OSX)

In dieser Ausgabe geht es um Videotexturen mit HLS-Streams und Safari, insbesondere IOS, fürchte ich :|

Ich kann nicht sehen, wie meshbasic_frag funktioniert und wie eine Textur darauf angewendet wird. Das ist es, was es verwendet.

Das Programm equirect_frag kann nicht verwendet oder ausgewählt werden.

gl_FragColor = vec4( outgoingLight, diffuseColor.a );

Das ist alles, was ich sehe.

Ich denke, Sie sollten meshbasic_frag und equirect_frag vergessen. Versuchen Sie, meinen Code als Basis zu verwenden und dies zu ersetzen:

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

Mit so etwas:

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

@mrdoob

die Rückseite verursachte das Problem. Dieses Shader-Programm ist sicherlich viel sauberer als das übliche. Was ist der Unterschied ?

Mit dem benutzerdefinierten Shader verliere ich den ursprünglichen FlipY-Fix.

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

Ich musste den Vertex-Code ein wenig ändern, x wurde gespiegelt und y musste invertiert werden. Das stelle ich gleich ein.

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
});

Dieses Shader-Programm ist sicherlich viel sauberer als das übliche. Was ist der Unterschied ?

Magie! 😉

@mrdoob danke Champion. Entschuldigen Sie den Lärm, aber geben Sie Apple noch einmal die Schuld dafür.

Sollte die Demo für Equirectangle-Videos nicht aktualisiert werden, um dies möglicherweise zu verwenden? Also ist das Shader-Programm, das von MeshBasicMaterial verwendet wird, für solche Videotexturen unnötig? Ich werde es in verschiedenen Browsern und verschiedenen Videoformaten testen.

Sollen wir schließen?

Hier ist die aktualisierte Demo

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

Sollte die Demo für Equirectangle-Videos nicht aktualisiert werden, um dies möglicherweise zu verwenden? Also ist das Shader-Programm, das von MeshBasicMaterial verwendet wird, für solche Videotexturen unnötig?

Nun, MeshBasicMaterial ist flexibler und die Leute müssen keine Shader schreiben. Für diesen speziellen Fall war es nur einfacher, einen benutzerdefinierten Shader zu schreiben, um das Problem zu umgehen.

Sollen wir schließen?

Ja!

Unter IOS 10 funktioniert es einwandfrei. Nur dass die Frames im Simulator nicht aktualisiert werden. Muss auf Hardware warten. Ich schließe das andere Ticket.

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" );

Mit leichten Anpassungen am Flipy arbeitet das gleiche Programm an Chrome mit webm.

@mrdoob Ich glaube, dieser Shader funktioniert auf allen Browsern mit Videotexturen. Der Flip-Fix "1.0 - uv.y" wird nur für HLS auf Safari benötigt. Die Farbkanalinvertierung wird nur für IOS10 mit HLS benötigt.

Ziemlich verrückte Schichten von Workarounds, einschließlich des CORS-Proxys.

Ich glaube, das funktioniert besser als der Shader von meshbasicmaterial. Sollte dies dann der Standard für Videotexturen sein? Rotation scheint mit dem Vertex-Code zu funktionieren.

Hallo zusammen
Ich versuche, einen 360vr-Player mit drei.js zu erstellen, der einen HLS-Livestream zeigt (.m3u8 gespielt mit hls.js).
Es funktioniert auf Safari osx mit aktiviertem Webgl, aber auf dem iPad 10.2 gehen alle meine Versuche in einer schwarzen Leinwand verloren (der Ton funktioniert)
Wenn ich den vr360-Modus deaktiviere, funktioniert der Videostream auf allen Geräten einwandfrei.
Ich habe einige der vorgeschlagenen Methoden ausprobiert, aber ich habe immer noch das Rendern auf schwarzer Leinwand.
Weiß jemand, wie man umgeht?

Die FlipY- und Farbkanal-Inversionskorrekturen sind in diesem Thread.

Die Webkit-Bugs, die ich verfolgt habe, sind veraltet und haben schließlich eine gewisse Arroganz darüber gelindert. Es ist noch geöffnet, aber niemand wird sich die Mühe machen, sie anzusehen.

Sie benötigen den FlipY-Fix für Safari. Also deaktivieren Sie es immer noch auf der Three.js-Textur.

Hier sind die formalen es6-Methoden, die ich für meine Player-Lösung entwickelt habe. Ich habe immer noch Albträume, Monate nachdem ich diesen Mist gejagt habe, haha.

Danke an mrdoob, den Champion für die Entwicklung der Shadermaterial-Lösung. Ich benutze das jetzt für alle Browser. Es ist ein einfacherer Shader als einer, der ebenfalls generiert wird. Es ist nur für Videotexturen.

 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)
        });
    }

Verwendungszweck

 let invertColour = false;

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

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

ok der Kommentar in der Zeile _gl.pixelStorei(_gl.UNPACK_FLIP_Y_WEBGL, texture.flipY) in three.js macht die Videoanzeige in Safari (10.0.2, in der Vorgängerversion war es nur nötig das Webgl in den Entwicklungstools zu aktivieren, dies Option ist jetzt nicht verfügbar), aber ich habe das Problem immer noch auf iPad und iPhone (das ist mein Ziel)
Über die ShaderMaterial-Lösung weiß ich nicht, wie ich sie genau in meinem Code anwenden soll ...
danke für deine Unterstützung

Das Deaktivieren von FlipY war in meinen Tests auch für MacOs Safari 10 erforderlich.

Ja auch für meine (außer für die vorherige 9.xx-Version)
Aber ich muss den Player auf mobilen Geräten verwenden, damit diese Lösung nicht meine Lösung ist :-(

Sie benötigen sowohl den FlipY-Fix als auch die Farbkanalinversion auf IOS. Und nur für IOS 10. Nicht gut für IOS 9. Was viele ältere Geräte auslässt. Weil Apple sie wie mein Ipad 3 abgeschrieben hat. IOS 10 unterstützt Inline-Wiedergabe, wäre also sowieso vorzuziehen.

Ich schaue mir jetzt an, wie ich das in iOS behebe. Aber die Kommentare verunsichern mich etwas.

Für HLS-Videos:

• iOS liefert Farbkanäle in der falschen Reihenfolge (bgra statt rgba). Ansonsten stimmen die Werte aber.
• macOS erzeugt eine Textur, die in der X-Achse gespiegelt werden muss. Dies kann mit setPixelStorei(UNPACK_FLIP_Y_WEBGL, true) umgangen werden.
• iOS erzeugt eine Textur, die ein Spiegeln in der X-Achse erfordert, aber die obige Problemumgehung funktioniert nicht.

Ist das richtig?

Die Antwort ist in diesem Ticket oben.

Nur als Hinweis an euch, anscheinend hat das neueste iOS 10.3.3-Update das bgr-Problem behoben , wodurch andersherum funktionieren würde. Ich verwende Three.js nicht, also beziehen Sie sich bei Fragen / Triaging auf Ihre eigenen Tests oder die SO-Frage.

Wie erwartet. ziemlich normal. Danke für die Vorwarnung.

Sie sollten das Richtige tun und das Ticket aktualisieren, das ich erstellt und offen und veraltet gelassen habe. Um alle Entwickler zu aktualisieren, wenn es einen Fix gibt. Sie haben nicht. Müssen Sie jetzt nach Nebenversionen suchen?

IOS 11 soll CORS-Fixes haben, hat es aber noch nicht.

Ich habe es geschafft, xcode 9 beta zu bekommen. Es kommt nicht mit 10.3.3 Simulator, nur 10.3.1 und 11. Ich habe in 11 getestet und das umgekehrte RGB wird anscheinend immer noch benötigt. Sonst sollte ich eine grüne Anzeige sehen oder gar keine. Ich muss weitere Tests durchführen, indem ich den Fix deaktiviere.

Der IOS11-Simulator ist ein Blindgänger. Es gibt keinen 10.3.3 IOS-Simulator. IOS11 hat anscheinend CORS behoben.

Jetzt, da iOS 11 der Öffentlichkeit zugänglich ist, habe ich einige Tests durchgeführt und kann den Fix in diesem Thread für iPhone iOS 11 nicht verwenden (iPad noch nicht ausprobiert).

Ich kann es zum Laufen bringen (mit CORS-Hack, FlipY und Farbkorrekturen) für iOS 10.3.3 auf iPhone und iPad mit HLS.
Auf dem iPhone iOS 11 habe ich einen schwarzen Bildschirm mit HLS (mit CORS-Hack, FlipY und Farbkorrekturen). Ich denke, es gibt noch etwas zu reparieren, aber bisher habe ich mich nicht darauf konzentriert.

In Bezug auf das CORS-Problem scheint es sich in iOS 11 zumindest für den progressiven MP4-Download verbessert zu haben, aber ich kann dies für HLS aus den oben genannten Gründen nicht bestätigen.

Wenn jemand mehr Glück hat, bitte aktualisieren :/

Ich versuche mein Bestes, um ein brandneues iPad zu bekommen, um überhaupt IOS11 zu bekommen.

Der Emulator hat nicht die Fixes, also war ein Fehler.

Ich muss bestätigen, ob ich dort einen Counter-Hack machen muss. Oder ob die RGB-Farbkanäle wieder umgeschaltet werden können.

Schwarz-Rendering für HLS ist kein guter Anfang und nur ihre übliche Sabotage, die Jahre dauern wird, um eine Regression rückgängig zu machen. Das ist, was auf IOS9 passiert.

CORS sollte in IOS11 behoben sein und benötigt keinen Proxy

@danrossi Ich habe dieses Problem jetzt auch mit iOS 11, wenn Sie eine Lösung für dieses Problem finden, lassen Sie es mich bitte wissen. iOS 10 funktioniert mit dem CORS-Fix und Flip Y immer noch einwandfrei, aber iOS 11 spielt nur Audio ab.

Ich brauche noch ein neues iPad mit IOS11. HLS funktioniert im Beta-Simulator von IOS11? Es könnte mit CORS zu tun haben. Der RGB-Kanal-Flip würde invertierte Farben anzeigen. Schwarz könnte also mit CORS zusammenhängen?

Ich habe es ohne meinen CORS-Proxy und damit versucht, und ich habe immer noch das gleiche Problem. Ich habe es auch mal ohne Flip Y probiert, nur so, und es ändert sich nichts. Nur Ton, kein Video :/

Es gibt immer noch das gleiche Problem auf dem iOS11-Gerät, nur Ton, kein Video。 Jeder hat dieses Problem gelöst？

Ich habe es zum Laufen gebracht, indem ich das Video auf eine 2D-Leinwand gezeichnet und diese 2D-Leinwand als Textur in webgl verwendet habe.

Ich kann die 2D-Leinwandtextur auf ios11 nicht richtig abrufen. Könnten Sie den Code posten?

Das ist eine ganz schlechte Idee. Canvas-Zeichnen ist prozessorintensiv.

Ich habe das Webkit-Ticket in Bezug auf dieses Problem aktualisiert. Sie haben es überhaupt nicht angesprochen. Ich habe meine Workarounds sogar mit vollständigem Shader und Quellcode versehen. Von denen Sie behaupten, dass sie jetzt nicht funktionieren.

Ich weiß, dass jemand anderes ein Problem hat. Aber ich kann es noch nicht richtig testen, bis ich ein echtes brandneues Gerät bekomme. Der Simulator zeigt es richtig an. sind auf geplante Obsoleszenz gestoßen, bei der selbst ein Iphone 5 kein IOS 11 bekommen kann.

hier ist nochmal das Ticket. https://bugs.webkit.org/show_bug.cgi?id=163866#c17

@LoveLetterIloveU hier ist mein Beispielcode: https://htmlvideocanvas-sibabi.c9users.io/hello-world.html (NUR auf ios öffnen)
@danrossi hat recht, es ist nicht die beste lösung. Es macht im Grunde eine Memcopy von Byte-Arrays, anstatt den Zeiger zu binden. Es erledigt jedoch die Arbeit, während Apple das Projekt verwaltet. Ich evaluiere diesen Ansatz immer noch und habe auch eine mp4-Fallback-Methode bereit.

Ich habe zwei ganze Monate damit verbracht, diese Lösung oben zu finden, natürlich mit Hilfe von allen, die den Shader feinjustiert haben, also danke. Es bedeutet nur, dass wir mehr Zeit damit haben, ihnen entgegenzuwirken, um eine andere Lösung zu finden.

Ich hoffe es gibt einen.

Sie haben sich nicht die Mühe gemacht, das Flipy / HLS / Webgl-Problem zu beheben, das Sie in dem von mir erstellten Ticket sehen können.

Sie haben das CORS-Problem doch gerade erst behoben. Obwohl ich mir noch nicht sicher bin, ob es ihnen gelungen ist, Dash zum Laufen zu bringen.

Apple/Webkit ist mir ein Dorn im Auge. Es könnte bedeuten, dass ich versuchen muss, es selbst zu reparieren, und ich nicht mit C++ arbeite. Es wäre wirklich lustig, wenn ich es reparieren würde, aber ich würde gerne meine Haare behalten.

Kann mir jemand seinen Code posten, damit ich ihn mir ansehen kann, nur um sicherzustellen, dass FlipY aktiviert / deaktiviert ist.

Siehe meinen Kommentar hier. Ich habe dieses Sabotage-Chaos absolut satt. Wenn Sie flipY in der Textur deaktivieren, sollte ein Bild jedoch auf dem Kopf stehen. Es ist ein schwarzer Rahmen hier. Zurück zum Anfang. Sie haben eine Regression verursacht, die in IOS9 ein Problem war.

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

Ich schließe das ursprüngliche Webkit-Ticket, das nie angeschaut oder angesprochen wurde. Und beginnen Sie bald mit einem neuen, da es Zeit braucht, Beweise zu sammeln.

Es hat sich über das ursprüngliche FlipY-Problem hinaus entwickelt. Es scheint, dass sie sich nie die Mühe machen, zu überprüfen, ob HLS mit WebGL funktioniert, bevor das Betriebssystem veröffentlicht wird.

Ich habe das ursprüngliche Webkit-Ticket geschlossen, um ein neues zu starten, insbesondere HLS-Videotexturen mit webgl sind komplett kaputt und es gibt noch keine Möglichkeit zur Umgehung. Der ursprüngliche FlipY-Workaround ist nicht mehr relevant.

Ich habe festgestellt, dass alle Webkit-Webgl-Konformitätstests Mp4 verwenden.

Sie haben sich noch nie die Mühe gemacht, mit Apples eigenem Streaming-Format zu testen. Daher ist es mit einem brandneuen IOS 11-Update kaputt gegangen und immer noch kaputt.

Siehe hier für mehr

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

@danrossi Hast du einen Link zum neu geöffneten Ticket für Webkit? Ich bin gerade selbst über dieses Problem auf iOS11 gestolpert und bin sehr daran interessiert, alle Entwicklungen im Auge zu behalten.

Ich finanziere ihre Arbeit für sie selbst. Ich führe Konformitätstests mit HLS durch, das aus den Khronos-Test-MP4-Dateien generiert wird. Es behauptet, dass es bestanden hat, aber der Test kann nicht beweisen, ob es etwas anzeigt. Die Leinwand wird hier nicht einmal angezeigt. Eigentlich glaube ich, dass der Test auf IOS gar nicht richtig funktioniert. Es gibt keine Protokolle.

Ich muss ihre eigenen Testdateien verwenden, um zu beweisen, dass HLS-Texturen nicht funktionieren. Ich habe andere Testdateien gebaut und werde sie hochladen, um das Ticket zu erstellen.

Ich hoffe, es ist ein Webgl-Parameter erforderlich oder ein anderer, der wie beim letzten Mal deaktiviert werden muss.

Ok, soweit ich das mit den Webkit-Testdateien sehe. Sie sind nicht für IOS-Tests ausgelegt. Keine Benutzerklick-Funktionalität zum Spielen. Mp4 kann aus irgendeinem Grund automatisch abspielen, wie ich unter IOS 11 entdeckt habe, obwohl kein Attribut angegeben ist, aber HLS kann es immer noch nicht.

Ich glaube nicht, dass Tests speziell für IOS durchgeführt werden und ganz sicher wird kein Test für HLS durchgeführt.

Daher die Probleme. Es ist mehr als schlecht.

Ich habe alles, was ich brauche, um das Ticket einzureichen.

Soweit ich das beurteilen kann. Die webgl-Webkit-Tests sind fehlerhaft. Sie kümmern sich nicht um die Webgl-Canvas-Ausgabe. Sie zeichnen das Video als Vorschauausgabe in einer sehr kleinen Größe auf eine Leinwand.

Sie haben die Webgl-Leinwand, aber sie ist sehr klein, sodass Sie nicht einmal sehen können, ob sie gerendert wird oder nicht.

Ich musste die Tests für HLS ändern und sie bestehen nicht. Und jetzt habe ich die Webgl-Leinwand vergrößert, es ist schwarz.

Nachdem ich den Code zum Hinzufügen eines Benutzerklicks geändert habe, werden die Tests tatsächlich auf IOS ausgeführt.

Soweit ich sehen kann, wurden noch nie Tests für HLS durchgeführt und die Tests sind fehlerhaft. Und so hat es absolut jeden sabotiert.

Bitte schön. Ich verliere wirklich meine Geduld mit Apple und wie viel persönliche Arbeit erforderlich ist, um ihre Probleme zu beheben und Tests für sie durchzuführen.

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

Zwei Tage und keine Dringlichkeit, es sich anzusehen. Ich vermute, das wird nie angesprochen. Es hat Jahre gedauert und mehrere Versionen von IOS und Geräte-Upgrades für CORS behoben ?

Ich werde versuchen, mit Webgl-Flags und Shader-Code zu spielen, um zu sehen, ob etwas getan werden kann.

Können die Leute bitte dorthin gehen und etwas Lärm verursachen? Da es noch nicht einmal angeschaut wurde. Als ob es ihnen eigentlich egal wäre, HLS in ihrem eigenen Browser zu testen.

@jernoble könnten Sie uns aufzeigen, wer uns im Webkit-Team bei diesem Problem helfen könnte? Es wäre wirklich dankbar, wenn sich jemand damit auseinandersetzen oder uns ein Update geben könnte. Das Thema hier auf GitHub ist ziemlich lang, wurde aber hier zusammengefasst: https://bugs.webkit.org/show_bug.cgi?id=179417. Danke im Voraus.

Hallo @radiantmediaplayer. Sowohl @grorg als auch ich sind die richtigen Leute, um dieses Thema

Hallo Leute. Ich poste einen Beispiel-Workaround für iOS 11 mit temporärem Canvas, wie von http://redgetan.cc/demo/ios_11_hls_webgl_canvas_workaround/index.html funktioniert. Ich bin jedoch mit Three.js nicht vertraut, also ist es einfach nur Javascript.

CanvasRenderer. das ist Software-Rendering. Nicht produktionswürdig.

Ich bin mit @danrossi in diesem

@danrossi Mir ist gerade aufgefallen, dass dieses Problem geschlossen ist. Würden Sie es wieder öffnen?

Die brandneue Ausgabe ist da. Es hat nichts mit Three.JS zu tun und wird daher für ein Archiv aufbewahrt, denke ich.

Das Niveau der erforderlichen Tests war verrückt. Brach mir den Rücken, als würde ich den IOS10-Workaround finden. schau mal dort.

Bisher funktioniert nichts drum herum. Endlich sieht sich jemand an und wir haben keinen Einfluss darauf. Etwas, das mit einem gemeinsamen Verweis auf den Kontext für die Textur zu tun hat, die HLS sieht, unterscheidet sich von Mp4, was das Problem beheben könnte. Soweit ich das mitbekomme, müssen sie aber tatsächlich Zeit dafür aufwenden. Ich habe keine Möglichkeit, eine solche Build-Umgebung wie unter Windows einzurichten.

Aber ein Blick auf den Webkit-Code erklärt, warum IOS10 seltsame Farbprobleme mit HLS hatte. Es verwendet keinen Farbraumcode. Daher der Code, um beide Probleme für IOS10 / Safari zu umgehen.

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

Hi. Es scheint, dass ich selbst ein Rollback durchführen und einen Canvas-Renderer für die Unterstützung von IE11-Videotexturen implementieren muss. Es funktioniert nicht mit WebGL. Jemand hat danach gefragt.

Ich schätze, bei der Geschwindigkeit, die es braucht, um es zu überprüfen, kann es ungefähr 2 Jahre dauern, bis es repariert ist.

IOS 11 wird meiner Meinung nach beim Software-Rendering für HLS leiden müssen. In der Tonne ist die ganze IOS-Sache für VR. Das werde ich selbst umsetzen.

@redgetan , irgendwelche Ideen zur Implementierung mit Three.js? Ich habe versucht, den CanvasRenderer zu verwenden, und ich bekomme einen Netzrahmen über der Textur sichtbar und rendert eine Kugelgeometrie nicht richtig.

Die Canvas-Drei-Demo zeigt nur das gerenderte 2D-Video.

Es tut uns leid, dass Sie ein Webgl-Rendering verwenden, aber eine Leinwand als Texturbildquelle verwenden. Mal sehen, ob ich das reproduzieren kann. Es wird für mich nicht richtig gerendert und gedreht, wenn ich Leinwand als Textur verwende.

ok aus irgendeinem grund musste ich das machen.

Verwenden Sie den webgl-Renderer wie gewohnt. Aber für die Leinwandtextur und die Videozeichnung musste ich die Maße einstellen

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

Es wird jetzt richtig gerendert. Führt Tests auf IOS 11 durch.

@danrossi lass uns wissen, wie es unter iOS 11

Okay, keine Sorge. Ich werde bald einen grundlegenden Test mit einer fps-Statistikansicht online hinzufügen, wenn es zu funktionieren scheint. Es kann jetzt alles brauchen.

Gibt es eine Möglichkeit, die Prozessorleistung unter IOS zu überprüfen?

Ich habe einen Leinwandtexturtest gemacht. Es funktioniert, aber ein Video mit größerer Auflösung könnte es umfallen lassen.

Dieses HLS ist von geringer Qualität, hält also 40 fps. Eine mp4 mit größerer Auflösung, aber auch eine niedrige Qualität, blieb bei 30fps.

Eine Datei mit Produktionsauflösung kann 10 fps daraus erzielen. Dies ist für ein neues Ipad.

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

Hat dieses Problem etwas mit dem Problem zu tun, mit dem ich gerade auf dieser Seite konfrontiert bin: https://digitalejulegaver.firebaseapp.com/#catarina

Öffnen Sie es in Ihrem Safari-Browser auf einem Mac oder einem macOS-Gerät. Ein iPad oder iPhone kann diese eine Seite nicht verarbeiten, selbst wenn es sich in einem Chrome-Browser oder Mozilla befindet.

Ich bekomme eine schwarze Seite, aber in normalem Chrome auf dem Mac funktioniert es

@vongohren Sie müssen die FlipY-

Ich bin jedoch gerade zu meinen Webkit-Tickets zurückgekehrt und sie behaupteten, dass sie das FlipY-Problem für 10.13. Ich glaube, das ist High Sierra. Ich habe keine Chance, das zu testen, da ich ein Cloud-basiertes macOS verwende.

Dies erfordert eine weitere Überprüfung der Plattformversion, um keine FlipY-Workarounds für 10.13 zu benötigen. alles unter Version 13 wird es also erfordern. Ich habe ungefähr 4 verschiedene Plattform- und Browserversionsprüfungen für macOS und IOS, um mehrere Fehler zu umgehen. Der IOS 11-Check soll das Software-Textur-Rendering aktivieren!

Wenn Sie 10.13 überprüfen können, könnte dies hilfreich sein.

Hier sind die Details aller meiner Tickets.

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 hat 10.13 , aber du hast eine Demo, die getestet werden kann?

Die Three.js-Version, die ich jetzt verwende, ist für diese Fixes zu neu, daher bin ich mir nicht sicher, wo sie angewendet werden sollen.
Ich habe etwas namens data.flipY gefunden und auf false gesetzt. Hat aber nichts für meine App getan.

Ich verwende Three.js über diese Bibliothek: https://github.com/iberezansky/flip-book-jquery

CORS-Problem?

Funktioniert das ?

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

oder dieses

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

Meine riesigen Listen mit Testdateien befinden sich in diesen Tickets.

FlipY kann auf der Textur deaktiviert werden

texture.flipY = false;

Alles ist vor Ort, also sehen Sie nicht, warum Cors beeinflusst werden sollte. Aber diese beiden Links werden auf Safari und Chrome auf Mac 10.13 . nur schwarz angezeigt

Und die FlipY-Funktion hat nicht viel bewirkt, anstatt nur das Bild umzudrehen. Aber es war immer noch schwarz

Es hört sich so an, als ob in 10.13 das gleiche Problem wie bei IOS 11 vorliegt, bei dem die FlipY-Umgehung defekt ist. Das sind gute Informationen. und noch ein Fehler, über den ich berichten muss. Es ist so chaotisch, dass es mich verrückt macht. Ich werde dies im IOS-Ticket aktualisieren. in 10.12 muss der FlipY-Bug umgangen und ein separates Ticket dafür erstellt werden.

So wie jetzt in meinem VR-Feature. Sie müssen eine Plattformversionsprüfung für IOS 11 und 10.13 durchführen und einen Software-Rendering-Canvas-Texturmodus für hls bereitstellen.

Hier sind einige statische Utils, die ich für Funktionsprüfungen verwende, insbesondere für die Unterstützung von Cors oder für die Verwendung von Cors-Proxy-Quellen. Offensichtlich muss ich jetzt nach einer Version größer als 13 suchen, um vorübergehend Software-Rendering wie IOS 11 zu aktivieren.

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;
    }

Ihr habt da tolle Arbeit geleistet, hoffe ihr bekommt die Tickets sortiert :D

Hier ist die Arbeit mit der Leinwandtextur. Ich musste es für IOS 11 aktivieren. Möglicherweise muss ich die Versionsprüfung von macOS 13 durchführen und auch dafür aktivieren. wenn Sie denken, dass die FlipY-Umgehung für 10.13 kaputt ist? Ich muss ihnen Bericht erstatten.

Kumpel, du hast keine Ahnung, ich habe keinen Nutzen daraus, selbst finanziert, außer dass die Software aller einschließlich meiner eigenen Funktion kaum auf Apple OS funktioniert, haha.

Hier ist meine vollständige Integration im Moment, sie hat die Funktion, einschließlich der Apple-Fixes und Workarounds. Ich habe jetzt Cubemap-Videounterstützung.

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

Dies dauert an, seit ich vor ein paar Jahren zum ersten Mal darüber berichtet habe, das da saß und nichts tat!

Geht das für dich ?

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

Wenn Sie sagen, dass hier die Leinwandtextur funktioniert, wohin weisen Sie dann?

Dieser Flowplayer sieht süß aus! Wurde es häufig verwendet?

Was sollte ich in diesem Link sehen: http://dev.electroteque.org/webgl/three-canvas.html?
Wenn ich es in Chrome öffne - Version 63.0.3239.84 (Offizieller Build) (64-Bit) - auf macOS 10.13.1:
Ich sehe einen schwarzen Hintergrund mit einem FPS-Meter in der linken Ecke und einer Schaltfläche mit der Aufschrift AR aktivieren in der Mitte unten
Wenn ich darauf klicke, erhalte ich einen geteilten Bildschirm mit einem Einstellrad und einer Zurück-Taste. Aber die Leinwand selbst ist nur schwarz.

Wenn ich es in Safari Version 11.0.1 (13604.3.5) unter macOS 10.13.1 öffne:
Ich sehe das fliegende Video mit einem FPS-Meter in der linken Ecke und einer Schaltfläche mit der Aufschrift AR aktivieren in der Mitte unten. Ich kann auch für volle 360-Grad-Erfahrung herumscrollen.
Wenn ich auf die VR-Schaltfläche klicke, erhalte ich einen geteilten Bildschirm mit einem Einstellungsrad und einer Zurück-Schaltfläche. Und die Video-Leinwand, kann aber nicht scrollen, ich denke, das ist für den Kreisel zu kontrollieren.

Aber wenn ich im VR-Modus auf die Zurück-Taste drücke, bleibt das Video im VR-Modus hängen, und ich kann nicht mehr scrollen, und es bleibt in der Ansicht hängen, in der der VR-Modus gestartet wurde.

Diese Demo ist für HLS-Rendering auf Safari. Wenn Sie der Meinung sind, dass die FlipY-Fix-Demo auf Safari nicht funktioniert

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

müssen dann Canvas-Texturen mit 10.13 und IOS 11 Safari verwenden?

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

Lass es mich zwischen den beiden wissen. Ich interessiere mich nicht für Rotationssteuerungen, nur dass sie gerendert werden und nicht um einen schwarzen Rahmen.

Es ist wichtig zu 10.13, da ich es jetzt zum IOS 11-Webkit-Ticket hinzugefügt habe, auf das hier verwiesen wird. Angenommen, es handelt sich um eine "Regression", die das HLS-Rendering vollständig zerstört hat.

@danrossi funktioniert beides auf Safari, höhere Qualität mit hls-Version. Sie sind beide die richtige Richtung, wenn Sie sich fragen.

Aber keiner hat an Chrom gearbeitet.

OK. toll, ich muss meine Berichterstattung rückgängig machen.

Das ist also immer noch ein Problem, richtig?

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

Wenn dies der Fall ist, verwenden Sie den FlipY-Workaround als Standard für macOS.

Die HLS-Demo auf dieser Seite sollte für beide Browser funktionieren. Es wird Mediasource-Streaming für Chrome mit dem hls-Plugin verwenden. Es hat dann auch die FlipY-Workarounds für macOS.

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

Du hast Recht
http://dev.electroteque.org/webgl/three-hls.html
Dies funktioniert weder für Chrome noch für Safari

Der Linkflowplayer funktioniert für beide Browser

Danke Champion. Ich hatte genug Informationen, um die Tickets erneut zu aktualisieren. Das Problem mit macOS Safari unterscheidet sich von dem von IOS 11.

Sie müssen das Canvas-Texturbeispiel für IOS 11 verwenden.

Und für macOS Safari deaktivieren Sie FlipY auf der Textur und kehren die Y-Position auf dem Shader um, um sie in die richtige Richtung zu drehen. Sie müssen die Farbkanalinversion auch im Fragment-Shader für IOS 10 HLS durchführen. Der Shader-Code ist oben.

Also war ich heute Morgen für ungefähr 1 Stunde glücklich, als ich es geschafft habe, den iOS 11-Fall mit der obigen @danrossi Ich

Dies ist das Ergebnis, das ich auf einem iPhone 6 Plus mit iOS 11.2.1 erhalte, die Animation ist eigentlich ziemlich flüssig, aber sie ist einfach hässlich, verpixelt, verfälscht ...

Das erwartete Verhalten ist wie folgt (Nexus 5X mit Android 8 und dem neuesten Chrome - dies verwendet nicht die obige Problemumgehung).

Unser Anwendungsfall ist ein 360-HTML5-Player und in beiden obigen Beispielen ist das Video der gleiche HLS-Feed mit einer Bitrate http://www.rmp-streaming.com :1935/vod/sea360.mp4/playlist.m3u8

Wenn ich die Problemumgehung (siehe unten für meinen Code) auf Android anwende, erhalte ich das gleiche hässliche Rendering. Ist es das, was ich mit diesem neuen Workaround erreichen soll oder übersehe ich etwas?
Ich habe versucht, mit einigen Einstellungen zu spielen, aber ich sehe keine nennenswerte Verbesserung.

    // 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);

Ich mache das. Ich bin mir ziemlich sicher, dass dies die richtige Größe haben sollte.

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);
                });

Also habe ich es nach kurzem Herumstochern genagelt. Es scheint, dass die Off-Dom-Leinwand in unserer Konfiguration die genaue Größe der aktuell wiedergegebenen HLS-Wiedergabe haben muss, um korrekt gerendert zu werden (daher muss sie für ABR jedes Mal aktualisiert werden, wenn sich die Wiedergabe ändert). Unsere Tests zeigen, dass dies für iOS 11 in Ordnung ist (ok ist besser als nichts). Lassen Sie dies hier, wenn es jemand anderem hilft.

Ja, daher mache ich es im Loadata-Ereignis, um die Videobreite zu erhalten. Ich habe das schon einmal herausgefunden und hatte das gleiche Problem.

Bei nativem HLS gibt es jedoch kein Ereignis, wenn sich eine Bitrate ändert? Ich setze das nur einmal persönlich ein. Die Menge an Workarounds für Apple ist bereits unglaublich genug.

Mir ist kein von Safari bereitgestelltes Ereignis bekannt, das verwendet werden kann, um eine Änderung der Wiedergabe für ABR HLS zu erkennen. Wir aktualisieren einfach die Breite und Höhe der Off-Dom-Leinwand mit video.videoWidth und video.videoHeight für jeden AnimationFrame (was aus Sicht der Leistung wahrscheinlich nicht ideal ist, aber zu diesem Zeitpunkt haben wir es funktioniert und wir werden uns damit bis zu einem anderen zufrieden geben Option wird verfügbar). Unsere Tests zeigen, dass video.videoWidth und video.videoHeight entsprechend aktualisiert werden sollten, wenn eine neue Darstellung angezeigt wird.

Ja, für das, was es wert ist, ist es hacky genug. Dies ist also übertrieben, insbesondere wenn Bedingungsanweisungen in einem Frame-Callback enthalten sind. Was auch immer funktioniert, denke ich.

Sie können immer noch kein Änderungsereignis für die Wiedergabe bereitstellen. Ich glaube, es gibt eine Spezifikation für einen, wurde aber nie implementiert?

Der CORS-Proxy, um ältere Safari-Bugs zu umgehen, der HLS-Flipy-Fix ​​und jetzt reicht das.

Gut, dass alles funktioniert. Ich habe seit gut einem Monat oder so noch kein Update in meinen Tickets gesehen.

Ich kann mich nicht erinnern, in der HTML5-Videospezifikation etwas über ein Qualitätswechselereignis gesehen zu haben. Es gibt die von Apple gepflegte HLS-Spezifikation, die jedoch nicht beschreibt, was der Client bei einem Qualitätswechsel tun soll. Libs wie hls.js haben dies implementiert, aber dies ist für HLS zu nativem HTML5-Video in Safari nicht verfügbar.

Mir ist nur klar, dass ich unseren Hack "polyfill" könnte, um Änderungen in der Wiedergabe zu erkennen, indem ich video.videoWidth in festen Intervallen abfrage und wenn eine Änderung erkannt wird, dann den Rückruf zur Größenänderung aufrufen. Dies wird weniger belastend sein. Ich werde dies wahrscheinlich zu einem späteren Zeitpunkt in unserem Player implementieren.

@radiantmediaplayer Sie sollten das Ereignis "resize" verwenden können, um Änderungen an den zugrunde liegenden Eigenschaften .videoWidth und .videoHeight zu erkennen.

Hallo Leute, siehe meinen Kommentar hier. Es funktioniert.

Was für eine Tortur, die Tests zu machen und die Bewegungen durchzumachen. Nur um keine richtige Rückmeldung oder Antwort zu erhalten. Ich bin ernsthaft fertig! Bitte keine Rückschritte mehr !!

Installieren Sie OSX 11.3 Beta und es wird funktionieren. Vorheriges OSX 11 benötigt Software-Rendering, OSX 10 benötigt FlipY und Farbkorrektur. Ein kompliziertes Kompatibilitäts-Chaos und eine Plattformversionserkennung erforderlich.

Safari macOS hat immer noch das FlipY-Problem und ich habe auch dort keine Antwort erhalten, es ist in einem separaten Ticket. Ich kann HLS dort sowieso nicht richtig testen, bis ich versuchen kann, macOS auf meiner PC-Workstation zu installieren. HLS ist daran gehindert, in vmware zu spielen.

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

FlipY-Workarounds werden für OSX 11.3 auch nicht benötigt, aber ich glaube, ich habe es zuvor erwähnt.

Hier ist meine vollständige IOS- und Safari-Kompatibilitätsprüfung, die jetzt mit CORS beginnt.

Der Verstand gerät ins Wanken. Dieser ist verrückt. Ich musste sogar zukunftssicher sein und alles andere als IOS 12 einbinden.

Es wird an der Integration gearbeitet! Kann noch nicht überprüfen, was mit macOS los ist.

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;
    }

Verwendungszweck

 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;
          }

        }
    }

Korrektur ein letzter wichtiger Punkt. Die IOS-HLS-Rendering-Implementierung läuft auf kleinstem Raum und ist sehr empfindlich. Das Rendern muss nach loadata beginnen.

Sobald ein teximage2d-Fehler auftritt, erfolgt kein weiteres Rendern, sondern nur ein schwarzes Rendern. Es scheint, als wäre der Fix nie aufgetreten.

Wenn das Rendern beginnt, sobald Videodaten vorhanden sind, ist es in Ordnung. Vor dem 11.3 war das kein Problem.

Sieht so aus, als ob das Video wieder funktioniert (ohne vorübergehende Korrektur der Leinwand). Verifiziert für die neueste iOS-Version 11.3 (getestet auf iPhone 6s, 7).

Ja, ich glaube, ich habe am 15. Februar aktualisiert. In 11.3 wieder funktionsfähig. Ich habe nie ein Update bekommen. Ich musste speziell nachschauen und es hat funktioniert!

Wir haben viele Probleme mit Video -> Textur in iOS 11.3 (und der entsprechenden macOS-Version) behoben. Es tut uns leid, wenn wir die Fehler nicht geschlossen/aktualisiert haben.

Bitte lassen Sie es mich wissen, wenn weiterhin Probleme auftreten. Ich glaube, dass sowohl direkte Streams (zB mp4) als auch HTTP-Livestreams funktionieren sollten, und Flipy sollte genau wiedergegeben werden.

Es ist alles ab Februar fertig, wenn es gemeldet wird. Aber ich habe ursprünglich letztes Jahr irgendwann berichtet. Ich habe die IOS-Beta zufällig auf 11.3 aktualisiert und sie hat angefangen zu funktionieren. Der obige Kompatibilitätsprüfcode ist erforderlich, um mehrere Plattformumgehungen zu bewältigen.

IOS 10 erfordert den FlipY-Fix. IOS 11.0 - 11.2 erfordert Software-Rendering-Workarounds. 11.3 > kann ganz normal rendern.

Kann jemand ein funktionierendes Beispiel dafür teilen, eine jsfiddle oder so? Ich konnte in IOS 11 Safari immer noch einen schwarzen Bildschirm sehen. Ich konnte Audio hören, aber kein Video für HLS-Streaming

@dhanishapa Was ist deine iOS-Version? Ist es 11,3+?

Vor einiger Zeit (~ Mai 2018) hatte auch ich folgende Probleme mit HLS (? <= 11.2):

• Videosegmente wiederholen sich manchmal während der Wiedergabe
• Videos pausieren manchmal und zeigen einen schwarzen Bildschirm an
• Videos werden gepuffert, aber Audio wird fortgesetzt

Nach Kontakt mit Vimeo (ich nutze deren HLS-Dienst) konnten sie das Apple-Entwicklungsteam kontaktieren und gemeinsam an einem Fix arbeiten.

Wir haben gerade die Nachricht vom Apple-Entwicklungsteam erhalten, dass eine neue Version von iOS (11.3.1) veröffentlicht wurde, die eine Lösung für die von Ihnen gemeldeten Wiedergabeprobleme enthält. Der Fix sollte verhindern, dass Videos auf einem schwarzen Bildschirm anhalten, Videosegmente wiederholen oder in einem endlosen Ladezustand hängen bleiben.

Mir ist aufgefallen, dass die Wiedergabeprobleme bei iOS-Versionen niedriger als 11.3.1 verschwunden sind, als ich H264-kodiertes MP4 als Quelle während des Hochladens angegeben habe. Bei der Verwendung von Quicktime als Eingabeformat während des Hochladens traten Probleme auf.

Ich habe einige Unterschiede zwischen den Manifesten entdeckt, die von jeder Videodatei generiert werden (die Videocodecs nämlich "avc1.64001E,mp4a.40.2" für die funktionierende im Vergleich zu "hvc1.2.4.L63.90,mp4a.40.2" für die nicht funktionierende ).

Vielleicht sind diese Informationen für jeden nützlich.

Hi
Ich habe ein Problem mit dem HLS-Streaming auf IOS Safari.
Ich verwende Cors-Proxy. Ich habe versucht, den nativen hls-Player und den HTML5-Player zu verwenden und habe sogar gerade versucht, den m3u8-Link direkt in IOS abzuspielen, aber es funktioniert nicht, während es in Safari (Desktop - Mac), Chrome, Firefox funktioniert, nur nicht in IOS (iphone).

cors wurde in IOS 11.0 behoben. Der andere große Fix, den ich ausgearbeitet habe, ist in 11.3. 11.3 sollte jetzt draußen sein. Proxy nur für IOS 10 und 9 benötigt.

Bei mir funktioniert es 🙆🏽‍♂️

Hier ist eine Glitch-Demo eines HLS-Streams, der einer Kugel zugeordnet ist ( 360-Video von Playhouse-vr ).

Getestet auf macOS v10.13.4 + Safari v11.1 und iOS 11.4.1 + Safari

Ich sehe jetzt ein NEUES Problem mit dem schwarzen Bildschirm auf iOS 14.0 Safari und iPadOS 14.0 Safari. Der gleiche Player funktioniert mit iOS 13.7 Safari und iPadOS 13.7 Safari. Ich habe versucht, auf Three.js r120 (von r116) zu aktualisieren, aber ohne Erfolg. macOS Safari 14 ist in Ordnung. Sieht jemand das Gleiche? Gibt es einen Hinweis, was der nächste Schritt zur Unterstützung von iOS 14 ist?

Ja, sieh dir sowohl https://bugs.webkit.org/show_bug.cgi?id=215908 als auch https://bugs.webkit.org/show_bug.cgi?id=216250 für iOS 14-Regressionen an. Ich hoffe, dass beide schnell behoben werden können, da wahrscheinlich viele Websites betroffen sind.

Es ist ein nie endender Kampf mit Safari. Ich erwarte wieder Beschwerden für meine eigenen 360-Funktionen. Es dauert jedes Mal Monate, sie zu reparieren. Die ursprünglichen Workarounds habe ich oben gefunden. Es ist also an der Zeit, weitere Problemumgehungen zu finden !! Webkit testet kein HLS, es gibt keine HLS-Tests für WebGL Ich musste einige selbst machen.

Ich habe alle aufgeblähten Workarounds für verschiedene IOS in meinem Feature entfernt. Aber einer von ihnen musste Canvas-Software-Rendering für 11.0 verwenden ... Ich muss noch Plattform-Checks machen. Mit IOS 13 haben sie jetzt die Plattformprüfungen gebrochen. Das musste ich im Kartonprojekt beheben. Ich habe festgestellt, dass HLS in IOS 13 nicht sofort gerendert wird und eine Weile dauert, aber ich muss noch einmal überprüfen, wie ich dieses Problem behoben habe.

Es ist ihnen einfach egal. Keine WebXR-API, keine Wakelock-API wie bei Android gerade implementiert.

gemäß meiner Umgehung muss ich bei der Wiedergabeänderung neu konfigurieren. Und deaktivieren Sie die Zoom-on-Orbit-Steuerung. Dies stoppt das Schwarz-Rendering in IOS 13. IOS 14 muss überprüfen.

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

Ich habe 14.2 getestet. HLS OK. Fix oben wird es tun ...