Three.js: Excepción 18 de DOM de Safari / Firefox para textura de video en tiempo real

¿El problema al revés es parte del problema?

Al revés no es parte del problema. Ese era yo siendo un vago> _ <

Puedo reproducir aquí. ¿Has intentado tener un lienzo intermedio?

: +1 :, en el medio como un lienzo 2d?

Sí, use un lienzo 2d como textura y dibuje la imagen del video en él.

Lo haré ahora. https://dl.dropboxusercontent.com/u/1595444/shaka-player/shaka-canvas.html

Parece que en Safari no se lanza DOM Exception 18 , pero la imagen no se transfiere. Lo mismo con Firefox. ¿Eso significa que se trata de una implementación del navegador?

Frente al mismo problema. Safari lanza Dom Exception 18, Firefox no carga la imagen pero tampoco muestra errores. @ jonobr1, ¿está recibiendo algún error en Firefox?

No hay errores en Firefox, pero tampoco imagen. Voy a archivar errores con WebKit
y Mozilla respectivamente y vea si surge alguna información adicional.

No sé ustedes, chicos, pero no he visto ninguna demostración de transmisión de video.
subido a una textura WebGL. ¿Quizás haya uno con YouTube como fuente?
El jueves 11 de febrero de 2016 a las 11:11 p.m. Taha Sabih [email protected]
escribió:

Frente al mismo problema. Safari lanza Dom Exception 18, Firefox no
carga la imagen pero tampoco muestra errores. @ jonobr1
https://github.com/jonobr1 ¿está recibiendo algún error en Firefox?

-
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/mrdoob/three.js/issues/8110#issuecomment -183208337.

La transmisión de video en sí misma no es un problema. Si crea un elemento de video en js y usa video.src para establecer la fuente del elemento de video, el video se transmite bien. La transmisión adaptativa con shaka es un problema. Siento que el problema está en las implementaciones de CORS en webkit y gecko, por lo tanto, DOM Exception 18 en Safari. El siguiente ejemplo funciona perfectamente con fuentes de video del mismo dominio en todos los navegadores.

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

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

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

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

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

Solo para aclarar, no creo que video.src = "<your mp4 source>"; esté transmitiendo. Creo que es una descarga progresiva . Pero sí, estoy de acuerdo contigo.

Los chicos son personas que todavía están resolviendo esto. Solo va a empeorar ahora que la gente está tratando de hacer videos de realidad virtual.

Afortunadamente, hay un boleto abierto o, de lo contrario, si intentara comunicar esto, me cerrarían.

Durante años, Safari ha tenido problemas con CORS. Es un defecto grave y lo han tratado con total desprecio. El dibujo de lienzo en 2D también está afectando.

He creado un ticket con Apple directamente porque un problema con webkit ha estado ahí desde julio de 2014 sin asignar. El video WebGL es básicamente inútil en IOS y Safari hasta entonces. Pero también se requiere que el iPhone reproduzca video en línea.

Creo que presentar duplicados a Apple podría ayudarlos a acelerar el proceso.

Por favor vea estos. Casi he terminado de hacer que las texturas de video y el video 360 funcionen por completo en Android, Chrome Dev solo ha solucionado problemas de renderizado.Tuve que trabajar incansablemente con el cromo en eso. Ahora hay problemas de rendimiento de reproducción de video con Chrome.

¡Ahora estoy en este lío con Safari!

Este es un radar del ticket Apple real con el problema palabra por palabra.

https://openradar.appspot.com/24641824

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

El problema real del webkit. Son una pieza de trabajo.

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

Básicamente, esto no tiene nada que ver con three.js, pero @mrdoob , mantén esto abierto, es importante.

Necesita hacer hacks de proxy inverso que nunca escalarán como con el dibujo 2D de lienzo para instantáneas. Está documentado aquí por ahora.

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

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

Eso se reenviará al frente de la nube. Funcionará en cualquier video, incluido HLS.

Parece que esto es más un sabotaje intencional que cualquier otra cosa para bloquear esto en IOS. Firefox en IOS tampoco tiene soporte CORS sin ningún motivo. Aparece mi función de respaldo de pirateo de proxy CORS. Pensé que al menos Firefox sería completamente funcional.

esto todavía no explica por qué el escritorio de Firefox no dibuja imágenes. Envía los encabezados de origen y, si se usa sin Shaka, funciona bien. Solo cuando la fuente de video se refiere a un blob (como es el caso de la transmisión adaptativa) no se puede dibujar la imagen. Tampoco informa de errores, lo cual es frustrante.

Dash funciona bien con Dash.js y texturas de video. Pero lo confirmaré en Windows / OSX una vez que haya terminado de refactorizar sus cambios.

Firefox OSX y Windows es completamente funcional. Con Dash o transmisión html5 normal.

Aparte de lo siguiente:

Consigo que estos registros aparezcan tanto en OSX como en Windows.

Error: WebGL: Disallowing antialiased backbuffers due to blacklisting.

