Three.js: Exceção 18 do DOM Safari / Firefox para textura de streaming de vídeo

A questão de cabeça para baixo é parte do problema?

De cabeça para baixo não é parte do problema. Isso era eu sendo preguiçoso> _ <

Posso reproduzir aqui. Você já experimentou uma tela intermediária?

: +1 :, entre como uma tela 2d?

Sim, use uma tela 2d como textura e faça drawImage do vídeo nela.

Eu vou fazer isso agora. https://dl.dropboxusercontent.com/u/1595444/shaka-player/shaka-canvas.html

Parece que no Safari não há DOM Exception 18 lançado, mas a imagem não é transferida. Mesmo com o Firefox. Isso significa que é uma coisa de implementação do navegador?

Enfrentando o mesmo problema. O Safari lança a Exceção Dom 18, o Firefox não carrega a imagem, mas também não mostra erros. @ jonobr1 você está recebendo algum erro no firefox?

Sem erros no Firefox, mas também sem imagem. Vou registrar bugs com o WebKit
e Mozilla respectivamente e veja se alguma informação adicional aparece.

Não sei sobre vocês, mas não vi nenhuma demonstração de streaming de vídeo
carregado para uma textura WebGL. Talvez haja um com o YouTube como fonte?
Em Qui, 11 de fevereiro de 2016 às 23h11 Taha Sabih [email protected]
escreveu:

Enfrentando o mesmo problema. Safari lança Dom Exception 18, Firefox não
carregar a imagem, mas também não mostra erros. @ jonobr1
https://github.com/jonobr1 você está recebendo algum erro no firefox?

-
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/mrdoob/three.js/issues/8110#issuecomment -183208337.

O streaming de vídeo em si não é um problema. Se você criar um elemento de vídeo em js e usar video.src para definir a fonte do elemento de vídeo, o vídeo será transmitido corretamente. O streaming adaptável com shaka é um problema. Acho que o problema está nas implementações do CORS no webkit e no gecko, daí a exceção DOM 18 no Safari. O exemplo abaixo funciona perfeitamente com fontes de vídeo do mesmo domínio em todos os 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 );

Só para esclarecer, não acho que video.src = "<your mp4 source>"; esteja transmitindo. Acredito que seja um download progressivo . Mas, sim, eu concordo com você.

Caras são pessoas que ainda estão apenas resolvendo isso. Isso só vai piorar agora que as pessoas estão tentando fazer vídeos de realidade virtual.

Felizmente, há um tíquete aberto ou então, se eu tentasse comunicar isso, seria encerrado.

Por anos, o Safari teve problemas com CORS. É uma falha grave e eles a trataram com total desprezo. O desenho 2D da tela também está afetando.

Eu criei um tíquete diretamente com a Apple porque um problema com o webkit estava parado desde julho de 2014, sem atribuição. O vídeo WebGL é basicamente inútil no IOS e no Safari até então. Mas também é necessário reproduzir vídeo embutido no Iphone.

Acredito que preencher duplicatas com a Apple pode ajudá-los a se apressar.

Por favor, veja isso. Eu quase terminei de obter as texturas de vídeo e o vídeo 360 funcionando totalmente no Android, o Chrome Dev acabou de corrigir os problemas de renderização que tive que trabalhar incansavelmente com o cromo nisso. Agora há problemas de desempenho de reprodução de vídeo com o Chrome.

Agora estou nessa bagunça com o Safari!

Este é um radar do tíquete real da Apple com o problema palavra por palavra

https://openradar.appspot.com/24641824

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

O problema real do webkit. Eles são uma peça de trabalho.

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

Basicamente, isso não tem nada a ver com three.js, mas @mrdoob, por favor, mantenha isto aberto, é importante.

Você precisa fazer hacks de proxy reverso que nunca serão dimensionados como no desenho 2D da tela para instantâneos. Está documentado aqui por enquanto

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

Isso irá encaminhar para o cloudfront. Funcionará em qualquer vídeo, incluindo HLS.

Parece que isso é mais sabotagem intencional do que qualquer coisa para bloquear isso no IOS. O Firefox no IOS também não tem suporte para CORS sem nenhum motivo. Ele está mostrando meu recurso de fallback de hack do proxy CORS. Achei que pelo menos o Firefox seria totalmente funcional.

isso ainda não explica por que o firefox desktop não desenha imagens. Ele envia os cabeçalhos de origem e, se usado sem o Shaka, funciona bem. Somente quando a fonte de vídeo está sendo referenciada a um blob (como é o caso com streaming adaptável) ela falha em desenhar a imagem. Também não relata erros, o que é frustrante.

Dash funciona bem com Dash.js e texturas de vídeo. Mas vou confirmar no Windows / OSX assim que terminar de refatorar as alterações.

Firefox OSX e Windows são totalmente funcionais. Com Dash ou streaming html5 normal.

Além do seguinte:

Recebo esses logs que aparecem no OSX e no Windows.

