Three.js: HLS en Safari / IOS ahora no funciona

Está dibujando en el lienzo y renderizando con el renderizador de lienzo, aunque soltando marcos. Se requiere algo con webgl.

Esta es una belleza. He modificado un poco una demostración de kpano con el flujo HLS proxy.

Está funcionando ahora en Safari OSX pero no en IOS 9. ¿Alguna idea de cuál es la diferencia? No soy un experto con las banderas webgl tristemente o lo que hacen. En IOS9 sigue siendo un marco negro.

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

este último enlace es rect / sonido negro solo en safari 9.1.3 / mac os x 10.11.6

¿Qué es HLS?

@makc ¿de verdad? Tengo OSX 10.10 y Safari 10. Bueno, eso explica el reciente cambio de sabotaje de Apple. Safari 10. Entonces, si somos Safari 10, todos estamos bien.

@mrdoob HLS = Transmisión de Apple. es decir, para transmisiones en vivo pero también VOD. La transmisión en vivo se convertirá en una norma con el equipo Terradeck. es decir, http://dev.electroteque.org/video/360/hls/ultra_light_flight.m3u8

¿Alguna idea de cuáles podrían ser las diferencias? Intenté cambiar algunas cosas en el primer ejemplo. El segundo ejemplo son las funciones webgl sin procesar.

entonces texImage2D renderizará parcialmente HLS pero aún no en IOS, ¿quizás porque no es Safari 10?

Por favor, perdóneme, he informado sobre algunos tickets de error de webkit.

Han ido y saboteado el hackeo del proxy CORS en una actualización de IOS. También se informa que macOS tampoco ha solucionado el problema de CORS en Safari.

Ahora tengo que averiguar cómo evitar su sabotaje. Tengo que hacer que funcione para probar aún más el funcionamiento de HLS en IOS. Apple me está haciendo sudar en serio para apagar sus fuegos jaja.

Si puedo obtener el renderizado de OSX, sería un comienzo. Solo necesito averiguar qué es diferente en three.js.

Todavía estoy tratando de hacer métodos de reducción para comparar qué es diferente. Una vez que me dé cuenta de eso, es posible que IOS también funcione.

¿Quizás los programas de sombreado adicionales dentro de three.js están causando los problemas de renderizado? No estoy en eso, pero estoy tratando de replicar en el ejemplo de webgl sin procesar lo que está haciendo three.js en ese ejemplo equirectangular. ¿Hay un código de sombreado de ejemplo para esto?

Encontré algunas funciones sin procesar aquí que espero poder replicar completamente lo que está haciendo three.js. No puedo simplemente copiar los programas de sombreado directamente porque algunas variables se establecen externamente, como la posición mundial.

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

Es posible que me haya encontrado con este o posiblemente un problema relacionado. Tengo archivos h264 mp4 ubicados en un bucket de S3 y los estoy cargando en un video.src como un blob.

Si subo a mi bucket de S3 usando el cargador de Amazon basado en la web, los videos se reproducen bien cuando se cargan directamente en Mobile Safari (iOS 10.0.1), pero si trato de reproducirlos usando mi visor de three.js, entonces obtengo un pantalla en negro. Sin embargo, si subo al bucket de S3 con Cyberduck, funcionan bien directamente en Mobile Safari y en three.js.

Parece que Cyberduck está configurando los metadatos 'Content-Type = video / mp4' y el cargador de AWS es 'Content-Type = application / octet-stream'. Cuando configuro manualmente estos metadatos en video / mp4, todo funciona correctamente.

Problema extraño, y uno que me hizo rascar mucho la cabeza. Avíseme si este es el mismo problema subyacente que este ticket, o si debo crear uno nuevo.

Gracias,
Dustin

Esto es para HLS mate como en fragmentos mpegts o archivos fragmentados no mp4. Mp4 está bien tanto en Safari como en IOS. Revisé el tipo mime en cyberduck y dice que el mpegts es correcto.

La misma secuencia funciona para mí en el ejemplo de webgl sin procesar, pero no en IOS, por supuesto. Su problema parece similar al mío, aunque como en un marco negro. Sin renderizado en absoluto.

@danrossi ok genial. Crearé un nuevo ticket específicamente para mi problema. Gracias.

Creo que este es el problema: www.krpano.com/ios/bugs/ios10-webgl-video-texture-crash/
Actualmente estoy tratando de implementar la misma solución para three.js, pero no llego muy lejos.

@fase uno. Es un problema de safari como un problema tanto en OSX como en IOS. Mp4 funciona bien para IOS y OSX. Jugaré con antialias.

Todavía no puedo resolver las diferencias entre los dos. Sin embargo, el ejemplo de webgl en bruto todavía no funcionará en IOS, pero hacer que funcione en OSX es un comienzo.

Me pregunto si puedo encontrar un programa de sombreado de equirrectángulos que funcione.

Más información aquí: http://stackoverflow.com/questions/39123109/rendering-a-video-with-webgl-in-ios-10-beta-7-safari-shows-weird-purplish-co.

Me doy cuenta de que se trata de un error del navegador, pero podría ser necesario implementar una solución alternativa dado el tiempo que tardan estos errores de WebGL en solucionarse.

En el caso de utilizar la textura a través del lienzo, el video se mostró en safari.
Sin embargo, dado que todavía hay problemas de CORS en iOS, solo funcionó en el mismo origen.
https://bugs.webkit.org/show_bug.cgi?id=135379

No estoy familiarizado con webgl, pero consulte lo siguiente.
https://github.com/NishimuraT/videojs-panorama/commit/bd99200d8831c7ad0d10d742e087953da0f44169

@NishimuraT Creo que sé a qué te refieres con usar canavasrender. Lo intenté para hacer el método de reducción.

Creo que estaba funcionando, pero causa graves pérdidas de fotogramas y problemas de rendimiento de reproducción debido a la CPU. Obviamente peor en IOS. Ipad 3 ya suelta marcos para webgl.

@danrossi Tuve un pequeño malentendido. Lo siento. Había enviado algo equivocado.

He confirmado el mismo problema con el proyecto elevr que usa webgl y sombreadores sin procesar. Tendré que hackear ese para trabajar en mi camino de regreso. Algo allí está causando problemas de renderizado y afectaría a three.js de la misma manera.

He confirmado en elevr que se está borrando automáticamente uniendo la textura que está causando que se rompa, es decir.

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

Si esto se comenta, está funcionando.

Esto también estaba causando un problema, no estoy seguro de para qué sirve.

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

¿Quizás hay una propiedad de borrado automático que está haciendo lo mismo en three.js?

Veo muchas referencias a

state.bindTexture(_gl.TEXTURE_2D, null);

Pero no sé dónde podría estar. ¿Es necesario hacer eso?

el código es demasiado loco para rastrear qué está causando el problema del dibujo de textura. Parece tener algo con esta unión de textura.

@danrossi, ¿hay alguna página que la muestre correctamente?

Perdón por el ruido, compañero. Hice más pruebas AB. De hecho, parece lo que mencioné, ya que también tuve que comentarlo para la demostración de elevr.

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

Esto está causando el problema. Sin embargo, sin él, la textura está al revés. Agregaré otra prueba para mostrar que ahora funciona.

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

Otro ejemplo crudo que encontré, comentó FLIP_Y. ¿Posible error de Webkit ahora?

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

La única referencia a flipY es esta, pero webkit nightly sigue siendo un problema

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

Si desactivo FlipY, lo que supongo que rompe la aceleración del hardware, ¿está funcionando?

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

Tratando de ver si es un error de webkit ahora. ¿Cómo es posible rotar la textura para solucionarlo por ahora?

¿Cómo es posible rotar la textura para solucionarlo por ahora?

¿Por qué no voltear la geometría uv o hacer eso en el sombreador?

@makc No tengo idea de cómo hacerlo.

Solo para ir más lejos. Este "arreglo" de FlipY no ayuda en IOS 9, solo lo probé.

Algo más es un problema ahora. Me tomó días rastrear este.

Puede que sea un problema de webkit, no de Three.JS, por lo que parece. Como de costumbre, lo siento mucho por esto.

También he presentado un informe allí https://bugs.webkit.org/show_bug.cgi?id=163866

No tengo ni idea de cómo hacerlo.

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

@makc confirma que

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

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