Estoy ejecutando Firefox en Windows 10 en Vmware. Debido a esto, creo que Firefox está bloqueando Webgl. Recurría al CanvasRenderer. Tuve que habilitar específicamente webgl con esta configuración.

webgl.force-enabled=true

Debe verificar la compatibilidad con WebGL y el respaldo al CanvasRenderer, pero no creo que ese sea su problema.

Tanto WebGL como Canvas necesitan compatibilidad con CORS para funcionar, por lo que se descarta Firefox. Son todas esas bludgers de webkit y Apple ahora.

Para su información, así es como se ve mi etiqueta de video generada.

Necesita la propiedad crossorigin que es todo el alboroto con Safari. Quien haya dicho que no funciona en Firefox, no es correcto.

Safari no ha podido implementarlo durante años y es por eso que WebGL no funciona con él para videos de dominio cruzado que requieren el pirateo del proxy inverso.

El soporte de IE para CORS también es poco fiable. IE11 no ha podido implementarlo también. El navegador Edge está bien con CORS y Webgl.

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

¡Hola @danrossi , me encanta el entusiasmo! ¿Tiene un ejemplo en línea de cómo funciona en dash.js?

Además, presenté errores tanto con Safari como con Firefox. Puedes ver el progreso de ambos aquí:

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

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

Prueba dash.js con una etiqueta de video como esa. Confirmaré con el hack de proxy si Safari funciona con Dash.

Sugiero que Apple se involucre con los problemas de CORS disparando tickets duplicados sobre el problema de CORS con ellos como lo hice yo. Me refiero a que el boleto de webkit puede estar allí desde julio de 2014, pero algo tan paralizante como esto deberían haberlo solucionado.

Confirmar que el hack de proxy no hace nada cuando se usa MediaSource en Safari, está bien con archivos mp4. Entonces, incluso si finalmente implementan CORS, esto aún estará roto.

Dejé un comentario allí en el problema del webkit, pero teniendo en cuenta que el ticket principal de CORS no se ha asignado desde 2014, Safari e IOS están bastante muertos para la realidad virtual.

Firefox me funciona perfectamente en Windows 10 y OSX. Firefox no tiene CORS en IOS, por lo que es inútil. Podría hacer un ticket para que lo hagan, así que al menos algo está funcionando en IOS.

Dejé otro comentario en tu ticket de webkit. Están relacionados con el problema principal de CORS y probablemente deberían fusionarse y tratarse de inmediato.

Lo que realmente me vuelve loco es que su boleto está asignado, pero el boleto para el problema real de CORS se ha dejado alto y seco durante 2 años, lo que hace que la realidad virtual en Safari sea inútil.

Nuevamente, este no tiene nada que ver con three.js, pero debe dejarse abierto para aquellos que solo se dan cuenta de que Safari e IOS están llenos.

De acuerdo, después de investigar un poco los trucos de video en línea para Iphone que ya agregué al boleto de Apple, parece que dibujar en el lienzo 2D está bien sin CORS. Es cuando se trata de obtener un uri de datos que tiene el problema, así que mi error. Por lo tanto, parece que cuando se usa WebGL también es un problema porque Safari carece de soporte CORS y tiene que recurrir al renderizador de lienzo en su lugar.

No funcionará bien o no funcionará bien en IOS, ya que elimina fotogramas y creo que necesita una etiqueta de audio que se ejecute para reproducir el audio, por lo que no funcionará bien para mpeg dash.

ver http://stanko.github.io/html-canvas-video-player/

Para simplificar las cosas, he actualizado este ejemplo de webgl sin procesar para usar mp4 para safari. También actualicé ese ticket de webkit. Es por la falta de soporte CORS.

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

"SecurityError: DOM Exception 18: Se intentó romper la política de seguridad del agente de usuario".

Gracias por encargarte de informar el problema. También he visto esto fuera de three.js, ¡y es muy molesto ...!

Manzana ! Necesita una ola masiva de boletos duplicados si es posible. Quiero decir, diablos, Youtube está seguro de sí mismo con el soporte de WebGL, pero Safari no funcionará y no funciona en su reproductor 360 actual, así que no estoy seguro de por qué no están haciendo nada al respecto. También he confirmado que incluso con el hack de proxy, Iphone no se reproducirá en línea, por lo que las gafas VR y VR son completamente inútiles en un Iphone. Requiere un truco muy dudoso de reproducir audio por separado y actualizar la hora del video para obtener un nuevo cuadro, por lo que en realidad no se reproduce el video. Eso no funcionará con Dash.

¿Y no es un problema legal que los derechos de formato sean el problema real no técnico? ¿Has probado los otros formatos que estoy asumiendo? webm ogg aparentemente también existe la idea de Media Source Extensions MSE, también hay diferentes configuraciones de alto perfil para MP4 H.264 que no se ejecutan en hardware de gama baja (problemas).
Recuerdo que los problemas con la compatibilidad del formato de video no son técnicos y más licencias y problemas legales o simplemente de control.
De todos modos tan impactante tan +1. Supongo que siempre podemos boicotear, al final nadie usará las cosas que no funcionan. Utilizo Android y Chrome exclusivamente por muchas otras razones, incluida esta.