Error: WebGL: Disallowing antialiased backbuffers due to blacklisting.

Estou executando o Firefox no Windows 10 em Vmware. Por causa disso, acho que o Firefox está bloqueando o Webgl. Estava voltando para o CanvasRenderer. Tive que habilitar especificamente o webgl com esta configuração.

webgl.force-enabled=true

Você precisa verificar o suporte WebGL e fallback para o CanvasRenderer, mas não acredito que esse seja o seu problema.

Tanto o WebGL quanto o Canvas precisam de suporte CORS para funcionar, portanto, o Firefox está descartado. São todos aqueles balaços de webkit e a Apple agora.

Para sua informação, essa é a aparência da minha tag de vídeo gerada.

Você precisa da propriedade crossorigin que é toda a confusão com o Safari. Quem disse que não funciona no Firefox isso não é correto.

O Safari não conseguiu implementá-lo por anos e é por isso que o WebGL não funciona com ele para vídeos de domínio cruzado que requerem o hack de proxy reverso.

O suporte do IE para CORS também é duvidoso. O IE11 também não conseguiu implementá-lo. O navegador Edge funciona bem com CORS e 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>

Ei @danrossi , adorei o entusiasmo! Você tem um exemplo online dele funcionando em dash.js?

Além disso, registrei bugs no Safari e no Firefox. Você pode ver o progresso de ambos aqui:

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

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

Experimente dash.js com tag de vídeo como essa. Vou confirmar com o hack do proxy se o safari está funcionando com o traço.

Eu sugiro que a Apple se envolva com os problemas do CORS disparando tíquetes duplicados sobre o problema do CORS com eles, como eu fiz. Quero dizer, o tíquete do webkit pode estar parado desde julho de 2014, mas algo tão incapacitante quanto isso eles deveriam ter tomado uma atitude.

Confirmar que o hack do proxy não faz nada ao usar o MediaSource no Safari, ele funciona com arquivos mp4. Portanto, mesmo se eles finalmente implementarem o CORS, isso ainda estará quebrado.

Eu deixei um comentário lá no problema do webkit, mas considerando que o principal tíquete CORS não foi atribuído desde 2014, o Safari e o IOS estão mortos para VR.

O Firefox é perfeitamente adequado para mim no Windows 10 e OSX. O Firefox não tem CORS no IOS tão inútil aí. Eu posso fazer um tíquete para eles fazerem isso, então pelo menos algo está funcionando no IOS.

Deixei outro comentário sobre o seu tíquete do webkit. Eles estão relacionados ao problema principal do CORS e provavelmente devem ser mesclados e tratados imediatamente.

O que realmente me deixa louco é que seu tíquete foi atribuído, mas o tíquete para o problema CORS real foi deixado de lado por 2 anos, tornando a RV no Safari inútil.

Novamente, este não tem nada a ver com three.js, mas deve ser deixado aberto para aqueles que percebem que o Safari e o IOS estão entupidos.

OK, depois de fazer algumas pesquisas para hacks de vídeo inline para iPhone que eu já adicionei ao tíquete da Apple, parece que desenhar na tela 2D está ok sem CORS. É ao tentar obter um uri de dados dele ele tem o problema então meu erro. Portanto, parece que o uso do WebGL também é um problema porque o Safari não tem suporte para CORS e tem que recorrer ao renderizador de tela.

Ele não funciona ou não funciona bem no IOS, pois perde quadros e eu acredito que ele precisa de uma tag de áudio em execução para reproduzir o áudio, de modo que não funcionará bem para mpeg dash.

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

Apenas para manter as coisas simples, atualizei este exemplo webgl bruto para usar mp4 para safari. Eu também atualizei aquele tíquete do webkit. É por causa da falta de suporte CORS.

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

"SecurityError: Exceção de DOM 18: Foi feita uma tentativa de violar a política de segurança do agente do usuário."

Obrigado por relatar o problema. Eu vi isso fora do three.js também, e é muito chato ..!

Maçã ! Ele precisa de uma onda em massa de tíquetes duplicados, se possível. Quer dizer, o Youtube tem certeza de si mesmo com o suporte WebGL, mas o Safari não vai funcionar e não funciona em seu player 360 atual, então eu não tenho certeza por que eles não estão fazendo nada sobre isso. Também confirmei que, mesmo com o hack proxy, o Iphone não funcionará inline, então os óculos VR e VR são completamente inúteis em um Iphone. Isso requer um hack muito duvidoso de reproduzir áudio separadamente e atualizar o tempo do vídeo para obter um novo quadro, sem realmente reproduzir o vídeo. Isso não funcionará com o traço.