Sin embargo, el problema sigue siendo evidente en IOS.

@makc. Es muy posible que este programa de sombreado esté dando la vuelta, esto fue en una de las fuentes de demostración.

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

Se encuentra en la demostración original que parecía estar funcionando porque no usa la bandera FlipY, parece que lo está haciendo en el programa de sombreado.

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

¿No tienes idea de cómo integrar eso en three.js? ¿Sería mejor utilizar un programa de sombreado?

Todavía estoy depurando IOS ahora.

Este es interesante. Al intentar replicar ese cálculo en este ejemplo, parece que lo está volteando, pero aún lo escala mal.

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

Entonces gl_Position controla su posición.

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

¿Sería mejor utilizar un programa de sombreado?

El programa de sombreado se ejecuta una vez en cada cuadro, frente a cambiar uvs en la geometría solo una vez antes de que comience todo.

@makc probablemente sea mejor establecer los valores al principio. Si estoy en lo cierto, ¿estos valores de uv son variables en el programa de sombreado y se utilizan en el cálculo?

Veo en las fuentes algunas referencias a gl_Position. No estoy seguro si este es el correcto, pero hay uno como este

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

Gracias.

Probé todo tipo de trucos con webgl en IOS Safari para ver si puedo obtener un marco para renderizar y, por ahora, es negro. Mp4 está bien.

No hay muchos recursos sobre esto. Creo que mi descubrimiento también está buscando la gente. Es para transmisión en vivo por cierto, pero también para VOD.

Hice que alguien probara algunas cosas. Creen que este ejemplo de webgl sin procesar con la corrección FLIPY funciona en IOS 10, pero la versión three.js no, de hecho, se está bloqueando en ellos.

Noté que usaba el filtro MÁS CERCANO que hace que la textura se bloquee, traté de replicar ese pero el mismo problema para ellos.

así que ninguno de estos funciona

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

Pero esto es para ellos aunque IOS 9 para mí no

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

Después de algunas pruebas muy pesadas y dolorosas, he mejorado las demostraciones y el problema.

El trabajo alternativo de FlipY es necesario para HLS en OSX 10.11 y macOS, IOS 9 y 10. El ejemplo de webgl sin formato no usa FlipY porque está funcionando en el programa de sombreado. Con three.js, la geometría debe cambiarse.

Se muestra el renderizado HLS en IOS 10, pero tiene graves problemas de artefactos de color. Los marcos dejan de funcionar, pero creo que es un problema con el emulador y la caída de marcos. Ahora no tengo ningún dispositivo que pueda actualizarse a IOS 10. No aparece en absoluto en IOS 9. Ambos requieren el proxy CORS para mp4 y HLS.

Es posible que ahora tenga que proporcionar otro ticket con respecto al problema de reproducción del color con HLS en IOS 10 una vez que confirme que no es el emulador.

Esto es absolutamente doloroso, no es de extrañar que nadie quiera admitir Safari, pero la gente necesita que funcione.

Tuve que proporcionar aquí diferentes configuraciones de formato rgb. El predeterminado produce barras de color verticales, el rgba los colores son incorrectos. Pero en el emulador. Ahora no puedo probar correctamente IOS 10 porque mi dispositivo Ipad no es compatible. Intentaré conseguir un Iphone con IOS 10 para confirmar.

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

Concéntrese en estos dos ejemplos. los indicadores RGB no hacen ninguna diferencia en un dispositivo real, el simulador produce una salida defectuosa pero una salida similar cuando se usa el formato RGBA.

La solución alternativa de FlipY es necesaria para IOS 9/10 / OSX Safari con HLS.

He podido replicar un problema de color con la representación webGL de HLS que ahora necesita un segundo boleto, aunque no estoy seguro de si un error flakey de Webkit es un problema de three.js.

Tantas fallas y errores masivos que hacen que esto sea un obstáculo.

Por lo tanto, la salida de HLS webgl solo funciona parcialmente en IOS 10, no en IOS 9. Muchos dispositivos están bloqueados en 9 ahora. Necesito encontrar una solución alternativa para 9.

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

¡Hola! Tengo el mismo problema. ¿Tienes alguna solución ahora?

sí, está en esas demostraciones, pero verifique el segundo ticket con respecto a un problema de espacio de color con IOS 10. Parece que Webkit / Apple no hará ningún esfuerzo para que funcione en IOS 9, lo que significa que los dispositivos más antiguos como el Ipad 3 quedan fuera, aunque de todos modos, apenas podía renderizar a 5 fps. Primero tienes que concentrarte para que IOS 10 funcione.

Sin embargo, es una solución a este problema que se ha informado a Webkit. Es un problema en todos los Safari.

http://dev.electroteque.org/webgl/webgl.html parece no funcionar. Probé la página en ios10. Pero el safari se bloquea cuando se carga la página.

Utilice el ejemplo de threejs.

Probé todos los ejemplos enumerados sobre este tema. Parece que solo funciona http://dev.electroteque.org/webgl/webglrgba.html . Pero tiene un problema de espacio de color.

@wuyingfengsui esto está funcionando en IOS 10 Iphone.

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

Probablemente estés comprobando un simulador, apuesto. Ese es un problema enorme. No solo no actualizará el marco, sino que muestra barras de colores verdes. Sin embargo, cuando se usa la bandera RGBA, funcionará en un simulador. Hay un extraño problema de gráficos ahí.

En un IDevice real, verá el problema del espacio de color cuando use la bandera RGB como lo hace con la bandera RGBA en el simulador.

Me expulsaron de probar IOS 10 correctamente por ahora porque el Ipad 3 se ha vuelto obsoleto, pero afortunadamente tuve acceso a un Iphone.

Tome nota de la URL del proxy CORS también.

Consulte esto con respecto al problema del espacio de color ahora

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

y este ticket de webkit que dudo que alguna vez se molesten en arreglarlo y obtener un lanzamiento.

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

Encuentro que funciona cuando cambio RGB a RGBA en ios 10 iphone 7.

bien, entonces es diferente para diferentes dispositivos. Lo actualicé a RGBA. Cómo es esto ?

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

@danrossi Funciona.

@wuyingfengsui Tendré que actualizar el ticket del webkit con respecto a eso. Veo que hay otras banderas de colores con las que meterse y espero que una sea la correcta. Probé diferentes transmisiones de HLS y eran iguales.

Puedes ver que en las constantes three.js hay un rango de valores con los que jugar. es decir, estos. También hay banderas de tipo byte que se manejan. Ensayo y error y muy agotador ensayo y error.

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

Así que, lamentablemente, IOS 9 se ha vuelto completamente redundante con esto, no funcionará. Los dispositivos más antiguos nunca obtendrán IOS 10.

Creo que se está produciendo algún tipo de sabotaje y creo que estaba funcionando antes del lanzamiento de Safari 10. mi fase de prueba tomó meses debido a todas las inconsistencias con Apple y, a veces, con Android. Estoy bastante seguro de que cuando probé HLS estaba funcionando.

No estoy familiarizado con webGL. Creo que no se puede resolver hasta que el webkit lo solucione.

Esto es lo que carga la textura en webgl. esas banderas son de interés.

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

@wuyingfengsui, si les tomó más de 5 años "arreglar" parcialmente el problema de CORS en macOS, no contenga la respiración.

Es por eso que alguien tiene que sentarse allí y pensar en el trabajo y, lamentablemente, ese soy yo, jaja.

Si toma el ejemplo de webgl sin procesar, esas banderas pueden cambiarse. O hazlo a través de three.js usando las constantes y las propiedades "formato" y "tipo", el tipo es el tipo de byte, el formato es el formato de color que has visto que se requiere RGBA para que apenas funcione.

Pasaré algo de tiempo mañana para revisar cada bandera y espero que una combinación funcione.

@danrossi ¿Cómo te va?

Intenté jugar con todas las banderas posibles y nada. Solo puede aceptar banderas RGB y RGBA y el tipo de byte no está firmado. Otras opciones solo mostraban un lienzo negro. No estoy seguro de qué más hacer ?

@danrossi Gracias por tu trabajo. Encuentro que Hls.js reproduce el video de

@wuyingfengsui, este es un problema nativo de HLS con IOS ahora, mis correcciones anteriores solucionan el error para Safari OSX.

con la transmisión de Dash, el Safari anterior tenía problemas de CORS incluso con la solución de proxy. ¿Quizás en macOS también lo han arreglado?