Es un problema de webkit con falta de funcionalidad CORS. Lo han dejado desperdiciar durante años pensando que podrían salirse con la suya. Solo que ahora las personas que intentan usar Webgl tienen un problema y simplemente se dan cuenta. Un accidente a punto de suceder. Lo mismo con obligar a Iphone a no jugar en línea. Los videos del mismo dominio no son un uso del mundo real.

Android Chrome tiene problemas de webgl que también se procesan en el lienzo. Acabo de pasar todo el mes lidiando con eso y finalmente confirmé en ese ticket que el último desarrollador ahora está funcionando nuevamente. Al menos, Android funcionará con gafas de realidad virtual y WebVR, pero Iphone no.

Intentaré una vez más con un archivo de tablero cargado localmente y veré qué sucede.

Hay una actualización de estado en el ticket de webkit. Creo que tuvieron que arreglar algo más para trabajar en ese boleto, pero todavía nadie asignado al boleto de error de Cors real. Absolutamente todo depende de que lo arreglen y, con suerte, obtengan un lanzamiento tanto en IOS como en Safari. Esto debería ser muy embarazoso para Apple. Dejaron esto pasar durante muchos años sin ninguna razón.

@danrossi ¡ gracias por mantenernos actualizados! 😊

@danrossi ¡trabajo increíble! Gracias por todas las actualizaciones

??? ¿Desarrollador de Webkit trabajando ahora?

No he visto una actualización de estado que diga lo contrario, pero el ruido de las confirmaciones. Confirmaré.

esta es la última actualización. Quién sabe si esto también soluciona la falta de soporte CORS.

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

Quién sabe si alguna vez llegará a iOS. Los problemas de reproducción de video en línea de Iphone también son motivo de preocupación. ¿Debería hacer otro boleto de error a Apple sobre eso?

Oh, lo siento, pensé que dijiste que estaba funcionando, ja. Parece muy cerca. Tengo un ticket de radar para Apple y nunca han respondido. Requiere que se hagan duplicados si alguna vez van a tomar medidas o les importa que la realidad virtual funcione en su plataforma.

Así que creo que la presión sobre Apple aumenta. Cerraron mi boleto alegando que había un duplicado que no se puede ver ni comentar y que parece un boleto muy temprano. Pero eso todavía no explica la reproducción de video en línea de Iphone para WebGL. Se requieren montones de quejas para que afirmen que podría llevar años.

Volví a consultar con la gente de Chrome y parece que Chrome Dev Android todavía no funciona al procesar WebGL. Hay alguna bandera que se puede activar para que se muestre, pero provocará una grave pérdida de fotogramas.

El navegador estándar de Android tiene problemas CORS como Safari tan inútiles. Firefox IOS también carece de soporte CORS y agregará un ticket para que lo implementen. Este material de CORS que paraliza todo es simplemente impactante.

Entonces, si necesitan un vector de soporte para dispositivos móviles con todas las funciones funcionando. Android Firefox todas las noches mientras arreglaban errores de orientación allí y eso es todo. Muy triste.

Si es de interés, he hecho formalmente un ticket aquí para que al menos Firefox en IOS tenga WebVR funcionando y me olvide de Safari. Sin embargo, todavía tengo que confirmar si puede reproducir videos en línea en Iphone. Es posible que actúen más rápido con el soporte de CORS, pero es sorprendente que no lo haga.

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

La confirmación de los mecanismos de desactivación de Apple fuerza el video a un reproductor nativo para Firefox también. Sabotaje intencional por lo que parece.

esto tampoco muestra nada en el lienzo en Firefox en Mac (funciona en Chrome), no es un problema de iOS.

oh, ff comienza a mostrar la imagen después de aproximadamente 2:50

No se equivoque aquí. Este es un problema de CORS que tiene mucho que ver con IOS / Safari. No sé nada sobre ese ejemplo de tablero, pero he probado Dash con texturas de video en Firefox en OSX y está bien.

Con Dash en Firefox, parece haber un problema con los segmentos que crea cuando procesa los archivos de video para hacerlos compatibles con Dash. No segmentar los archivos parece funcionar en Firefox (también podría explicar por qué se reproducen los últimos segundos de un video segmentado).

El 13 de marzo de 2016, a las 9:51 p.m., danrossi [email protected] escribió:

No se equivoque aquí. Este es un problema de CORS que tiene mucho que ver con IOS / Safari. No sé nada sobre ese ejemplo de tablero, pero he probado Dash con texturas de video en Firefox en OSX y está bien.

-
Responda a este correo electrónico directamente o véalo en GitHub.