E não é um problema legal com os direitos de formato sendo o verdadeiro problema não técnico? Então você tentou os outros formatos que estou assumindo? webm ogg aparentemente também existe a ideia de Media Source Extensions MSE, também existem diferentes configurações de alto perfil para MP4 H.264 que não funcionam em hardware inferior (problemas).
Lembro-me de problemas com compatibilidade de formatos de vídeo não técnicos e mais licenciamento e legal ou apenas problemas de controle.
De qualquer forma, tão chocante +1. Acho que sempre podemos boicotar, no final ninguém vai usar o que não funciona. Eu uso o Android e o Chrome exclusivamente por muitos outros motivos, incluindo este.

É um problema do webkit com falta de funcionalidade CORS. Eles deixaram isso ir para o lixo por anos pensando que poderiam escapar impunes. Só agora as pessoas que tentam usar o Webgl têm um problema e acabam percebendo. Um acidente esperando para acontecer. O mesmo acontece com forçar o Iphone a não jogar em linha. Vídeos no mesmo domínio não são um uso no mundo real.

O Android Chrome tem problemas de webgl e renderização em tela. Acabei de passar o mês inteiro lidando com isso e finalmente confirmei naquele tíquete que o último Dev agora está funcionando novamente. Pelo menos o Android funcionará com óculos VR e WebVR, o iPhone não.

Vou tentar mais uma vez com um arquivo de traço real carregado localmente e ver o que acontece.

Há uma atualização de status no tíquete do webkit. Eu acredito que eles tiveram que consertar outra coisa para trabalhar naquele tíquete, mas ainda assim ninguém foi atribuído ao tíquete de bug do cors real. Absolutamente tudo está contando com eles para consertar e, com sorte, conseguir um lançamento no IOS e no Safari. Isso deve ser muito embaraçoso para a apple. Eles deixaram isso passar por muitos anos sem motivo.

@danrossi obrigado por nos manter atualizados! 😊

@danrossi trabalho incrível! Obrigado por todas as atualizações

??? Dev Webkit está funcionando agora?

Eu não vi uma atualização de status dizendo o contrário, mas barulho de commits. Eu vou confirmar.

esta é a última atualização. Quem sabe se isso realmente corrige a falta de suporte CORS também.

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

Quem sabe se isso vai chegar ao IOS. Os problemas de reprodução de vídeo em linha do iPhone também são motivo de preocupação. Devo fazer outro bilhete de bug para a Apple sobre isso?

Oh, desculpe, eu pensei que você disse que estava funcionando hah. Parece muito perto. Tenho um bilhete de radar para a Apple e eles nunca responderam. Exige duplicatas para que eles tomem alguma medida ou cuidem para que a RV funcione em sua plataforma.

Portanto, acredito que a pressão sobre a Apple está aumentando. Eles fecharam meu tíquete alegando que havia uma duplicata que você não pode ver ou comentar e que parece um tíquete muito antigo. Mas isso ainda não explica a reprodução de vídeo em linha do Iphone para WebGL. Isso requer um monte de reclamações para eles, para que isso possa levar anos.

Eu voltei para verificar com o pessoal do Chrome e parece que o Chrome Dev Android ainda está com problemas de renderização WebGL. Existem alguns sinalizadores que podem ser ativados para exibi-los, mas isso causará muitos quadros perdidos.

O navegador padrão do Android tem problemas de CORS como o Safari, de forma inútil. O Firefox IOS também não tem suporte para CORS e vai adicionar um tíquete para que eles o implementem. Essa coisa de CORS paralisando tudo é simplesmente chocante.

Então, se vocês precisam de um vetor de suporte para celular com todos os recursos funcionando. Android Firefox todas as noites, uma vez que corrigiram bugs de orientação lá e é isso. Muito triste.

Se for do interesse, fiz um tíquete formalmente aqui, então pelo menos o Firefox no IOS pode ter o WebVR funcionando e esquecer o Safari. Eu ainda não confirmei se ele pode reproduzir vídeo embutido no iPhone. Eles podem ser mais rápidos para agir no suporte CORS, mas não é o que chocante.

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

A confirmação dos mecanismos de desabilitação da Apple também força o vídeo em um player nativo para o Firefox. Sabotagem intencional, pelo que parece.

isso não mostra nada na tela do firefox no mac também (funciona no cromo), não é um problema de iOS.

oh, ff começa a mostrar a imagem depois de cerca de 2:50

Não se engane aqui. Este é um problema CORS que tem tudo a ver com IOS / Safari. Eu não sei nada sobre aquele exemplo de traço, mas testei Dash com texturas de vídeo no Firefox no OSX e está bom.

Com o Dash no Firefox, parece haver um problema com os segmentos que você faz ao processar os arquivos de vídeo para torná-los compatíveis com o Dash. Não segmentar os arquivos parece funcionar no Firefox (também pode explicar por que os últimos segundos de um vídeo segmentado são reproduzidos).

Em 13 de março de 2016, às 21:51, danrossi [email protected] escreveu:

Não se engane aqui. Este é um problema CORS que tem tudo a ver com IOS / Safari. Eu não sei nada sobre aquele exemplo de traço, mas testei Dash com texturas de vídeo no Firefox no OSX e está bom.