Posiblemente no se pueda hacer nada más que proporcionar un método alternativo en three.js utilizando las correcciones de código anteriores.

Dudo que webkit y Apple lo solucionen alguna vez. Así que ahora todos los ojos están puestos en este boleto. el tema de la bandera RGB está relacionado con el renderizado de IOS 10 ahora. IOS 9 y los dispositivos más antiguos atrapados en él están llenos.

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

¿Alguna actualización aquí? ¿Alguien lo hizo funcionar con reproducción de color fija en iOS?

Consulte este boleto.

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

Dudo que el trabajo de HLS entre en three.js, tiene que salir de él.

El código para esa solución es el siguiente

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

Si desea jugar con las banderas de webgl, use el ejemplo de webgl sin formato. Probé todas las opciones posibles y nada ahora. Está bien y verdaderamente saboteado y no hay respuesta de webkit.

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

Gracias. ¿Hay otros formatos de video para transmitir a la bandera de video de iOS además de HLS? ¿Es posible transmitir H.264 sin problemas de renderizado?

@pedrofranceschi mp4 está bien. Es solo HLS que incluye opciones para la transmisión en vivo de video 360 en IOS.

La corrección flipY relacionada con este ticket debe aplicarse a las transmisiones de HLS y solo en Safari. Esta solución FlipY no funciona en IOS 9, que apaga los dispositivos más antiguos que no pueden obtener IOS 10.

Mi Ipad 3 que he estado usando para las pruebas nunca funcionará HLS y WebGl. Tuve que probar en un Iphone más nuevo. El simulador de IOS 10 apenas funcionaba y tenía problemas de artefactos de color similares al otro problema.

Al menos las banderas en línea para Iphone en IOS 10 funcionaron, ahora es posible video en línea y webgl, pero CORS sigue siendo un problema. CORS solo se corrige en Safari en macOS.

Solo hago hincapié en Safari porque es otro error de webkit clásico y la transmisión de HLS.JS en otros navegadores está bien.

Descubrí que se puede arreglar agregando un lienzo adicional. Pero solo funciona en iOS 10. Mira este compromiso: https://github.com/yanwsh/videojs-panorama/commit/0122b1bbd31093b77ca7f09900afa74e2c537037

Eso fue un no evento. Está usando la representación de lienzo con drawImage. No es WebGL. Es como usar el renderizador de lienzo three.js. El renderizador de lienzo realmente apesta en IOS causa cuadros caídos, no utilizables. ¿Es esta tu solución?

La calidad no es muy buena. Pero funciona :)

Dejar caer fotogramas es más que un problema de calidad :)

@mrdoob Probé el renderizador de lienzo como una

Todavía deja caer fotogramas haciendo esto.

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

@danrossi

@mrdoob Este número trata sobre HLS en Safari. Es realmente difícil hacer todas estas demostraciones. Pero he hecho algunas combinaciones.

También acabo de resolver que Chrome se niega a reproducir mp4 ahora a menos que esté usando la versión proxy de Safari CORS del mp4 ahh.

En lo que respecta al extraño problema de CanvasRenderer, que puede solucionar temporalmente el problema de HLS para IOS 10. Aquí hay combinaciones, así que muestre lo que está haciendo y algunas extrañas compensaciones de valores de rotación posibles. El código es el mismo. Hay una rejilla de malla sobre la textura.

Para Safari

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

Para Chrome

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

@danrossi La versión de Safari tampoco funciona en iOS 10 ...

Esto debería funcionar en IOS 10, pero debería ver artefactos de color.

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

Esas otras son pruebas de CanvasRenderer para intentar solucionar el problema de IOS, al menos debería estar funcionando en navegadores de escritorio y no lo está.

Esto debería funcionar en cualquier IOS, pero eso no me preocupa demasiado.

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

No creo que la solución CanvasRender sea una buena solución para IOS, pero es una opción. Porque no solo todavía necesita el proxy CORS, el dibujo del lienzo solo causará la pérdida de marcos. Safari OSX puede utilizar la solución FlipY en threejs-hls.html

Actualicé las demostraciones de lienzo, no parece que sea necesario dibujar externamente.

sin embargo, hay un problema extraño con la geometría de la esfera que no puedo descifrar, por lo tanto, la imagen no se representa o gira correctamente, está todo sesgado en un punto.

Haga clic en el área superior izquierda e intente arrastrar con controles de órbita.

El problema de la malla es que necesito agregar "overdraw: 0.5" al MeshBasicMaterial para que deje de mostrar la malla.

Ninguno de los dos requiere proxies CORS en safari cuando se usa CanvasRenderer. Intentaré mirar SoftwareRenderer a continuación para ver si funciona mejor ya que CanvasRenderer deja caer demasiados fotogramas.

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

Teniendo en cuenta que CanvasRenderer se ha marcado depreciado debido a la obvia caída de marcos. Supongo que el único último recurso es probar texturas de video con SoftwareRenderer. Ese cambio no parece funcionar todavía y no puede encontrar una configuración de ejemplo. Es solo un lienzo negro.

¿Alguna solución para la falla de color? Todo es azul

@andreabadesso Tengo dos entradas configuradas, tal vez debería fusionarlas.

Para OSX, hacer el trabajo de FlipY solucionará ese desagradable problema. Para IOS 10, se requiere algo más por completo.

El dibujo en lienzo es un fracaso masivo, ni siquiera se está renderizando correctamente desde el primer momento, parece que la geometría está distorsionada. También deja caer marcos.

Ahora estoy probando suerte con "SoftwareRenderer", que todavía se basa en el dibujo en lienzo. Todo lo que obtengo es un lienzo negro en este momento, así que nada. No hay documentación sobre cómo hacer que las texturas de video funcionen con él.

Simplemente no hay otra opción, webkit no responde y he probado todos los indicadores webgl posibles. Podría volver atrás e intentar jugar con las codificaciones, pero el HLS está empaquetado desde el archivo mp4 que funciona.

Mientras tanto, si alguien necesita una solución desesperada, este buscará archivos .ts, los convertirá a .mp4 y emitirá un websocket para que el cliente pueda descargar el siguiente fragmento en mp4 (que está funcionando en ios10):

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

Puedo proporcionar la solución completa si alguien está interesado.

@andreabadesso ¿Tiene la implementación del cliente sobre su solución?

Eso es extremadamente peligroso. No solo necesita un proxy CORS, sino que está intentando pasar a través de FFMPEG en tiempo real: O ¿IOS incluso tiene websockets? Sé que no puede hacer webrtc.

Intentar obtener una textura de video a través de un dibujo de lienzo a través de la opción SoftwareRenderer también es malo. Es solo un marco negro. Ambas opciones han sido un callejón sin salida. Esperaba que al menos el SoftwareRenderer uno funcione con texturas de video que solo muestra una textura de imagen.

Hola a todos, he estado trabajando en el problema del color durante el último día y encontré una solución que funciona para mi caso de uso. Este hilo ha sido muy útil y me gustaría contribuir.
El problema es que los colores rojo y azul se intercambian. Entonces usé ffmpeg para pre-cambiar esos colores. A medida que los colores se vuelven a activar en threejs, el video vuelve a su apariencia normal.
No es una solución óptima, pero funciona. (probado en IOS 10.2)

@Yralec

Supuse que se trataba de un problema de codificación o de perder el tiempo con la codificación.

Sin embargo, eso no va a ayudar a decir para wowza transmisión en vivo. Es probable que nadie controle cómo funcionan los codificadores en vivo. Quizás para VOD.

¿Tiene la bandera ffmpeg para confirmar?

Sigue siendo asombroso. Parece que esto no es un problema con three.js, aparte del problema de FlipY, que todavía es necesario.

No puedo entender por qué Webkit es así.

@danrossi

Aquí está el comando que usé:
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
Como puede ver, también estoy cambiando la salida, por lo que no necesito hacer eso en threejs yo mismo.

ok, iba a preguntar sobre eso.

¿No sería más fácil escribir un sombreador que intercambie azul y verde?

@mrdoob Tengo muy poco conocimiento sobre sombreadores, así que para mí no lo fue (ni siquiera pensé en eso), pero si sabes cómo escribir uno que intercambie rojo y azul, es casi seguro que sea una mejor solución.
También la transmisión en vivo finalmente podría funcionar.