Estos son mis archivos empaquetados que he probado bien con three.js. Usé bento4. el intervalo de fotogramas clave de h264 sigue siendo (2,3,4) * velocidad de fotogramas como HLS. No es un problema con WebGL. El problema de CORS es un gran problema para Webkit y Apple y Firefox en IOS. Debe especificar el atributo "crossorigin".

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

Lamento traer esto aquí, pero la gente necesita saberlo.

Hola chicos, acabo de resolver algo realmente mal y al revés y lo mismo de siempre para dispositivos móviles, lo que me trae un mundo de dolor.

Samsung Gear intenta iniciar su propia aplicación con un navegador en el S7. Hice que alguien probara WebGL / WebVR y cuando se pone las gafas Gear, lanza su propia aplicación en lugar de Chrome. El objetivo de WebVR es iniciar el lienzo de WebGL cuando se pasa a pantalla completa en las gafas.

Entonces, lo que está sucediendo es que parece que su aplicación tonta usa código de navegador de Android en lugar de Chrome y, por lo tanto, no tiene soporte para texturas de video WebGL y video de dominio cruzado e incluso API de WebVR.

Las aplicaciones son noticias tan antiguas que esperan que todo el contenido descargado se reproduzca. También lo es la descarga progresiva de archivos mp4, ahora todo es transmisión segmentada, por lo que el modelo está desactualizado.

Acabo de descubrir que la producción de Chrome parece representar texturas de video WebGL en el S7, pero mi S3 está completamente roto y he estado tratando de resolverlo con los desarrolladores de Chrome durante meses.

Aún no tengo idea de lo que está sucediendo con IOS. IOS también es completamente inútil para la realidad virtual en este momento. Webkit todavía está repleto de soporte de seguridad entre dominios que no pudieron instalar durante años, lo que hizo que la realidad virtual fuera inútil. De ahí todo esto de arriba.

Para su información: este compromiso https://github.com/mrdoob/three.js/commit/854ebf5bd6179a3046d4b901b12a9cbc99008c61 soluciona el problema para Firefox 👍

Hola, de acuerdo con esto por sigilo, ya que Apple ignoró mis tickets de error y los cerró, parece que Apple lo ha solucionado, pero bifurcó el código que parece en Safari pero en macOS. Un sistema operativo y un navegador que nadie está usando todavía.

Si no lo fusionan de nuevo en webkit y brindan actualizaciones parcheadas a los navegadores actuales, la gente tendrá que esperar, pero aún así proporcionar un respaldo de proxy heredado.

Esto aún estará roto para Dash, aunque el hack de proxy no funciona, pero lo confirmará nuevamente.

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

Hola chicos, gracias por toda la información.

pero en realidad, si alguien pudiera explicar en detalle cómo implementar los 'trucos de proxy inverso' enumerados aquí:
https://github.com/mrdoob/three.js/issues/8110#issuecomment -183570240

eso seria genial

gracias
Sarre

Para apache

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

Para nginx

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

Por lo que he recopilado, los navegadores webkit actuales nunca verán el cambio. Lo tendrán listo para un sistema operativo Mac e IOS que nadie tiene. Todavía están jugando con CORS para IOS debido a "problemas de marco" que lo detienen.

Podría tener que recurrir a una solución Flash si Stage3D puede renderizar hardware acelerado pero no le gusta tanto como puede. Constantemente dibuja datos de mapa de bits.

Gracias por la rápida respuesta

ok, todavía no hay una solución alternativa para mí, hasta que Apple solucione esto.

¿Qué pasa con la captura de "DOM Exception 18" para las opciones de reserva? ¿Cómo puedo contraerlo?

Intenté ponerlo en la llamada render () de un objeto THREE.WebGLRenderer pero no se detecta.

La detección se realiza en un video temporal. es decir

testVideo.hasAttribute("crossOrigin")

También puede hacer una detección del navegador. Es Safari e IE 11.

Solo un aviso sobre este loco problema. Todavía no puedo probar el modo VR en IOS a menos que lo implemente en mi Ipad.

Las aplicaciones de Cordova usan WebView. Tiene opciones para jugar en línea, por lo que soluciona ese molesto problema. Funciona en torno a la interacción del usuario. Este es el más loco de todos y me ha estado volviendo loco.

WebView parece funcionar completamente alrededor de CORS incluso si es un archivo html local que se ejecuta en file: //. WebGL funciona en aplicaciones de Cordova sin la necesidad del atributo crossorigin. Esta es una noticia impactante y buena. No necesitará el hack de proxy, pero Safari IOS / OSX lo hará.

No puedo verificar los controles de orientación pseudo VR, pero los controles táctiles funcionan, al igual que el antiguo efecto estéreo de cartón. Actualizaré ese ticket de Webkit.

Probar en Android es un problema debido al error de renderizado de Chrome que pasé 3 meses tratando de que la gente de Chromium lo arreglara y me di por vencido. Lamentablemente, es completamente negro y, con suerte, no es un problema de CORS que no muestre errores.

Entonces, ¿entendí esto bien? ¿TODAVÍA es la única forma de usar texturas de video webgl con webgl implementando ese hack de proxy en el servidor?