-
Responda a este e-mail diretamente ou visualize-o no GitHub.

Estes são meus arquivos compactados que testei bem com three.js. Eu usei o bento4. o intervalo de quadro-chave h264 ainda é (2,3,4) * taxa de quadros como HLS. Não é um problema com WebGL. O problema do CORS é muito importante para o Webkit, Apple e Firefox no IOS. Você deve especificar o atributo "crossorigin".

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

Desculpe trazer isso aqui, mas as pessoas precisam saber.

Oi pessoal, acabei de descobrir algo realmente errado e ao contrário e o mesmo de sempre para celular, o que me traz um mundo de dor.

Samsung Gear tenta lançar seu próprio aplicativo com um navegador no S7. Pedi para alguém testar o WebGL / WebVR e, ao colocar os óculos Gear, ele lançou seu próprio aplicativo em vez do Chrome. O objetivo do WebVR é iniciar a tela WebGL ao entrar em tela inteira nos óculos.

Então, o que está acontecendo é que parece que seu aplicativo bobo usa o código do navegador Android em vez do Chrome e, portanto, não tem suporte para texturas de vídeo WebGL e vídeo de domínio cruzado e até mesmo API WebVR.

Os aplicativos são uma notícia tão velha, que espera-se que todo o conteúdo baixado seja reproduzido. O mesmo ocorre com o download progressivo de arquivos mp4, agora é todo streaming segmentado, de modo que o modelo está desatualizado.

Acabei de descobrir que a produção do Chrome parece renderizar texturas de vídeo WebGL no S7, mas meu S3 está completamente quebrado e tento descobrir isso com os desenvolvedores do Chrome há meses.

Não tenho ideia do que está acontecendo com o IOS ainda. O IOS também é completamente inútil para a RV agora. O Webkit ainda está cheio de suporte de segurança de domínio cruzado que eles falharam em colocar durante anos, tornando a RV inútil. Daí tudo isso acima.

Para sua informação: este commit https://github.com/mrdoob/three.js/commit/854ebf5bd6179a3046d4b901b12a9cbc99008c61 corrige o problema para o Firefox 👍

Oi, de acordo com isso furtivamente como a Apple ignorou meus tíquetes de bug e os fechou, parece que a Apple corrigiu, mas bifurcou o código que parece no Safari, mas no macOS. Um sistema operacional e navegador que ninguém está usando ainda.

Se eles não o fundirem de volta no webkit e fornecerem atualizações corrigidas para os navegadores atuais, as pessoas terão que esperar, mas ainda fornecerão substituto do proxy legado.

Isso ainda será quebrado para o Dash, embora o hack do proxy não funcione, mas será confirmado novamente.

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

Olá pessoal, obrigado por todas as informações,

mas, na verdade, se alguém pudesse explicar em detalhes como implementar os 'hacks de proxy reverso' listados aqui:
https://github.com/mrdoob/three.js/issues/8110#issuecomment -183570240

isso seria bom

obrigado
Sa'ar

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

Pelo que percebi, os navegadores atuais do webkit nunca verão a mudança. Eles vão tê-lo pronto para um Mac e IOS OS que ninguém tem. Eles ainda estão mexendo no CORS para IOS por causa de "problemas de estrutura" que o impedem.

Pode ter que recorrer a uma solução Flash se Stage3D pode renderizar hardware acelerado, mas não gosta como pode. Ele está constantemente desenhando dados de bitmap.

Obrigado pela resposta rápida

ok, então nenhuma solução alternativa para mim ainda, até que a Apple conserte isso.

Que tal capturar "Exceção de DOM 18" para opções de fallback? Como posso pegá-lo?

Tentei colocá-lo na chamada render () de um objeto THREE.WebGLRenderer, mas ele não foi detectado.

Você faz a detecção em um vídeo temporário. ie

testVideo.hasAttribute("crossOrigin")

Você também pode apenas fazer uma detecção do navegador. Seu Safari e IE 11.

Apenas um aviso sobre esse problema maluco. Ainda não consigo testar o modo VR no IOS, a menos que implante no meu Ipad.

Os aplicativos Cordova usam WebView. Ele tem opções para jogar em linha, para contornar esse problema incômodo. Ele funciona em torno da interação do usuário. Este é o mais louco de todos e tem me deixado louco.

O WebView parece funcionar em torno do CORS completamente, mesmo se for um arquivo html local em execução no arquivo: //. O WebGL está funcionando em aplicativos Cordova sem a necessidade do atributo crossorigin. Esta é uma notícia chocante e boa. Não será necessário hackear o proxy, mas o Safari IOS / OSX precisará.

Não consigo verificar os controles de orientação de pseudo VR, mas os controles de toque estão funcionando, assim como o antigo efeito estéreo de papelão. Vou atualizar esse tíquete do Webkit.