@mrdoob Creo que estás en algo. Lo siento amigo, una vez más, esto se ha convertido en otro problema de Webkit. Sin embargo, la solución FlipY aún no se puede evitar.

Investigué un poco y parece que hay un intercambio de orden de canal como este, de ninguna manera soy un experto en sombreadores.

gl_FragColor = texture2D(u_image, v_texCoord).bgra;

@mredoob en mi ejemplo de webgl sin procesar Intenté algo como esto, pero el programa está roto y causa errores. Así que aquí es donde obtiene colores de la textura que obviamente es muy falsa y "bgra" intercambia los canales rojo y azul.

Todavía no tengo idea de cómo obtener una solución funcional de esto.

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

Hubo un error de programa simplemente al copiar y pegar.

Usando este código anterior. Puedo confirmar que lo que se está renderizando es lo que está visible en IOS 10, por lo que, con suerte, debería invertir los colores rojo y borroso que se intercambian en el sombreador.

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

@Yralec confirma que la inversión del orden de los canales de color en el sombreador se invierte nuevamente en IOS10. En el simulador tuve que cambiar el formato de color a rgba para que se renderizara sin líneas extrañas a través de él.

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

@mrdoob ¿cómo es posible aplicar este cambio de color de textura en los programas de sombreado integrados?

gl_FragColor=texture2D(sm,txt).bgra;

@mrdoob. Corrección. Este podría ser el que la gente estaría usando.

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

¿Cómo acceder a él para cambiarlo?

@danrossi Puedes hackear algo como esto en JS

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

Creo que necesito copiar los sombreadores en un THREE.ShaderMaterial, pero no tengo idea de cómo aplicar la textura.

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

Esa otra forma es inflexible, ya que debe aplicarse solo para transmisiones HLS en IOS.

en realidad, esto se renderiza en safari, pero la solución FlipY se rompe. Juega al revés. la mente se aturde. Todo este esfuerzo por culpa de Apple y Webkit jaja.

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

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

@WestLangley, el parche no parece funcionar. Debería ver los colores invertidos, pero no lo hago.

gl_FragColor = textura2D (sm, txt) .bgra;

este es el sombreador correcto para intercambiar [b] lue y [r] ed: el orden predeterminado es rgba, por lo que bgra los intercambia.

FlipY arreglar roturas

txt -> vec2 (txt.x, 1.0 - txt.y) por ejemplo

no tengo idea de como

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

el parche no parece funcionar. Debería ver los colores invertidos, pero no lo hago.

tal vez se esté aplicando el parche demasiado tarde

@makc sí, en mi ejemplo de webgl sin procesar, está haciendo el cambio en el sombreador.

Creo que si el cambio se realiza en el código UV que se publica en mi ejemplo de threejs, no se cambia cuadro por cuadro en el sombreador. Pensé que eliminaría un cálculo innecesario para procesar.

en el ejemplo de webgl sin formato, está volteado en el sombreador de vértices

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

luego, en el sombreador de fragmentos, esto invierte los canales de color.

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

intentar replicar eso en three.js es el problema ahora.

Disculpe, esto parece funcionar, pero la solución FlipY no funciona. Olvidé agregar 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
                });

Si cambio el valor predeterminado de tFlip a 1, se muestra de la manera correcta hacia arriba, entonces, ¿otra opción de solución para el problema de FlipY con HLS?

tFlip: { value: 1 }

el video ha decidido dejar de renderizarse en el simulador pero al menos veo un cambio de color. Lamentablemente, el parche no funciona, aunque al depurarlo definitivamente reemplaza el código de sombreado.

Parece que puedo hacer un cambio con ese valor solo dándole un 1 positivo en lugar de negativo.

Perdí el acceso a IOS10 una vez que desaprobaron los dispositivos más antiguos y lo obtuvieron como mi Ipad 3. Tengo que cargar el simulador en macOS arrancado en una unidad externa porque tengo un software que solo se ejecuta en 10.10. Tiempos divertidos con todo este sabotaje.

No tengo idea de si está actualizando el marco y girando correctamente todavía.

Con suerte, este ejemplo funciona en IOS 10. Es lo mejor que puedo hacer ahora mismo. En Safari debería mostrar colores invertidos.

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

El uso del material de sombreado arruina la escala de la imagen, la geometría y evita que la rotación de la cámara funcione de esta manera.

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

Tengo que intentar que este parche funcione.

Esto pareció funcionar, aunque todavía afecta la posición de la cámara. No creo que sea una opción viable. Produce aún más errores simplemente haciéndolo de esta manera. No representa lo mismo que usar 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
                });

Si traté de usar el material básico, no funcionará. es decir

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

En lugar de intentar piratear el sombreador incorporado, simplemente crearía un sombreador personalizado.

¡Aquí tienes! 😀

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/

No representa solo una pantalla negra.

@danrossi Funciona para mí.

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

Recuerde actualizar el tipo de color y los nombres de las variables

Se renderiza aquí ... (Chrome 55, OSX)

Este problema es sobre texturas de video con transmisiones HLS y Safari, especialmente IOS, me temo: |

No puedo ver cómo funciona meshbasic_frag y cómo se le aplica una textura. Eso es lo que está usando.

El programa equirect_frag no veo que se esté usando o seleccionado.

gl_FragColor = vec4( outgoingLight, diffuseColor.a );

Esto es todo lo que veo.

Creo que deberías olvidarte de meshbasic_frag y equirect_frag . Intente usar mi código como base y reemplace esto:

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

Con algo como esto:

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

@mrdoob

la parte trasera estaba causando el problema. Este programa de sombreado es ciertamente mucho más limpio que el habitual. Cuál es la diferencia ?

Al usar el sombreador personalizado, pierdo la corrección FlipY original.

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

Tuve que modificar un poco el código del vértice, x se invirtió y y necesitaba invertir. Lo pondré en un segundo.

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

Este programa de sombreado es ciertamente mucho más limpio que el habitual. Cuál es la diferencia ?

¡Magia! 😉

@mrdoob gracias campeón. perdón por el ruido, pero culpo a Apple de nuevo por este.

Entonces, para el video equirrectangular, ¿no debería actualizarse la demostración para usar esto quizás? Entonces, ¿el programa de sombreado que utiliza MeshBasicMaterial es innecesario para tales texturas de video? Lo probaré en navegadores y diferentes formatos de video.

¿Cerramos?

Aquí está la demostración actualizada

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

Entonces, para el video equirrectangular, ¿no debería actualizarse la demostración para usar esto quizás? Entonces, ¿el programa de sombreado que utiliza MeshBasicMaterial es innecesario para tales texturas de video?

Bueno, MeshBasicMaterial es más flexible y la gente no necesita escribir sombreadores. Es solo que, para este caso específico, fue más sencillo escribir un sombreador personalizado para solucionar el problema.

¿Cerramos?

¡Sí!

Funciona bien en IOS 10. Solo que los marcos no se actualizan en el simulador. Tendrá que esperar al hardware. Cerraré el otro 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" );

Con ligeros ajustes en el flipy, el mismo programa está trabajando en Chrome con webm.

@mrdoob Creo que este sombreador funciona en todos los navegadores con texturas de video. La corrección de cambio, "1.0 - uv.y" solo se requiere para HLS en Safari. La inversión del canal de color solo es necesaria para IOS10 con HLS.

Capas bastante locas de soluciones alternativas, incluido el proxy CORS.

Creo que esto funciona mejor que el sombreador proporcionado por meshbasicmaterial. Entonces, ¿debería ser este el estándar para las texturas de video? la rotación parece funcionar con el código de vértice.

Hola a todos
Estoy tratando de hacer un reproductor 360vr con three.js que muestre una transmisión en vivo de HLS (.m3u8 jugado con hls.js)
Funciona en Safari osx con webgl habilitado, pero en ipad 10.2 todos mis intentos se pierden en un lienzo negro (el sonido está funcionando)
Si desactivo el modo vr360, la transmisión de video funciona bien en todos los dispositivos.
Probé algunos de los métodos sugeridos, pero todavía tengo una representación de lienzo en negro.
¿Alguien sabe cómo trabajar?

Las correcciones de inversión de canal de color y FlipY están en este hilo.