Safari está completa y completamente descabellado, al igual que IOS. Si usa aplicaciones basadas en Cordova WebView, puede jugar en línea, reproducir automáticamente y no preguntar por qué, pero CORS no es un problema. Eso sería para mp4 / HLS en IOS.

Pero como he informado y me enteré. Aceleran los dispositivos más antiguos y los ralentizan para obligar a las personas a actualizarlos. El Ipad 3 es inútil para WebGL y se procesa a 5 fps. Debe ser un dispositivo más nuevo.

En Safari en OSX, mediasource está completa y completamente descatalogado. el proxy CORS no funciona allí. También debe ser un archivo mp4 o HLS nativo. Con HLS nativo, proporciona una URL de proxy CORS.

Estos fallos en Apple planean lanzar correcciones en macOS, por lo que en algo que nadie tiene todavía.

Están tratando de solucionar problemas subyacentes del marco en IOS. Así que dudo que CORS se solucione en la próxima versión de IOS.

Tampoco tiene WebVR, ambos son una broma. Tratan a WebVR como una especie de broma y están atrasados.

Bueno, WebVR en el escritorio necesita el SDK de Windows, por lo que OSX aún no es una opción, pero al menos las API podrían estar ahí para las pruebas del cliente. Si Android tiene una pantalla de cartón predeterminada, ¿no tengo idea de por qué IOS no puede y tiene WebVR habilitado?

Dejaron este problema de CORS persistiendo durante años y este es el producto de eso.

Esto suena realmente loco.
(Lo siento, no soy un desarrollador de pila completa)
Solo quiero estar seguro: en general, si no tengo acceso al servidor, las texturas de video en webgl no son posibles en ios. ¿CON el hack de proxy funciona en ios pero NO en osx?

Podrías probar un iframe. No lo he probado todavía. El reproductor tendrá que estar sentado frente a la nube con los archivos de video.

aunque no ayuda con el código dinámico. es decir, algunos pseudo enlaces.

un enlace de video es //videos.electroteque.org/360/video.mp4

La página de iframe es //videos.electroteque.org/360/player.html

Apple está liderando el camino con estándares, creo. Donde necesita páginas de iframe de archivos estáticos para sus reproductores.

Vi que Chrome para iOS agregará reproducción en línea:
https://bugs.chromium.org/p/chromium/issues/detail?id=395206
El martes 23 de agosto de 2016 a las 5:18 a. M., Danrossi [email protected] escribió:

Podrías probar un iframe. No lo he probado todavía. El jugador tendrá que
estar sentado frente a la nube con los archivos de video.

aunque no ayuda con el código dinámico. es decir, algunos pseudo enlaces.

un enlace de video es //videos.electroteque.org/360/video.mp4

La página de iframe es //videos.electroteque.org/360/player.html

Apple está liderando el camino con estándares, creo. Donde necesitas estática
archivar páginas de iframe para sus reproductores.

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/mrdoob/three.js/issues/8110#issuecomment -241712327,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AANbgfcQaLhx_UmJHEmViJ76_Hi4uikSks5qiuUKgaJpZM4HYtu3
.

¡Sí! 🤘

Acabo de probar Chrome en IOS. No sabía que tenían uno.

Parece que también usa Webkit como Firefox. Y sufre problemas de CORS. Es difícil depurar de forma remota Chrome en IOS debido a las obvias limitaciones de Apple de su lado y weinre sigue fallando. Pero cambié mi trabajo CORS en torno a la URL y obtengo un marco negro. Entonces sé que CORS está paralizado en Chrome, Firefox y Safari en IOS. Con la URL de proxy CORS adecuada, está "funcionando".

La reproducción en línea es solo una parte del problema y solo un problema para Iphone.

La reproducción en línea está disponible en iOS 10. La solución de iframe funciona para el problema de CORS, pero pierde eventos devicemotion y orientationchange en la ventana secundaria

Sí, solo obtener reproducción en línea es solo la mitad del problema. El problema de CORS es mucho más importante, pero no llegará a IOS 10. El problema de CORS puede estar completamente solucionado para Safari pero en macOS.

La solución alternativa de Iframe no es una opción que requiera sentarse en el mismo dominio que el almacenamiento en la nube, por ejemplo. Tal vez haya algún tipo de pirateo de DNS para que parezca que cname sub.domain.com es domain.com, pero no tengo idea.

@thiagopnts Entonces, ¿esos eventos estarían deshabilitados en un reproductor integrado iframe incluso en pantalla completa?

@danrossi de lo que probamos, todos los eventos adjuntos a window no se activan cuando están dentro de un iframe

¡Agradable una manzana!

@thiagopnts ¿No puedes dar un ejemplo de iframe que solucione el problema de cors? ¡¡Gracias!!

@cheesyeyes aquí: http://thiago.me/kaleidoscope/iframe.html
la página está debajo de las páginas de github, luego el iframe y el video se cargan desde Google Drive