Testar no Android é um problema por causa do bug de renderização do Chrome que passei 3 meses tentando fazer com que o pessoal do Chromium consertasse e desisti. Infelizmente, está completamente preto e, felizmente, não é um problema do CORS que não mostra erros.

então eu entendi direito? AINDA é a única maneira de usar texturas de vídeo webgl com webgl implementando esse hack de proxy no servidor?

O Safari está completa e totalmente confuso, assim como o IOS. Se você usa aplicativos baseados no Cordova WebView, pode jogar em linha, reproduzir automaticamente e não perguntar por quê, mas o CORS não é um problema. Isso seria para mp4 / HLS no IOS.

Mas como eu relatei e descobri. Eles aceleram dispositivos mais antigos e os tornam mais lentos para forçar as pessoas a fazerem upgrade. O Ipad 3 é inútil para WebGL e renderiza a 5fps. Precisa ser um dispositivo mais recente.

No Safari no OSX, mediasource está completa e totalmente confuso. o proxy CORS não funciona lá. Também precisa ser um arquivo mp4 ou HLS nativo. Com o HLS nativo, você fornece um URL de proxy CORS.

Esses insucessos da Apple estão planejando lançar correções no macOS, ou seja, em algo que ninguém ainda fez.

Eles estão tentando corrigir problemas de estrutura subjacentes no IOS. Portanto, eu duvido que o CORS seja corrigido na próxima versão do IOS.

Nem o WebVR também, ambos são uma piada. Eles tratam o WebVR como uma espécie de piada e estão anos atrás.

Bem, o WebVR no desktop precisa do SDK do Windows, então o OSX ainda não é uma opção, mas pelo menos o apis poderia estar lá para teste do cliente? Se o Android tem uma tela de papelão padrão, não tenho ideia de por que o IOS não pode e tem o WebVR habilitado?

Eles deixaram esse problema do CORS persistindo por anos e este é o produto disso.

Isso parece muito louco.
(Desculpe, não sou um desenvolvedor full stack)
Eu só quero ter certeza: apesar de tudo, se eu não tiver acesso ao servidor, as texturas de vídeo no webgl não são possíveis no ios? COM o hack do proxy, ele funciona no ios, mas NÃO no osx?

Você pode tentar um iframe. Eu não tentei isso ainda. O jogador terá que estar sentado em frente à nuvem com os arquivos de vídeo.

não ajuda com código dinâmico embora. ou seja, alguns links pseudo.

um link de vídeo é //videos.electroteque.org/360/video.mp4

A página iframe é //videos.electroteque.org/360/player.html

A Apple está liderando o caminho com os padrões que acredito. Onde você precisa de páginas de iframe de arquivo estático para seus jogadores.

Eu vi que o Chrome para iOS adicionará reprodução inline:
https://bugs.chromium.org/p/chromium/issues/detail?id=395206
Na terça - feira, 23 de agosto de 2016 às 5:18, danrossi

Você pode tentar um iframe. Eu não tentei isso ainda. O jogador terá que
estar sentado em frente à nuvem com os arquivos de vídeo.

não ajuda com código dinâmico embora. ou seja, alguns links pseudo.

um link de vídeo é //videos.electroteque.org/360/video.mp4

A página iframe é //videos.electroteque.org/360/player.html

A Apple está liderando o caminho com os padrões que acredito. Onde você precisa de estática
arquive páginas de iframe para seus jogadores.

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/mrdoob/three.js/issues/8110#issuecomment -241712327,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/AANbgfcQaLhx_UmJHEmViJ76_Hi4uikSks5qiuUKgaJpZM4HYtu3
.

Sim! 🤘

Acabei de testar o Chrome no IOS. Eu não sabia que eles tinham um.

Parece que também usa Webkit como o Firefox. E sofre com problemas de CORS. É difícil depurar remotamente o Chrome no IOS por causa das limitações rígidas da Apple e o sistema continua travando. Mas mudei meu trabalho CORS em torno do url e recebo uma moldura preta. Portanto, eu sei que o CORS é deficiente no Chrome, Firefox e Safari no IOS. Com o URL de proxy CORS adequado, ele está "funcionando"

a reprodução em linha é apenas parte do problema e apenas um problema para o iPhone.

a reprodução inline está chegando no iOS 10. A solução iframe funciona para o problema CORS, mas você perde devicemotion e orientationchange eventos na janela filho

Sim, apenas obter a reprodução em linha é apenas metade do problema. O problema do CORS é muito mais importante, mas não chegará ao IOS 10. O problema do CORS pode ser completamente resolvido no Safari, mas no macOS.

A solução alternativa Iframe não é uma opção que exige sentar no mesmo domínio que o armazenamento em nuvem, por exemplo. Talvez haja algum tipo de hack de DNS para fazer parecer que cname sub.domain.com é domain.com, mas não faço ideia.

@thiagopnts Então, esses eventos seriam desabilitados em um player incorporado de iframe, mesmo em tela cheia?

@danrossi pelo que testamos, todos os eventos anexados ao window não são disparados quando dentro de um iframe