Los errores de Webkit que rastreé están obsoletos y terminaron mostrando cierta arrogancia al respecto. Todavía está abierto pero nadie se molestará en mirarlos.

Necesita la corrección FlipY para Safari. Así que desactívelo todavía en la textura three.js.

Estos son los métodos formales de es6 que ideé para mi solución de reproductor. Todavía tengo pesadillas meses después de cazar esta mierda jaja.

Gracias a mrdoob, el campeón, por ofrecer la solución de material de sombreado. Estoy usando esto para todos los navegadores ahora. Es un sombreador más simple que uno que también se genera. Es solo para texturas de video.

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

uso

 let invertColour = false;

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

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

ok el comentario en la línea _gl.pixelStorei (_gl.UNPACK_FLIP_Y_WEBGL, texture.flipY) en three.js hace que el video se muestre en Safari (10.0.2, en la versión anterior solo era necesario habilitar el webgl en las herramientas de desarrollo, esto La opción no está disponible ahora) pero todavía tengo el problema en iPad y iPhone (que son mi objetivo)
Acerca de la solución shaderMaterial, no sé cómo aplicarla exactamente en mi código ...
gracias por su apoyo

La desactivación de FlipY en mis pruebas también fue necesaria para MacOs Safari 10.

Sí también para el mío (excepto para la versión anterior 9.xx)
Pero necesito usar el reproductor en dispositivos móviles para que esa solución no sea mi solución :-(

Necesita tanto la corrección FlipY como la inversión del canal de color en IOS. Y solo para IOS 10. No es bueno en IOS 9. Lo que deja fuera a muchos dispositivos más antiguos. Porque Apple los ha depreciado como mi Ipad 3. IOS 10 admite reproducción en línea, por lo que sería preferible de todos modos.

Estoy echando un vistazo a solucionar esto en iOS ahora. Pero estoy un poco confundido por los comentarios.

Para videos de HLS:

• iOS proporciona canales de color en el orden incorrecto (bgra en lugar de rgba). Sin embargo, los valores son correctos.
• macOS está produciendo una textura que requiere voltear en el eje X. Esto se puede solucionar usando setPixelStorei (UNPACK_FLIP_Y_WEBGL, verdadero)
• iOS está produciendo una textura que requiere voltear en el eje X, pero la solución anterior no funciona.

¿Es esto correcto?

La respuesta está en este boleto de arriba.

Solo como un aviso para ustedes, aparentemente la última actualización de iOS 10.3.3 solucionó el problema de bgr , lo que haría que la solución ... funcionara al revés. No estoy usando three.js, así que para cualquier pregunta / clasificación, consulte sus propias pruebas o la pregunta SO.

Como se esperaba. bastante estándar. Gracias por el aviso.

Deberían hacer lo correcto y actualizar el boleto que hice y lo dejé abierto y rancio. Para actualizar a todos los desarrolladores si hay una solución. Ellos no han. Entonces, ¿tienes que buscar versiones menores ahora?

Se supone que IOS 11 tiene correcciones de CORS, pero aún no lo ha hecho.

Me las arreglé para obtener xcode 9 beta. No viene con el simulador 10.3.3, solo 10.3.1 y 11. Probé en 11 y parece que todavía se requiere el rgba invertido. De lo contrario, debería ver una pantalla verde o ninguna. Tendré que ejecutar más pruebas desactivando la solución.

El simulador de IOS11 es un fracaso. No hay un simulador IOS 10.3.3. IOS11 aparentemente tiene CORS fijo.

Ahora que iOS 11 está disponible para el público, he estado realizando algunas pruebas y no puedo usar la solución en este hilo para iPhone iOS 11 (aún no he probado el iPad).

Puedo hacerlo funcionar (usando CORS hack, FlipY y correcciones de color) para iOS 10.3.3 en iPhone y iPad con HLS.
En iPhone iOS 11 tengo una pantalla negra con HLS (usando CORS hack, FlipY y correcciones de color). Creo que hay algo más que arreglar, pero hasta ahora no lo he señalado.

Con respecto al problema de CORS, parece haber mejorado en iOS 11 al menos para la descarga progresiva de MP4, pero no puedo confirmar para HLS debido a lo anterior.

Si alguien tiene mejor suerte, actualice: /

Estoy haciendo todo lo posible para conseguir un nuevo ipad para poder incluso obtener IOS11.

El emulador no tiene las correcciones, por lo que fue un error.

Tendré que confirmar si tengo que hacer un contraataque allí. O si los canales de color rgb se pueden cambiar.

El renderizado en negro para HLS no es un buen comienzo y solo su sabotaje habitual que llevará años revertir una regresión. Eso es lo que sucede en IOS9.

CORS debería haberse solucionado en IOS11 y no necesita un proxy

@danrossi También estoy enfrentando este problema ahora con iOS 11, si encuentra una solución a este problema, hágamelo saber. iOS 10 todavía funciona bien con la corrección CORS y Flip Y, pero iOS 11 solo reproduce audio.

Todavía necesito obtener un nuevo ipad con IOS11. ¿HLS está funcionando en el simulador beta de IOS11? Podría estar relacionado con CORS. El cambio de canal rgb mostraría colores invertidos. ¿Entonces el negro podría estar relacionado con CORS?

Lo he intentado sin mi proxy CORS y con él, y todavía tengo el mismo problema. También probé sin Flip Y por el simple hecho de hacerlo, y no cambia nada. Solo sonido, sin video: /

Todavía hay el mismo problema en el dispositivo ios11, solo sonido, sin video。 Alguien ha resuelto este problema？

Lo hice funcionar dibujando el video en un lienzo 2D y usando ese lienzo 2D como textura en webgl.

No puedo obtener la textura del lienzo 2D correctamente en ios11, ¿podría publicar el código?

Esa es una muy mala idea. El dibujo en lienzo requiere un uso intensivo del procesador.

He actualizado el ticket de webkit con respecto a este problema. No lo han abordado en absoluto. Incluso proporcioné mi trabajo con sombreadores completos y código fuente. Lo que usted afirma ahora no está funcionando.

Sé que alguien más tiene un problema. Pero todavía no puedo probarlo correctamente hasta que obtenga un dispositivo nuevo. El simulador lo muestra correctamente. se han encontrado con una obsolescencia planificada donde incluso un Iphone 5 no puede obtener IOS 11.

aquí está el boleto de nuevo. https://bugs.webkit.org/show_bug.cgi?id=163866#c17

@LoveLetterIloveU aquí está mi código de muestra: https://htmlvideocanvas-sibabi.c9users.io/hello-world.html (Abierto SOLO en ios)
@danrossi tiene razón, no es la mejor solución. Básicamente está haciendo memcopy de matrices de bytes en lugar de enlazar el puntero. sin embargo, hace el trabajo mientras Apple mantiene el proyecto. Todavía estoy evaluando este enfoque y también tengo un método de respaldo de mp4 listo para usar.

Pasé dos meses enteros encontrando la solución anterior con la ayuda de todos afinando el sombreador, por supuesto, así que gracias. Simplemente significa más tiempo para contrarrestarlos y encontrar otra solución.

Espero que haya uno.

No se han molestado en intentar solucionar el problema de flipy / HLS / webgl en absoluto, se puede ver en el ticket que hice.

Después de todo, solo solucionaron el problema de CORS. Aunque todavía no estoy seguro de si lograron que Dash funcionara.

Apple / webkit es la espina clavada en mi costado. Podría significar que tengo que intentar arreglarlo yo mismo y no hago c ++. Sería muy divertido si lo arreglara, pero me gustaría conservar mi cabello.

¿Alguien puede publicar su código para que lo vea, solo para asegurarse de que FlipY esté habilitado / deshabilitado?

Vea mi comentario aquí. He tenido una absoluta agitación de este lío de sabotaje. Desactivar flipY en la textura debería mostrar una imagen pero al revés. Aquí es un marco negro. De vuelta al principio. Han provocado una regresión que era un problema en IOS9.

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

Estoy cerrando el ticket de webkit original que ni siquiera se miró ni se abordó. Y comenzar uno nuevo pronto, ya que llevará tiempo reunir pruebas.

Ha ido más allá del problema original de FlipY. Parece que ni siquiera se molestan en comprobar que HLS funciona con WebGL antes de lanzar el sistema operativo.

Cerré el ticket de webkit original para comenzar uno nuevo, específicamente, las texturas de video HLS con webgl están completamente rotas y aún no es posible solucionarlo. La solución original de FlipY ya no es relevante.

He descubierto que todas las pruebas de conformidad de webkit webgl utilizan Mp4.

Nunca se han molestado en probar con el propio formato de transmisión de Apple. De ahí por qué se ha roto y aún está roto con una nueva actualización de IOS 11.

Vea aquí para más

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

@danrossi ¿Tiene un enlace al ticket recién abierto para webkit? Me acabo de encontrar con este problema en iOS11 y estoy ansioso por realizar un seguimiento de cualquier desarrollo.

Estoy autofinanciando su trabajo para ellos. Estoy ejecutando pruebas de conformidad con HLS generadas a partir de los archivos mp4 de prueba de Khronos. Afirma que pasa, pero la prueba no prueba si muestra algo. El lienzo ni siquiera se muestra aquí. En realidad, ni siquiera creo que la prueba funcione correctamente en IOS. No hay registros.

Tengo que usar sus propios archivos de prueba para demostrar que las texturas HLS no funcionan. He creado otros archivos de prueba y los subiré para hacer el ticket.

Espero que se requiera algún parámetro webgl u otro que deba desactivarse como la última vez.

Ok, por lo que veo con los archivos de prueba de webkit. No están diseñados para pruebas de IOS. No hay funcionalidad de clic de usuario para jugar. Mp4, por alguna razón, puede reproducir automáticamente lo que descubrí en IOS 11, aunque no se especifica ningún atributo, pero HLS aún no puede.

No creo que se realicen pruebas específicamente para IOS y, definitivamente, no se realizan pruebas para HLS.

De ahí los problemas. Está más que mal.

Tengo lo que necesito para enviar el ticket.

Por lo que puedo ver. Las pruebas de webgl webkit son defectuosas. No les importa la salida del lienzo webgl. Están dibujando el video en un lienzo como una salida de vista previa en un tamaño muy pequeño.

Tienen el lienzo webgl, pero es de un tamaño muy pequeño, por lo que ni siquiera verá si está renderizado o no.

Tuve que modificar las pruebas para HLS y no pasan. Y ahora he aumentado el tamaño del lienzo webgl, es negro.

Después de modificar el código para agregar usuario, haga clic en, las pruebas realmente comienzan a ejecutarse en IOS.

Por lo que puedo ver, nunca se han realizado pruebas para HLS y las pruebas son defectuosas. Y así ha saboteado absolutamente a todo el mundo.

Aquí tienes. Realmente estoy perdiendo la paciencia con Apple y la cantidad de trabajo personal que se requiere para solucionar sus problemas y ejecutar pruebas para ellos.

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

Dos días y ninguna urgencia por mirarlo. Sospecho que esto nunca se solucionará. ¿Se necesitaron años y múltiples versiones de IOS y actualizaciones de dispositivos para que CORS se arreglara?

Intentaré jugar con banderas webgl y código de sombreado para ver si se puede hacer algo.

¿Puede la gente ir allí y hacer ruido? Como aún no se ha mirado. Como si en realidad no les importara probar HLS en su propio navegador.

@jernoble, ¿ podría https://bugs.webkit.org/show_bug.cgi?id=179417. Gracias por adelantado.

Hola @radiantmediaplayer. Tanto @grorg como yo somos las personas adecuadas para hacer ping sobre este tema. Me pondré en CC a ese error de WebKit y crearé un radar que lo rastrea.

Hola chicos. Estoy publicando una solución alternativa de muestra para iOS 11 usando un lienzo temporal como lo describe @sorob . Puede verlo funcionando en http://redgetan.cc/demo/ios_11_hls_webgl_canvas_workaround/index.html . Sin embargo, no estoy familiarizado con Three.js, por lo que es simplemente javascript.

CanvasRenderer. eso es renderizado por software. No es digno de producción.

Estoy con @danrossi en este. Aparte de los problemas de rendimiento, no sería práctico mantener 2 soluciones completas diferentes para mostrar el contenido de HLS. Necesitamos llegar al fondo del problema del webkit de iOS. El nuevo ticket de webkit muestra actividad, lo que es una señal positiva. Con suerte, podemos encontrar algo, incluso si eso significa esperar a iOS 11. *.

@danrossi Acabo de notar que este problema está cerrado. ¿Lo volverías a abrir?

El nuevo número está aquí. No está relacionado con Three.JS, así que lo guardo para un archivo, supongo.

El nivel de pruebas requeridas fue una locura. Me rompí la espalda como si encontrara el trabajo de IOS10. echa un vistazo allí.

Nada funciona a su alrededor hasta ahora. Alguien finalmente está echando un vistazo y no está bajo nuestro control. Algo que tiene que ver con una referencia compartida al contexto de la textura al ver HLS es diferente a Mp4, lo que podría solucionarlo. Por lo que tengo entendido, en realidad tienen que dedicar tiempo a hacerlo. No tengo medios para configurar un entorno de compilación como el que tengo en Windows.

Pero al mirar el código del kit web, creo que creo que IOS10 tenía problemas de color extraños con HLS. No usa código de espacio de color. De ahí el código para solucionar ambos problemas allí para IOS10 / Safari.

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

Hola. Parece que yo mismo tengo que retroceder e implementar un renderizador de lienzo para el soporte de texturas de video IE11. No funciona con WebGL. Alguien estaba preguntando sobre eso.

Calculo que al ritmo que está tardando en ser examinado, podría llevar unos 2 años arreglarlo.

IOS 11 tendrá que sufrir con la renderización de software, creo, para HLS. En la papelera, todo IOS es para realidad virtual. Voy a implementar esto yo mismo.

@redgetan , ¿alguna idea de cómo implementar con three.js? Traté de usar CanvasRenderer y obtengo un marco de malla visible sobre la textura y no representa correctamente una geometría de esfera.

La demostración de Canvas tres solo muestra el video en 2D que se está renderizando.

Lo siento, estás usando un renderizado webgl pero usando un lienzo como fuente de imagen de textura. Ver si puedo replicar eso. No se representa ni gira correctamente para mí cuando utilizo lienzo como textura.

ok por alguna razón tuve que hacer esto.

Utilice el renderizador webgl como de costumbre. Pero para la textura del lienzo y el dibujo del video tuve que establecer las dimensiones

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

Se está renderizando correctamente ahora. Ejecutará pruebas en IOS 11.

@danrossi nos hizo saber cómo va en iOS 11. Es posible que en algún momento también tenga que seguir ese camino.

Ok, no te preocupes. Pronto agregaré una prueba básica con una vista de estadísticas de fps en línea si parece que funciona. Puede que necesite algo ahora mismo.

¿Hay alguna forma de verificar el rendimiento del procesador en IOS?

He hecho una prueba de textura de lienzo. Está funcionando, pero un video de mayor resolución podría hacer que se caiga.

Este HLS es de baja calidad, por lo que se mantiene a 40 fps. Un mp4 de mayor resolución pero también de baja calidad se mantuvo en 30 fps.

Un archivo de resolución de producción puede obtener 10 fps. Esto es para un nuevo Ipad.

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

¿Este problema tiene que ver con el problema que estoy enfrentando en esta página en este momento? Https://digitalejulegaver.firebaseapp.com/#catarina

Ábralo en su navegador Safari en una Mac o en un dispositivo macOS. Un ipad o iphone no puede manejar esta página, incluso si está en un navegador Chrome o mozilla.

Recibo una página en negro, pero en Chrome normal en Mac, funciona

@vongohren Debes usar las soluciones de FlipY que descubrí para HLS con macOS Safari y el sombreador que resolvimos en este ticket.

Sin embargo, acabo de volver a mis tickets de webkit y afirmaron que solucionaron el problema de FlipY para 10.13. Creo que esto es High Sierra. No hay posibilidad de probar eso para mí, ya que estoy usando un macOS basado en la nube.

Esto requerirá otra verificación de la versión de la plataforma para no requerir soluciones alternativas de FlipY para 10.13. por lo que cualquier cosa por debajo de la versión 13 lo requerirá. Tengo alrededor de 4 verificaciones de versión de navegador y plataforma diferentes para macOS e IOS para solucionar varios errores. ¡La verificación de IOS 11 es activar la renderización de texturas por software!

Si puede marcar 10.13, esto podría ser útil.

Aquí están los detalles de todas mis entradas.

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 obtuvo 10.13, pero ¿tiene una demostración que se puede probar?

La versión de three.js que estoy usando ahora es nueva para estas correcciones, así que no estoy seguro de dónde aplicarlas.
Encontré algo llamado data.flipY y lo puse en falso. Pero no hice nada por mi aplicación.

Estoy usando three.js a través de esta biblioteca: https://github.com/iberezansky/flip-book-jquery

¿CORES problemamos ?

Esto funciona ?

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

o esto

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

Mis listas masivas de archivos de prueba están en esos tickets.

FlipY se puede desactivar en la textura

texture.flipY = false;

Todo es local, así que no veas por qué se deben realizar los cors. Pero esos dos enlaces solo se muestran en negro tanto en Safari como en Chrome, en Mac 10.13

Y la función flipY no hizo mucho, en lugar de simplemente darle la vuelta a la imagen. Pero aun estaba negro

Parece que en 10.13 sufre el mismo problema que IOS 11, donde el funcionamiento de FlipY está roto. Ésta es una buena información. y otro error más del que informar. Es tan desordenado que me está volviendo loco. Actualizaré esto en el ticket de IOS. en 10.12, el error FlipY requiere que se solucione y se haga un boleto por separado.

Así que como en mi función de realidad virtual ahora. Debe verificar la versión de la plataforma para IOS 11 y 10.13 y proporcionar un modo de textura de lienzo de renderizado de software para hls.

aquí hay algunas utilidades estáticas que estoy usando para las comprobaciones de funciones, especialmente el soporte de cors o el uso de fuentes de proxy de cors. Obviamente, ahora tengo que buscar una versión superior a 13 para activar temporalmente el procesamiento de software como IOS 11.

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

Ha hecho un gran trabajo en esto, espero que resuelva las entradas: D

Aquí está el trabajo de la textura del lienzo. Tuve que activarlo para IOS 11. Es posible que deba verificar la versión de macOS 13 y habilitarlo para eso también. si crees que la solución flipY está rota para 10.13? Tengo que informarles.

Amigo, no tienes idea, no obtengo ningún beneficio de ello, autofinanciado, aparte de hacer que el software de todos, incluida mi propia función, apenas funcione en Apple OS, jaja.

Aquí está mi integración completa en este momento, tiene las obras, incluidas las correcciones de Apple y las soluciones. Ahora tengo soporte de video cubemap.

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

Esto ha estado en curso desde que lo informé por primera vez hace unos años, ¡que me senté allí sin hacer nada!

Esto funciona para tí ?

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

Cuando dices que aquí está la textura del lienzo, ¿a dónde apuntas?

¡Ese flowplayer se ve dulce! ¿Ha visto mucho uso?

¿Qué debería ver en este enlace: http://dev.electroteque.org/webgl/three-canvas.html?
Cuando lo abro en Chrome, versión 63.0.3239.84 (compilación oficial) (64 bits), en macOS 10.13.1:
Veo un fondo negro con un medidor de FPS en la esquina izquierda y un botón que dice activar AR en la parte inferior central
Cuando hago clic en eso, aparece una pantalla dividida, con una rueda de configuración y un botón de retroceso. Pero el lienzo en sí es simplemente negro.

Cuando lo abro en Safari versión 11.0.1 (13604.3.5) en macOS 10.13.1:
Veo el video de vuelo con un medidor de FPS en la esquina izquierda y un botón que dice activar AR en la parte inferior central. También puedo desplazarme para obtener una experiencia completa de 360 ​​grados.
Cuando hago clic en el botón VR, aparece una pantalla dividida, con una rueda de configuración y un botón de retroceso. Y el lienzo de video, pero no puede desplazarse, supongo que es para que lo controle el giróscopo.

Pero si presiono el botón Atrás desde el modo VR, el video se atasca en el modo VR, y no puedo desplazarme más, y está atascado en la vista en la que comenzó el modo VR.

Esa demostración es para renderizar HLS en Safari. Si cree que la demostración de flipY fix no funciona en Safari

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

¿Entonces tienes que usar texturas de lienzo con 10.13 y IOS 11 Safari?

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

Avísame entre los dos. No me importan los controles de rotación solo que se renderiza y no un marco negro.

Es importante sobre 10.13, ya que lo agregué al ticket del kit web de IOS 11 al que se hace referencia aquí ahora. Asumiendo que es una "regresión" que rompió por completo el renderizado de HLS.

@danrossi ambos funcionan en safari, mayor calidad con la versión hls. Ambos son la dirección correcta si se lo pregunta.

Pero ninguno funcionó en cromo.

está bien. genial, necesito deshacer mis informes.

Entonces, ¿esto sigue siendo un problema correcto?

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

Si ese es el caso, use FlipY work around como estándar para macOS, entonces.

La demostración de HLS en esta página debería funcionar para ambos navegadores. Utilizará la transmisión de fuentes de medios para Chrome con el complemento hls. También tiene las soluciones FlipY para macOS en ese momento.

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

Estás en lo correcto
http://dev.electroteque.org/webgl/three-hls.html
Esto no funciona ni para Chrome ni para Safari.

El link flowplayer funciona para ambos navegadores.

Gracias campeón. Tenía suficiente información para actualizar las entradas nuevamente. El problema de macOS Safari es diferente al de IOS 11.

Debe utilizar el ejemplo de textura de lienzo para IOS 11.

Y para macOS Safari, desactive FlipY en la textura e invierta la posición Y en el sombreador para darle la vuelta. También debe realizar la inversión del canal de color en el sombreador de fragmentos para IOS 10 HLS. El código de sombreado está arriba.

Así que estuve feliz durante aproximadamente 1 hora esta mañana cuando logré descifrar el caso de iOS 11 con la solución anterior ( @danrossi me

Este es el resultado que obtengo en un iPhone 6 Plus con iOS 11.2.1, la animación es bastante fluida pero es fea, pixelada, con alias ...

El comportamiento esperado es el siguiente (Nexus 5X con Android 8 y Chrome más reciente; esto no usa la solución anterior).

Nuestro caso de uso es un reproductor 360 HTML5 y en las dos muestras anteriores el video es el mismo feed HLS de tasa de bits única http://www.rmp-streaming.com : 1935 / vod / sea360.mp4 / playlist.m3u8

Si aplico la solución alternativa (ver más abajo para mi código) a Android, obtengo el mismo renderizado feo. ¿Es lo que se supone que debo obtener con esta nueva solución o me estoy perdiendo algo?
Intenté jugar con algunos de los ajustes, pero no veo ninguna mejora notable.

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

Estoy haciendo esto. Estoy bastante seguro de que esto debería dimensionarlo correctamente.

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

Así que lo clavé después de pinchar un poco. Parece que en nuestra configuración, el lienzo externo debe tener el tamaño exacto de la reproducción HLS actual que se está reproduciendo para que se procese correctamente (por lo tanto, para ABR, debe actualizarse cada vez que cambia la reproducción). Nuestras pruebas muestran que esto funciona bien para iOS 11 (ok es mejor que nada). Dejando esto aquí si ayuda a alguien más.

Sí, por lo tanto, lo hago en el evento loadedata para obtener el ancho del video. Me di cuenta de esto antes y tenía el mismo problema.

Sin embargo, para HLS nativo, ¿no hay ningún evento cuando cambia una tasa de bits? Solo estoy estableciendo una vez personalmente. La cantidad de soluciones alternativas para Apple ya es lo suficientemente increíble.

No hay ningún evento, que yo sepa, proporcionado por Safari que pueda usarse para detectar un cambio en la interpretación de ABR HLS. Simplemente actualizamos el ancho y alto del lienzo externo con video.videoWidth y video.videoHeight en cada AnimationFrame (lo cual probablemente no sea ideal desde el punto de vista del rendimiento, pero en esta etapa lo tenemos funcionando y lo aceptaremos hasta otro momento). la opción está disponible). Nuestras pruebas muestran que video.videoWidth y video.videoHeight deben actualizarse en consecuencia cuando se muestra una nueva interpretación.

Sí, por lo que vale, es lo suficientemente hacky. Por lo tanto, hacer eso es excesivo, especialmente si hay declaraciones de condición en una devolución de llamada de marco. Lo que sea que funcione por ahora, supongo.

Todavía no pueden proporcionar un evento de cambio de interpretación. Creo que hay una especificación para uno, pero nunca se implementó.

El proxy CORS para trabajar con errores antiguos de Safari, la corrección de HLS flipy y ahora esto es suficiente.

Me alegro de que todo esté funcionando. Todavía no he visto ninguna actualización en mis boletos durante un buen mes más o menos.

No recuerdo haber visto algo en la especificación de video HTML5 sobre un evento de cambio de calidad. Existe la especificación HLS mantenida por Apple, pero no describe qué debe hacer el cliente cuando ocurre un cambio de calidad. Libs como hls.js tienen esto implementado, pero esto no está disponible para HLS a video HTML5 nativo en Safari.

Me acabo de dar cuenta de que podría "polyfill" nuestro truco para detectar cambios en la interpretación consultando video.videoWidth a intervalos fijos y cuando se detecta un cambio, llame a la devolución de llamada de cambio de tamaño. Esto será menos agotador. Probablemente implemente esto en una etapa posterior en nuestro reproductor.

@radiantmediaplayer Debería poder utilizar el evento "resize" para detectar cambios en las propiedades subyacentes .videoWidth y .videoHeight.

Hola chicos, vean mi comentario aquí. Esta funcionando.

Qué calvario fue hacer pruebas y seguir los movimientos. Solo para no obtener comentarios o respuestas adecuadas. ¡En serio he terminado! ¡¡No más regresiones por favor !!

Instale OSX 11.3 beta y funcionará. OSX 11 anterior necesita procesamiento de software, OSX 10 necesita corrección de cambio y color. Se requiere un complicado desorden de compatibilidad y detección de versión de plataforma.

Safari macOS todavía tiene el problema FlipY y tampoco obtuve respuesta allí, está en un boleto separado. No puedo probar correctamente HLS allí de todos modos hasta que pueda intentar instalar macOS en la estación de trabajo de mi PC. HLS no puede reproducirse en vmware.

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

Las soluciones FlipY tampoco son necesarias para OSX 11.3, pero creo que lo mencioné antes.

Aquí está mi verificación completa de compatibilidad con IOS y Safari que ahora comienza con CORS.

La mente se aturde. Este es una locura. Incluso tuve que hacer una prueba de futuro e incluir algo más que IOS 12.

¡Está trabajando en la integración! Todavía no puedo comprobar qué está pasando con 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;
    }