sí, eso funciona en Safari pero no es muy práctico. un archivo html estático para cada video que se encuentra en el CDN?

Chicos, ¿debería resolverse este problema?

Creo que no hay nada que puedas hacer. Al igual que el "Idevice más antiguo pretendía estrangularlo para hacerlo obsoleto", como acabamos de descubrir con el problema de los fps.

Algo realmente extraño ha cambiado en Safari en Yosemite que no estaba allí antes. Ha fallado la detección de funciones con CORS en muchas cosas que he hecho.

Solo un aviso a la gente simplemente trabajando lo roto que realmente está.

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

En IE11 devuelve falso como se esperaba. En Safari es cierto, pero el error CORS obviamente sigue ahí. La detección de características está ahí para, obviamente, requerir el pirateo del proxy. Locura.

¿Así que no puedo evitar pensar que se impulsó algún cambio a medias?

Este extraño cambio con la bandera crossOrigin está en Safari 10. Así que una implementación a medias. Safari 9 no lo tenía.

He informado sobre algunos tickets de errores 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.

En serio haciéndome sudar jaja.

Todos, hagan su parte y convenzan a las personas que conocen de que dejen de usar dispositivos Apple. Hágales saber que Apple es el nuevo IE5.

Bueno, es triste decir que CORS en IOS es una restricción de marco que creo que no se molestaron en arreglar en IOS 10. Aparte de eso, cualquier cosa que use Webkit es un problema.

Aparentemente, el problema de CORS se solucionó en Safari en macOS, pero las últimas actualizaciones. La reproducción de video en línea también funciona en IOS 10.

Aquí hay dos pruebas para la transmisión de mp4 y otra para HLS. El HLS requiere trabajo adicional debido a un error separado con FlipY que sigue siendo un problema en OSX Safari.

Se muestra el renderizado HLS en IOS 10, pero tiene 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 debido a la obsolescencia y la programación abultada por parte de Apple. El HLS todavía no aparece en absoluto en IOS 9. Ambos requieren el proxy CORS para mp4 y HLS.

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

Ahora atascado en una situación en la que la detección de funciones de crossOrigin no se puede usar porque informa de soporte en OSX 10.11, pero no existe tal cosa. También hay que intentar detectar en qué OSX Safari se utiliza. muy mal.

Esto es un poco absurdo y realmente está reteniendo a iOS de cualquier desarrollo WebVR basado en video real. Estoy tratando de extraer un recurso de dominio cruzado como parte de un proyecto actual, y esto es lo único que me detiene ahora. Funciona en todos los dispositivos Android y de escritorio / portátiles, pero, por supuesto, no funciona en iOS ...

@theDrGray Puede probar el truco de iframe, pero los iframes bloquean las apis de orientación que, según creo, necesitan otro truco. Pronto investigaré una demostración de iframe.

Eso significa que en su CDN necesita configuraciones de reproductor de video estático por video, lo cual es malo. Con lo que podría jugar es

nombre de archivo.html se analiza y el nombre de archivo cargado es nombre de archivo.mp4, nombre de archivo.webm, nombre de archivo, m3u8 nombre de archivo.mpd, etc. Entonces, se podría cargar un token privado en ese nombre como filename.html? t = token.

¿Si solo una función de Amazon Lamda pudiera funcionar en el mismo dominio que los videos cname, los reproductores podrían ser dinámicos?

Si todo lo demás falla, necesita un proxy CORS y detectar esto es un problema ahora. Lo sabotearon en Safari 10. Safari 10 informa de soporte para "crossOrigin" pero realmente no lo hace en IOS 10 y Yosemite. Necesitas hacer una verificación secundaria para OSX 10.12 jaja

Así es como se ve la detección de CORS en mi proyecto de reproductor ES6

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

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

        if (hasCORS) {

            if (WebVRUtils.isSafari) {

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

            return true;
        }

        return false;

    }

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

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

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

Los mismos problemas aquí ... Funciona en todas partes excepto en iOS. Muy perturbador. Qué gran agujero en mi entregable. SOLO funciona (puedo agregar una velocidad de fotogramas terrible) cuando la ruta de origen es relativa ... No es ideal para el sistema de escalado. Ugh ... Bueno ... Al menos puedo dejar de golpearme la cabeza ... Es imposible ... Por ahora ... Ahora vamos a construir en torno a eso ... Y ux retrocesos y mensajes.

@danrossi Gracias por tu comentario "Aparentemente, el problema de CORS se solucionó en Safari en macOS, pero las últimas actualizaciones", sin embargo, no he podido encontrar otros detalles en ningún otro lugar además de tu comentario. ¿Sabes con qué versión de macOS y Safari funciona esto? ¿Sería eso una "señal" de que Apple propagará esa solución a iOS?

Uno puede esperar ...

El 1 de diciembre de 2016 a las 15:50, "Kieran Farr" [email protected] escribió:

@danrossi https://github.com/danrossi Gracias por tu comentario
"Aparentemente, el problema de CORS se solucionó en Safari en macOS, pero la última
actualizaciones ", sin embargo, no he podido encontrar otros detalles en ningún otro lugar
además de tu comentario. ¿Sabes qué versión de macOS y Safari esta
¿funciona con? ¿Sería eso una "señal" de que Apple propagará esa solución a
iOS?

-
Estás recibiendo esto porque hiciste un comentario.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/mrdoob/three.js/issues/8110#issuecomment-264290616 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/ANKfT8A140W4hW0YMqq3L6AP_gljY4WUks5rDzMGgaJpZM4HYtu3
.

@kfarr cualquiera que sea la actualización reciente para macOS. Las versiones anteriores de OSX y Safari aún tienen el problema. Así es como rueda Apple. Obligan a los usuarios a actualizar para obtener correcciones.

Se confirmó que esto funciona como se esperaba (error corregido) al probar con esta URL de prueba con la última versión de macOS Sierra 10.12.1 (16B2659) Safari 10.0.1 (12602.2.14.0.7).

El error aún NO se corrigió en Mobile Safari en iOS 10.2 Public Beta 3 (14C5077b). Hay una versión Beta 4 más nueva disponible, pero aún no la he instalado ni probado.

Sí, sigue siendo un problema en IOS. Si usa aplicaciones basadas en WebView Cordova. No hay ningún problema de CORS, esa es la parte más extraña.

Hhmmmmmm .... ¡La envoltura de Cordova lo arregla!?! Impar...

El 1 de diciembre de 2016 a las 6:59 p.m., "danrossi" [email protected] escribió:

Sí, sigue siendo un problema en IOS. Si usa aplicaciones basadas en WebView Cordova.
No hay ningún problema de CORS, esa es la parte más extraña.

-
Estás recibiendo esto porque hiciste un comentario.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/mrdoob/three.js/issues/8110#issuecomment-264333449 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/ANKfT40CQRZqWYEJWmojo_Omvl38WeUlks5rD19GgaJpZM4HYtu3
.

Sí evita cualquier restricción de CORS y ni siquiera necesita el atributo crossOrigin. Ojalá no lo saboteen, ya que es una opción.

¿Alguna idea de qué causa este comportamiento para Cordova WebView? Intenté leer esta fuente https://github.com/apache/cordova-ios/blob/master/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewEngine.m y no puedo detectar nada relacionado.

@ matti777 En lo que a mí respecta, siempre y cuando funcione y con suerte no lo descubran y lo saboteen a propósito, que así sea jaja.

Necesito confirmar que este sigue siendo el caso en IOS10, aunque lo siento. Por ahora, detecto Cordova y no intento usar fuentes proxy CORS. Mi función cambia a fuentes de proxy CORS cuando es necesario.

Bueno, quise decir que si supiera lo que Cordova estaba haciendo de manera diferente con su UIWebView, replicaría ese código en mi propia aplicación nativa para tener el soporte CORS para mis videos html5 que también uso como texturas THREE.js.

Estamos usando videos alojados en Vimeo y mientras las URL públicas del formulario:

https: //player.vimeo.com/external / ...

..no funcionan, los videos SÍ funcionan con las URL a las que son redirigidos:

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

¿Quizás su vimeocdn.com tiene una función de proxy inverso instalada entonces? Supongo que debería preguntarle a Vimeo.

Debo decir que estoy muy molesto por esto. Gracias Steve.

• METRO

Intentaré la solución IFRAME. Sin embargo, no estoy muy seguro de cómo hacerlo. Estoy creando el elemento de video / lienzo a partir del código (y nunca los agrego al DOM, por supuesto), así que me preguntaba si algo como:

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

.. es suficiente.

Entonces, uhm, después de haber renunciado a las texturas de video de iOS, recurrí a Android, solo para notar un comportamiento similar a través de THREE.js; mi video CORS se reproduce (escucho el audio) pero el video no se reproduce; todo lo que obtengo es una pantalla negra. Intenté esto con THREE.js r79 y r84, justo ahora. Lo extraño aquí es que http://krpano.com/ios/bugs/ios8-webgl-video-cors/ funciona bien en Android.

Este es el código que estoy usando en Android, bueno, todas las plataformas, para el caso (que se ejecuta dentro de la aplicación nativa en una vista web, con la aceleración de hardware activada y WebChromeClient instalado):

http://pastebin.com/Y1D3beti

La única diferencia con el elemento WebGL sin procesar de krpano.com es que están cargando la textura directamente desde el elemento de video en lugar de hacerlo a través de un lienzo. ¿Es este mi problema? Realmente necesitaría renderizar a través de un lienzo para agregar cosas sobre y alrededor de la imagen de video.

• Matti

La única diferencia con el elemento WebGL sin procesar de krpano.com es que están cargando la textura directamente desde el elemento de video en lugar de hacerlo a través de un lienzo. ¿Es este mi problema?