Legal, Apple!

@thiagopnts Você pode dar um exemplo de iframe corrigindo o problema de cors? Obrigado!!

@cheesyeyes aqui: http://thiago.me/kaleidoscope/iframe.html
a página está nas páginas do github, o iframe e o vídeo são carregados do Google Drive

sim, isso funciona no Safari, mas não é muito prático. um arquivo html estático para cada vídeo no CDN?

Gente, esse assunto deve ser encerrado?

Acho que não há nada que você possa fazer. Assim como o "antigo Idevice pretendia estrangular para torná-lo obsoleto", como acabamos de descobrir com o problema de fps.

Algo realmente bizarro mudou no Safari no Yosemite que não existia antes. Ele quebrou a detecção de recursos com CORS em muitas coisas que fiz.

Apenas para avisar as pessoas que estão trabalhando como ele realmente está quebrado.

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

No IE11, ele retorna falso conforme o esperado. No Safari é verdade, mas o bug do CORS ainda está obviamente lá. A detecção de recursos existe para exigir obviamente o hack do proxy. Loucura.

Então, não posso deixar de pensar que alguma mudança incompleta foi empurrada?

Esta mudança estranha com o sinalizador crossOrigin está no Safari 10. Portanto, uma implementação incompleta. Safari 9 não tinha.

Eu relatei alguns tíquetes de bug do webkit.

Eles sabotaram o hack do proxy CORS em uma atualização do IOS. O macOS também não corrigiu o problema do CORS no Safari.

Agora preciso descobrir como contornar a sabotagem.

Sério me fazendo suar haha.

Todos, façam a sua parte e convençam as pessoas que vocês conhecem a parar de usar dispositivos Apple. Diga a eles que a Apple é o novo IE5.

Bem, é triste dizer que o CORS no IOS é uma restrição do framework, acredito que eles não se preocuparam em consertar no IOS 10. Fora isso, qualquer coisa que use o Webkit é um problema.

Aparentemente, o problema do CORS foi corrigido no Safari no macOS, mas com as atualizações mais recentes. A reprodução de vídeo em linha também está funcionando no IOS 10.

Aqui estão dois testes para streaming mp4 e outro para HLS. O HLS requer trabalho extra por causa de um bug separado com FlipY que ainda é um problema no OSX Safari.

A renderização HLS no IOS 10 está sendo exibida, mas apresenta problemas com artefatos de cores. Os frames param de funcionar, mas acredito que seja um problema com o emulador e queda de frames. Agora não tenho nenhum dispositivo que possa ser atualizado para o IOS 10 por causa da obsolescência e da programação excessiva da parte da Apple. O HLS ainda não aparece no IOS 9. Ambos exigem o proxy CORS para mp4 e HLS.

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

Agora estou preso em uma situação em que a detecção de recurso crossOrigin não pode ser usada porque relata suporte no OSX 10.11, mas não existe tal coisa. tem que tentar detectar em qual OSX safari é usado também. muito mal.

Isso é um pouco absurdo e está realmente impedindo o iOS de qualquer desenvolvimento WebVR baseado em vídeo real. Estou tentando obter um recurso de domínio cruzado como parte de um projeto atual, e isso é a única coisa que está me segurando agora. Funciona em todos os Androids e desktops / laptops, mas é claro que não funciona no iOS ...

@theDrGray Você pode tentar o hack do iframe, mas os iframes bloqueiam a orientação da apis que precisa de outro hack, eu acredito? Vou investigar uma demonstração de iframe em breve.

Isso significa que em seu CDN você precisa de configurações de reprodutor de vídeo estático por vídeo, o que é ruim. O que eu posso brincar é

filename.html é analisado e o nome do arquivo carregado é filename.mp4, filename.webm, filename, m3u8 filename.mpd etc. Então um token privado pode ser carregado como filename.html? t = token.

Se apenas uma função Amazon Lamda pudesse funcionar no mesmo domínio que o cname dos vídeos, os jogadores poderiam ser dinâmicos ??

Se tudo mais falhar, você precisa de um proxy CORS e detectar isso é um problema agora. Eles sabotaram no Safari 10. Safari 10 relata suporte para "crossOrigin", mas realmente não faz no IOS 10 e Yosemite. Você precisa fazer uma verificação secundária para OSX 10.12 haha

Aqui está a aparência da detecção de CORS no meu projeto do reprodutor 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;
    }

Mesmos problemas aqui .... Funciona em qualquer lugar, exceto iOS. Tão perturbador. Que grande buraco na minha entrega. Ele SÓ funciona (taxa de quadros terrível, posso acrescentar) quando o caminho de origem é relativo ... Não é ideal para sistema de escala. Ugh .... Bem .... Pelo menos eu posso parar de bater minha cabeça .... É impossível .... Por agora ... Agora, para construir em torno disso ... E ux fallbacks e mensagens.