Uso

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

        }
    }

Corrección un último punto importante. La implementación de la representación de IOS HLS se está ejecutando con poco dinero y es muy delicada. El renderizado debe comenzar después de loadedata.

Tan pronto como se produce un error teximage2d, no ocurre más renderizado, solo renderizado en negro, parecerá que la solución nunca ocurrió.

Si el renderizado comienza tan pronto como hay datos de video, está bien. No era un problema antes del 11.3.

Parece que el video está funcionando nuevamente (sin una corrección temporal del lienzo). Verificado para la última versión de ios 11.3 (probado en iphone 6s, 7).

Sí, creo que lo actualicé el 15 de febrero. Trabajando de nuevo en la versión 11.3. Nunca recibí una actualización. ¡Tuve que volver a verificar específicamente y estaba funcionando!

Solucionamos muchos problemas con el video -> textura en iOS 11.3 (y la versión equivalente de macOS). Lo siento si no cerramos / actualizamos los errores.

Avísame si sigues teniendo problemas. Creo que las transmisiones directas (por ejemplo, mp4) y las transmisiones en vivo HTTP deberían funcionar, y las volutas deben reflejarse con precisión.

Todo está hecho a partir de febrero cuando se informó. Pero originalmente informé el año pasado en algún momento. Actualicé aleatoriamente la versión beta de IOS a 11.3 y comenzó a funcionar. El código de verificación de compatibilidad anterior es necesario para hacer frente a múltiples soluciones de plataforma.