¿Quizás? ¿Has intentado pasar el video directamente?

Este ticket en lo que respecta a los problemas de CORS con Safari. Safari 10 en macOS se corrigió completamente incluso para Dash.

IOS 10 sigue siendo un problema con COR y requiere proxies CORS. O use las aplicaciones Cordova Webview que no usan restricciones CORS en absoluto.

El navegador de valores de Android no es compatible con CORS e incluso el proxy CORS no funciona.

Chrome y Firefox solo en Android.

Este problema en particular no tiene nada que ver con three.js, me temo. Ni siquiera usaría un dibujo en lienzo que deje caer demasiados marcos.

@danrossi, ¿podemos ver lo que estás construyendo? ¡Suena bastante impresionante!

El jueves 26 de enero de 2017 a las 8:41 a.m., danrossi [email protected] escribió:

Este ticket en lo que respecta a los problemas de CORS con Safari. Safari 10 en macOS es
arreglado completamente incluso para Dash.

IOS 10 sigue siendo un problema con COR y requiere proxies CORS.

El navegador de valores de Android no es compatible con CORS e incluso el proxy CORS sí
no trabajo.

Chrome y Firefox solo en Android.

Este problema en particular no tiene nada que ver con three.js, me temo. I
ni siquiera usaría un dibujo en lienzo que dejaría caer demasiados marcos.

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/mrdoob/three.js/issues/8110#issuecomment-275438671 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AANbgazonmTe-yGDfgToCRVhTy_qyp_Eks5rWMy1gaJpZM4HYtu3
.

>

http://jonobr1.com/

¿@danrossi Safari está completamente arreglado para ti? ¿Estás usando el truco de proxy para que Safari funcione ahora? Todavía obtengo SecurityError (DOM Exception 18): The operation is insecure. en https://krpano.com/ios/bugs/ios8-webgl-video-cors/ con Safari 10.0.3 en El Capitan.

@timothyallan He tenido demasiados proyectos en los que concentrarme mientras desarrollo muchas funciones diferentes de reproductor de video. Por lo que puedo decir, lo han solucionado en macOS Safari, todos los demás Safari son vapourware en lo que a ellos respecta. No vi actualizaciones para sistemas operativos más antiguos, incluso actualizaciones de seguridad.

IOS 10 es el factor decisivo aquí y sigue siendo el problema. He tenido que explicarle a la gente todo el tiempo por qué no funciona y cómo evitarlo.

Apple espera que la gente se actualice a nuevos sistemas operativos y creo que eso es definitivo.

El problema de webgl con Dash en Safari Veo goteos y montones de actualizaciones de estado en ese boleto, pero en mi prueba creo que también funcionaba en macOS.

Solo una actualización aquí. Estas bludgers han proporcionado algo de incitación aunque todavía muy silenciosas.

La corrección de cors está en la versión beta de IOS11. IOS10 no lo entenderá.

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

Nueva actualización. IOS 11 beta en dispositivos con CORS corregido. Ahora requiere un dispositivo nuevo que admita IOS 11.

Ni siquiera se moleste con el simulador, está roto y no tiene la corrección CORS.

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

¡¡Hurra!!

El 11 de agosto de 2017 a las 2:53 a. M., "Danrossi" [email protected] escribió:

Nueva actualización. IOS 11 beta en dispositivos con CORS corregido. Ahora
requieren un dispositivo nuevo que admita IOS 11.

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

-
Estás recibiendo esto porque hiciste un comentario.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/mrdoob/three.js/issues/8110#issuecomment-321742658 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/ANKfT5TG41uHQV8U_FrF8LaJ0EMKKIy_ks5sW_pjgaJpZM4HYtu3
.

La confirmación de CORS está corregida en IOS 11.1. Finalmente conseguí el presupuesto para conseguir un dispositivo de hardware para realizar pruebas. Ha tardado tanto.

No es necesario un proxy CORS con 11.1. No creo que la compatibilidad con los atributos CORS se pueda probar correctamente con Safari. Tienes que hacer comprobaciones de la versión del cliente.

Sin embargo, hay problemas importantes de regresión HLS / webgl por los que pasar ahora.

Excelente. ¡Gracias!

El 5 de noviembre de 2017 a las 1:36 a. M., "Danrossi" [email protected] escribió:

La confirmación de CORS está corregida en IOS 11.1. Finalmente conseguí el presupuesto para conseguir
un dispositivo de hardware para realizar pruebas. Ha tardado tanto.

No es necesario un proxy CORS con 11.1. No creo que el atributo CORS
El soporte se puede probar correctamente con Safari. Tengo que hacer la versión del cliente
cheques.

Sin embargo, hay problemas importantes de regresión HLS / webgl por los que pasar ahora.

-
Estás recibiendo esto porque hiciste un comentario.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/mrdoob/three.js/issues/8110#issuecomment-341952485 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/ANKfT52MncuxghqJmPes4iFoO1a_K_Gfks5szVd1gaJpZM4HYtu3
.