@danrossi Obrigado pelo seu comentário "Aparentemente, o problema CORS foi corrigido no Safari no macOS, mas as atualizações mais recentes", no entanto, não consegui encontrar outros detalhes além do seu comentário. Você sabe com qual versão do macOS e Safari isso funciona? Isso seria um "sinal" de que a Apple propagará essa correção para o iOS?

Pode-se esperar ...

Em 1º de dezembro de 2016, 15:50, "Kieran Farr" [email protected] escreveu:

@danrossi https://github.com/danrossi Obrigado pelo seu comentário
"Aparentemente, o problema CORS foi corrigido no Safari no macOS, mas o mais recente
atualizações ", no entanto, não consegui encontrar outros detalhes em nenhum outro lugar
além do seu comentário. Você sabe qual é a versão do macOS e do Safari?
funciona com? Isso seria um "sinal" de que a Apple propagará essa correção para
iOS?

-
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/mrdoob/three.js/issues/8110#issuecomment-264290616 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/ANKfT8A140W4hW0YMqq3L6AP_gljY4WUks5rDzMGgaJpZM4HYtu3
.

@kfarr seja

Confirmado que funciona conforme o esperado (bug corrigido) ao testar este URL de teste usando o macOS Sierra 10.12.1 (16B2659) versão mais recente do Safari 10.0.1 (12602.2.14.0.7).

Bug ainda NÃO foi corrigido no Mobile Safari no iOS 10.2 Public Beta 3 (14C5077b). Há um Beta 4 mais recente disponível, mas ainda não instalei ou testei.

Sim, ainda é um problema no IOS. Se você usa aplicativos baseados em WebView Cordova. Não há problema de CORS, essa é a parte mais estranha.

Hhmmmmmm .... Wrapper Cordova corrige isso!?! Ímpar...

Em 1 de dezembro de 2016, 18:59, "danrossi" [email protected] escreveu:

Sim, ainda é um problema no IOS. Se você usa aplicativos baseados em WebView Cordova.
Não há problema de CORS, essa é a parte mais estranha.

-
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/mrdoob/three.js/issues/8110#issuecomment-264333449 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/ANKfT40CQRZqWYEJWmojo_Omvl38WeUlks5rD19GgaJpZM4HYtu3
.

Sim, contorna qualquer restrição CORS e nem mesmo precisa do atributo crossOrigin. Esperançosamente, eles não sabotam isso, pois é uma opção.

Alguma ideia do que causa esse comportamento para Cordova WebView? Tentei ler esta fonte https://github.com/apache/cordova-ios/blob/master/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewEngine.m e não consigo identificar nada relacionado.

@ matti777 No que me diz respeito, contanto que funcione e espero que eles não descubram e sabotem de propósito, que seja haha.

Preciso confirmar que este ainda é o caso no IOS10, embora desculpe. Por enquanto eu detecto para Cordova e não tento usar fontes de proxy CORS. Meu recurso muda para fontes de proxy CORS quando necessário.

Bem, eu quis dizer que se eu soubesse o que o Cordova estava fazendo de diferente com seu UIWebView, eu replicaria esse código em meu próprio aplicativo nativo para ter o suporte CORS para meus vídeos html5 que também uso como texturas THREE.js.

Estamos usando vídeos hospedados no Vimeo e enquanto os URLs públicos do formulário:

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

..dnão funcionam, os vídeos funcionam com os URLs para os quais são redirecionados:

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

Talvez seu vimeocdn.com tenha um recurso de proxy reverso instalado então? Acho que devo perguntar ao Vimeo.

Devo dizer que estou muito irritado com isso. Obrigado Steve.

• M

Vou tentar a solução IFRAME. Não tenho certeza de como fazer isso. Estou criando o elemento / tela de vídeo a partir do código (e nunca adicionando-os ao DOM, é claro), então estava me perguntando se algo como:

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

.. basta.

Então, uhm, depois de desistir das texturas de vídeo do iOS, mudei para o Android, apenas para notar um comportamento semelhante através do THREE.js; meu vídeo CORS é reproduzido (ouço o áudio), mas o vídeo não é reproduzido - tudo o que vejo é uma tela preta. Tentei fazer isso com THREE.js r79 e r84, agora há pouco. O estranho aqui é que http://krpano.com/ios/bugs/ios8-webgl-video-cors/ funciona bem no Android?

Este é o código que estou usando no Android - bem, todas as plataformas, por falar nisso - (rodando dentro do aplicativo nativo em um webview, com aceleração de hardware ligada e WebChromeClient instalado):

http://pastebin.com/Y1D3beti

A única diferença para o WebGL bruto do krpano.com em funcionamento é que eles estão enviando a textura diretamente do elemento de vídeo, em vez de através de uma tela - esse é o meu problema? Eu realmente precisaria renderizar por meio de tela para adicionar coisas sobre e ao redor da imagem de vídeo.

• Matti