IOS 10 requiere la corrección flipY. IOS 11.0 - 11.2 requiere soluciones de procesamiento de software. 11.3> puede renderizarse normalmente.

¿Alguien puede compartir una muestra de trabajo para esto, un jsfiddle o algo así? Todavía podía ver una pantalla negra en IOS 11 Safari. Pude escuchar audio pero no video para transmisión HLS

@dhanishapa ¿Cuál es tu versión de iOS? ¿Es 11.3+?

Hace un tiempo (~ mayo de 2018) yo también estaba experimentando los siguientes problemas con HLS (? <= 11.2):

• A veces, los segmentos de video se repiten durante la reproducción
• Los videos a veces se pausan y muestran una pantalla negra
• Los videos se almacenan en búfer pero el audio continúa

Después de tener contacto con Vimeo (estoy usando su servicio HLS), pudieron contactar al equipo de desarrollo de Apple y trabajar juntos en una solución.

Acabamos de recibir noticias del equipo de desarrollo de Apple de que se ha lanzado una nueva versión de iOS (11.3.1), que incluye una solución para los problemas de reproducción que informó. La solución debería evitar que los videos se detengan en una pantalla negra, se repitan segmentos de video o queden atrapados en un estado de carga sin fin.

Me di cuenta de que cuando proporcioné MP4 codificado en H264 como fuente durante la carga, los problemas de reproducción desaparecieron en las versiones de iOS anteriores a la 11.3.1. Experimenté problemas al usar Quicktime como formato de entrada durante la carga.