A única diferença para o WebGL bruto do krpano.com em funcionamento é que eles estão enviando a textura diretamente do elemento de vídeo, em vez de através de uma tela - esse é o meu problema?

Pode ser? Você já tentou passar o vídeo diretamente?

Este tíquete diz respeito a problemas do CORS com o Safari. O Safari 10 no macOS foi completamente corrigido até mesmo para o Dash.

O IOS 10 ainda é um problema com o COR e requer proxies CORS. Ou use os aplicativos Cordova Webview que não usam restrições CORS de forma alguma.

O navegador de ações do Android não oferece suporte a CORS e até mesmo o proxy CORS não funciona.

Chrome e Firefox apenas no Android.

Esse problema específico não tem nada a ver com three.js, infelizmente. Eu nem mesmo usaria um desenho em tela que deixaria muitos quadros cair.

@danrossi podemos ver o que você está construindo? Parece muito impressionante!

Em quinta-feira, 26 de janeiro de 2017, 8h41, danrossi [email protected] escreveu:

Este tíquete diz respeito a problemas do CORS com o Safari. Safari 10 no macOS é
corrigido completamente até mesmo para Dash.

O IOS 10 ainda é um problema com o COR e requer proxies CORS.

O navegador de ações do Android não oferece suporte a CORS e até mesmo o proxy CORS oferece
não funciona.

Chrome e Firefox apenas no Android.

Esse problema específico não tem nada a ver com three.js, infelizmente. eu
nem mesmo usaria o desenho da tela que deixaria muitos quadros cair.

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/mrdoob/three.js/issues/8110#issuecomment-275438671 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/AANbgazonmTe-yGDfgToCRVhTy_qyp_Eks5rWMy1gaJpZM4HYtu3
.

>

http://jonobr1.com/

O @danrossi Safari foi totalmente corrigido para você? Você está usando o proxy hack para fazer o Safari funcionar agora? Ainda estou recebendo SecurityError (DOM Exception 18): The operation is insecure. em https://krpano.com/ios/bugs/ios8-webgl-video-cors/ com o Safari 10.0.3 no El Capitan.

@timothyallan Eu tive muitos outros projetos nos quais me concentrar enquanto desenvolvo muitos recursos diferentes do player de vídeo. Pelo que eu posso dizer, eles corrigiram isso no macOS Safari, todos os outros Safari são vapourware no que diz respeito a eles. Não vi atualizações para sistemas operacionais mais antigos, nem mesmo atualizações de segurança.

IOS 10 é o disjuntor aqui e ainda o problema. Tive de explicar às pessoas o tempo todo por que não está funcionando e como evitá-lo.

A Apple espera que as pessoas atualizem para novos sistemas operacionais e isso é definitivo, eu acredito.

O problema do webgl com o Dash no Safari vejo resquícios e resquícios de atualizações de status nesse tíquete, mas em meu teste acho que também estava funcionando no macOS.

Apenas uma atualização aqui. Esses balaços forneceram algum estímulo, embora ainda muito silenciosos.

A correção do cors está na versão beta do IOS11. IOS10 não vai conseguir.

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

Nova atualização. IOS 11 beta em dispositivos relatados como tendo CORS corrigido. Agora exige um novo dispositivo que suporte IOS 11.

Nem se preocupe com o simulador, ele está quebrado e não tem a correção CORS.

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

Yay!!

Em 11 de agosto de 2017, 02:53, "danrossi" [email protected] escreveu:

Nova atualização. IOS 11 beta em dispositivos relatados como tendo CORS corrigido. Agora
requer um novo dispositivo que suporte IOS 11.

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

-
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/mrdoob/three.js/issues/8110#issuecomment-321742658 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/ANKfT5TG41uHQV8U_FrF8LaJ0EMKKIy_ks5sW_pjgaJpZM4HYtu3
.

A confirmação do CORS é corrigida no IOS 11.1. Finalmente consegui o orçamento para obter um dispositivo de hardware para teste. Demorou tanto.

Não há necessidade de proxy CORS com 11.1. Não acho que o suporte ao atributo CORS possa ser testado adequadamente com o Safari. Tem que fazer verificações de versão do cliente.

No entanto, há grandes problemas de regressão HLS / webgl a serem examinados agora.

Excelente. Obrigado!

Em 5 de novembro de 2017, 1h36, "danrossi" [email protected] escreveu:

A confirmação do CORS é corrigida no IOS 11.1. Eu finalmente consegui o orçamento para obter
um dispositivo de hardware para teste. Demorou tanto.

Não há necessidade de proxy CORS com 11.1. Eu não acho que o atributo CORS
o suporte pode ser devidamente testado com o Safari. Tem que fazer a versão do cliente
Verificações.

No entanto, há grandes problemas de regressão HLS / webgl a serem examinados agora.

-
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/mrdoob/three.js/issues/8110#issuecomment-341952485 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/ANKfT52MncuxghqJmPes4iFoO1a_K_Gfks5szVd1gaJpZM4HYtu3
.