Vi algunas diferencias entre los manifiestos generados por cada archivo de video (los códecs de video son "avc1.64001E, mp4a.40.2" para el que funciona y "hvc1.2.4.L63.90, mp4a.40.2" para el que no funciona ).

Quizás esta información sea útil para cualquiera.

Hola
Tengo problemas con la transmisión de HLS en IOS Safari.
Estoy usando cors proxy. Intenté usar el reproductor hls nativo y el reproductor html5 e incluso intenté reproducir el enlace m3u8 directamente en IOS pero no funciona, mientras que funciona en safari (escritorio - mac), chrome, firefox, pero no en IOS (iphone)

cors se corrigió en IOS 11.0. La otra gran solución que resolví está en 11.3. 11.3 debería estar disponible ahora. Proxy solo se necesita para IOS 10 y 9.

Me está funcionando 🙆🏽‍♂️

Aquí hay una demostración de video 360 de playhouse-vr ).

Probado en macOS v10.13.4 + Safari v11.1 y iOS 11.4.1 + Safari

Veo un NUEVO problema de pantalla negra ahora en iOS 14.0 Safari y iPadOS 14.0 Safari. El mismo reproductor funciona con iOS 13.7 Safari y iPadOS 13.7 Safari. Intenté actualizar a three.js r120 (desde r116) pero fue en vano. macOS Safari 14 está bien. ¿Alguien está viendo lo mismo? ¿Alguna pista sobre cuál es el siguiente paso para admitir iOS 14?

Sí, consulte https://bugs.webkit.org/show_bug.cgi?id=215908 y https://bugs.webkit.org/show_bug.cgi?id=216250 para las regresiones de iOS 14. Espero que ambos puedan abordarse rápidamente, ya que es probable que muchos sitios se vean afectados.

Es una batalla sin fin con Safari. Espero quejas nuevamente por mis propias funciones 360. Cada vez se necesitan meses para arreglarlos. Encontré el trabajo original arriba. ¡Así que es hora de encontrar más soluciones! Webkit no prueba HLS, no tienen pruebas HLS para WebGL. Tuve que hacer algunas yo mismo.

Eliminé todas las soluciones infladas para diferentes IOS en mi función. Pero uno de ellos tuvo que usar la representación del software de lienzo para la versión 11.0 ... todavía tengo que hacer comprobaciones de la plataforma. Con IOS 13 ahora han roto los controles de plataforma. Tuve que arreglar eso en el proyecto de cartón. Descubrí que HLS no se procesa de inmediato y lleva un tiempo en IOS 13, pero tengo que revisar cómo solucioné ese problema.

Simplemente no les importa. Sin api de WebXR, sin api de Wakelock como Android recién implementado.

de acuerdo con mi trabajo, tengo que reconfigurar el cambio de interpretación. Y deshabilite el zoom en el control de órbita. Esto detiene la reproducción en negro en IOS 13. IOS 14 debe verificar.

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

He probado 14.2. HLS OK. Arreglar arriba lo hará ...