Three.js: HLS no Safari / IOS agora não funciona

É desenhar na tela e renderizar com o renderizador de tela, embora elimine quadros. Algo é necessário com o webgl.

Isso é uma beleza. Eu modifiquei um pouco um demo kpano com o fluxo HLS com proxy.

Ele está funcionando agora no Safari OSX, mas não no IOS 9. Alguma idéia de qual é a diferença? Infelizmente, não sou um especialista com sinalizadores de webgl ou o que eles fazem. No IOS9 ainda é uma moldura preta.

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

este último link é preto ret / som apenas no safari 9.1.3 / mac os x 10.11.6

O que é HLS?

@makc realmente? Eu tenho OSX 10.10 e Safari 10. Bem, isso explica a recente mudança de sabotagem pela Apple. Safari 10. Então, se formos o Safari 10, estamos todos bem.

@mrdoob HLS = Apple Streaming. ou seja, para transmissões ao vivo, mas também VOD. A transmissão ao vivo vai se tornar uma norma com o equipamento Terradeck. ou seja, http://dev.electroteque.org/video/360/hls/ultra_light_flight.m3u8

Alguma idéia de quais diferenças poderiam haver? Tentei mudar algumas coisas no primeiro exemplo. O segundo exemplo são as funções webgl brutas.

então texImage2D irá renderizar parcialmente HLS, mas não no IOS ainda, talvez porque não seja o Safari 10?

Por favor, me perdoe, 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. Eu tenho que fazer isso funcionar para testar ainda mais o HLS funcionando no IOS. A Apple está realmente me fazendo suar para apagar o fogo deles hahah.

Se eu conseguir a renderização OSX, isso seria um começo. Eu só preciso descobrir o que é diferente no three.js?

Ainda estou tentando fazer métodos de redução para comparar o que é diferente. Depois de descobrir isso, posso fazer o IOS funcionar também.

Talvez os programas de sombreamento extras em three.js estejam causando problemas de renderização? Não entendi, mas estou tentando replicar no exemplo webgl bruto o que three.js está fazendo naquele exemplo equirretangular. Existe um exemplo de código de shader para isso?

Encontrei algumas funções brutas aqui que espero poder replicar totalmente o que o three.js está fazendo. Não posso simplesmente copiar os programas de sombreador diretamente porque algumas variáveis ​​são definidas externamente como a posição mundial.

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

Posso ter acabado de encontrar este ou possivelmente um problema relacionado. Tenho arquivos h264 mp4 localizados em um balde S3 e estou carregando-os em um video.src como um blob.

Se eu fizer upload para meu balde S3 usando o carregador baseado na web da Amazon, os vídeos serão reproduzidos bem quando carregados diretamente no Mobile Safari (iOS 10.0.1), mas se eu tentar reproduzi-los usando meu visualizador three.js, então recebo um tela preta. No entanto, se eu fizer upload para o balde S3 com o Cyberduck, eles funcionam bem diretamente no Mobile Safari e no three.js.

Parece que o Cyberduck está definindo os metadados 'Content-Type = video / mp4' e o uploader da AWS é 'Content-Type = application / octet-stream'. Quando eu defino manualmente esses metadados para video / mp4, tudo funciona corretamente.

Problema estranho, e que me causou muitos arranhões de cabeça. Informe se esse é o mesmo problema subjacente deste tíquete ou se devo criar um novo.

Obrigado,
Dustin

Isso é para HLS mate como em fragmentos MPEGTS ou arquivos fragmentados não MP4. O MP4 funciona tanto no Safari quanto no IOS. Eu verifiquei o tipo MIME no cyberduck e ele diz que o mpegts está correto.

O mesmo fluxo está funcionando para mim no exemplo webgl bruto, mas não no IOS, é claro. Seu problema parece semelhante ao meu, embora como em uma moldura preta. Sem renderização alguma.

@danrossi ok legal. Vou criar um novo tíquete especificamente para o meu problema. Obrigado.

Acho que esse é o problema: www.krpano.com/ios/bugs/ios10-webgl-video-texture-crash/
Atualmente, estou tentando implementar a mesma solução alternativa para three.js, mas não estou indo muito longe.

@fase um. É um problema de safári tanto no OSX quanto no IOS. Mp4 está funcionando bem para IOS e OSX. Vou mexer com anti-serrilhamento.

Ainda não consigo descobrir as diferenças entre os dois. O exemplo webgl bruto ainda não funcionará no IOS, mas fazê-lo funcionar no OSX é um começo.

Estou me perguntando se posso encontrar um programa de sombreador equirretângulo funcional que eu possa usar.

Mais informações aqui: http://stackoverflow.com/questions/39123109/rendering-a-video-with-webgl-in-ios-10-beta-7-safari-shows-weird-purplish-co.

Sei que esse é um bug do navegador, mas pode ser necessário implementar uma solução alternativa, dado o tempo que esses bugs do WebGL levam para serem corrigidos.

No caso de usar a textura através da tela, o vídeo foi exibido em safári.
Porém, como ainda existem problemas de CORS no iOS, funcionou apenas no Same Origin.
https://bugs.webkit.org/show_bug.cgi?id=135379

Não estou familiarizado com o webgl, mas consulte o seguinte.
https://github.com/NishimuraT/videojs-panorama/commit/bd99200d8831c7ad0d10d742e087953da0f44169

@NishimuraT Acho que sei o que você quer dizer com usar o canavasrender. Eu tentei fazer o método de redução.

Acho que estava funcionando, mas causou graves quedas de quadros e problemas de desempenho de reprodução devido à CPU. Obviamente pior no IOS. Ipad 3 descarta frames para webgl já.

@danrossi eu tive um pequeno mal-entendido. Eu sinto Muito. Eu havia enviado uma coisa errada.

Confirmei o mesmo problema com o projeto elevr, que usa webgl e shaders brutos. Terei que hackear aquele para trabalhar meu caminho de volta. Algo ali está causando problemas de renderização e afetaria o three.js da mesma forma.

Eu confirmei no elevr que é a limpeza automática ligando a textura que está causando a quebra, ou seja,

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

Se estiver comentado, está funcionando.

Isso também estava causando um problema, não tenho certeza para que serve.

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

Talvez haja uma propriedade de limpeza automática que está fazendo a mesma coisa em three.js?

Eu vejo muitas referências a

state.bindTexture(_gl.TEXTURE_2D, null);

Mas não sei onde pode estar. É necessário fazer isso?

o código é muito louco para rastrear o que está causando o problema de desenho de textura. Parece ter algo com essa amarração de textura.

@danrossi existe alguma página que o

Desculpe pelo barulho, companheiro. Fiz mais testes AB. Na verdade, parece o que eu mencionei, já que tive que comentar para a nossa demonstração também.

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

Isso está causando o problema. No entanto, sem ela, a textura fica de cabeça para baixo. Vou adicionar outro teste para mostrar que agora está funcionando.

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

Outro exemplo bruto que encontrei, comentei FLIP_Y. Possível bug do Webkit agora?

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

A única referência ao flipY é isso, mas o webkit noturno ainda é um problema

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

Se eu desabilitar o flipY, que presumo que interrompa a aceleração do hardware, ele 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

Tentando ver se é um bug do webkit agora. Como é possível girar a textura para contorná-la por enquanto?

Como é possível girar a textura para contorná-la por enquanto?

por que não apenas inverter a geometria uv ou fazer isso no shader

@makc Não tenho ideia de como fazer isso.

Só para fazer mais cabeças. Esta "correção" FlipY não ajuda no IOS 9, apenas testei.

Outra coisa é um problema agora. Demorou dias apenas para rastrear este.

Pode ser um problema do webkit, não do Three.JS, pelo que parece. Como de costume, sinto muito por isso.

Também fiz um relatório lá https://bugs.webkit.org/show_bug.cgi?id=163866

Não tenho ideia de como fazer isso.

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

@makc confirmar que inverter o uv ajuda. Como isso se inverte com isso?

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

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

Porém, o problema ainda é evidente no IOS.

@makc. É bem possível que este programa de shader esteja fazendo a virada, isso estava em uma das fontes de demonstração.

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

É encontrado na demonstração original que parecia estar funcionando porque não usa a bandeira FlipY que parece estar fazendo isso no programa de shader.

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

Não tem ideia de como integrar isso em three.js? Seria melhor usar um programa de shader?

Ainda estou depurando IOS agora.

Este é interessante. Ao tentar replicar esse cálculo neste exemplo, parece que ele está invertendo, mas ainda o dimensiona mal.

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

Então gl_Position controla sua posição.

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

Seria melhor usar um programa de shader?

o programa shader é executado uma vez a cada quadro, em vez de inverter os uvs na geometria apenas uma vez antes de tudo começar.

@makc provavelmente é melhor apenas definir os valores no início. Se eu estiver correto, esses valores uv são variáveis ​​no programa de sombreador e usados ​​no cálculo?

Vejo nas fontes algumas referências a gl_Position. Não tenho certeza se este é o certo, mas há outro como este

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

Obrigado.

Eu tentei todos os tipos de truques com o webgl no IOS Safari para ver se consigo um quadro para renderizar e ele está apenas preto por enquanto. MP4 está bem.

Não há muitos recursos sobre isso. Acredito que a minha descoberta as pessoas também procuram. É para streaming ao vivo aliás, mas VOD também.

Mandei alguém testar algumas coisas. Eles acreditam que este exemplo webgl bruto com a correção FLIPY funciona no IOS 10, mas a versão three.js não está de fato travando neles.

Percebi que ele usou o filtro NEAREST que torna a textura em blocos, tentei replicar isso, mas o mesmo problema para eles.

então nenhum desses funciona

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

Mas isso é para eles, embora o IOS 9 para mim não

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

Depois de alguns testes muito pesados ​​e dolorosos, ajustei as demos e o problema.

A solução alternativa FlipY é necessária para HLS em OSX 10.11 e macOS, IOS 9 e 10. O exemplo webgl bruto não usa FlipY porque é feito no programa de sombreador. Com three.js a geometria tem que ser invertida.

A renderização HLS no IOS 10 está sendo exibida, mas apresenta graves problemas de 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 IOS 10. Ele não aparece no IOS 9. Ambos requerem o proxy CORS para mp4 e HLS.

Talvez eu precise fornecer outro tíquete em relação ao problema de renderização de cores com HLS no IOS 10, uma vez que eu confirme que não é o emulador.

Isso é absolutamente doloroso, não é de admirar que ninguém queira apoiar o Safari, mas as pessoas precisam dele funcionando.

Tive de fornecer aqui diferentes configurações de formato rgb. O padrão produz barras de cores verticais, o rgba as cores estão incorretas. Mas no emulador. Não consigo testar adequadamente o IOS 10 porque meu dispositivo Ipad deixou de ser compatível. Vou tentar conseguir um Iphone com 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

Por favor, concentre-se nestes dois exemplos. os sinalizadores RGB não fazem diferença em um dispositivo real, o simulador produz uma saída defeituosa, mas uma saída semelhante ao usar o formato RGBA.

A solução alternativa FlipY é necessária para IOS 9/10 / OSX Safari com HLS.

Consegui replicar um problema de cor com a renderização HLS webGL que agora precisa de um segundo tíquete, embora não tenha certeza se um bug de flakey do Webkit é um problema de three.js.

Tantas falhas e bugs enormes que fazem com que isso seja um obstáculo.

Portanto, essa saída HLS webgl está funcionando apenas parcialmente no IOS 10, não no IOS 9. Muitos dispositivos estão presos no 9 agora. Preciso encontrar uma solução para 9.

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

Oi! Eu tenho o mesmo problema. Você tem alguma solução agora?

sim, está nessas demos, mas verifique o segundo tíquete sobre um problema de espaço de cores com o IOS 10. Parece que não haverá nenhum esforço por parte do Webkit / Apple para fazê-lo funcionar no IOS 9, o que significa que dispositivos mais antigos como o Ipad 3 são deixados de fora, embora ele mal conseguia renderizar 5fps de qualquer maneira. Tem que se concentrar primeiro para que o IOS 10 funcione.

É uma solução alternativa para esse problema que foi relatado ao Webkit. É um problema em todos os Safari.

http://dev.electroteque.org/webgl/webgl.html parece não funcionar. Testei a página no ios10. Mas o safari falha quando a página carrega.

Use o exemplo do threejs.

Testei todos os exemplos listados neste problema. Parece que apenas http://dev.electroteque.org/webgl/webglrgba.html funciona. Mas tem um problema de espaço de cores.

@wuyingfengsui isso está funcionando no IOS 10 Iphone.

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

Você provavelmente está verificando em um simulador, aposto. Esse é um problema enorme. Além de não atualizar o quadro, ele exibe barras de cores verdes. Ao usar o sinalizador RGBA, ele funcionará em um simulador. Há um problema gráfico estranho acontecendo lá.

Em um dispositivo ID real, você verá o problema de espaço de cores ao usar o sinalizador RGB, como faz com o sinalizador RGBA no simulador!

Eu fui forçado a testar o IOS 10 apropriadamente por agora porque o Ipad 3 se tornou obsoleto, mas felizmente eu tive acesso a um Iphone.

Anote também o URL do proxy CORS nele.

Consulte isso em relação ao problema de espaço de cores agora

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

e este tíquete do webkit que eu duvido que eles vão se preocupar em consertar e enviar um lançamento.

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

Acho que funciona quando mudo RGB para RGBA no ios 10 iphone 7.

ok, então é diferente para diferentes dispositivos, bom. Eu atualizei para RGBA. Como é isso ?

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

@danrossi Funciona.

@wuyingfengsui , terei que atualizar o tíquete do webkit em relação a isso. Vejo que há outras bandeiras de cores para mexer e espero que seja a certa. Tentei diferentes streams HLS e eram iguais.

Você pode ver nas constantes three.js que há uma gama de valores para brincar. ou seja, estes. Também há sinalizadores de tipo de byte que são tratados. Tentativa e erro e muito cansativa tentativa e erro.

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

Então, infelizmente, o IOS 9 se tornou completamente redundante com isso e não funcionará. Dispositivos mais antigos nunca terão IOS 10.

Acredito que haja algum tipo de sabotagem acontecendo e que funcionava antes do lançamento do Safari 10. minha fase de teste levou meses por causa de todas as inconsistências com a Apple e às vezes com o Android. Tenho quase certeza de que ele estava funcionando quando testei o HLS.

Não estou familiarizado com webGL. Acho que não pode ser resolvido até que o webkit o conserte.

Isso é o que carrega a textura para o webgl. aquelas bandeiras lá são de seu interesse.

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

@wuyingfengsui se eles demoraram mais de 5 anos para "consertar" parcialmente o problema do CORS no macOS, não prenda a respiração.

É por isso que alguém tem que sentar lá e descobrir o que fazer e, infelizmente, sou eu mesmo, hahah.

Se você pegar o exemplo webgl bruto, essas sinalizações podem ser alteradas. Ou faça isso via three.js usando as constantes e as propriedades "format" e "type" o tipo é o tipo de byte, o formato é o formato de cor que você viu RGBA é necessário para apenas fazê-lo funcionar.

Vou passar algum tempo amanhã para examinar cada bandeira e espero que uma combinação funcione.

@danrossi Como vai?

Eu apenas tentei mexer com todas as bandeiras possíveis e nada. Só pode aceitar sinalizadores RGB e RGBA e o tipo de byte não tem sinal. Outras opções mostravam apenas uma tela preta. Não tem certeza do que mais fazer?

@danrossi Obrigado pelo seu trabalho. Acho que Hls.js reproduz o vídeo hls com MSE. Mas o Safari Mobile não oferece suporte a MSE.

@wuyingfengsui este é um problema nativo de HLS com IOS agora, minhas correções acima contornam o bug do Safari OSX.

com o Dash streaming, o Safari mais antigo tinha problemas de CORS, mesmo com a solução alternativa de proxy. Talvez no macOS eles tenham corrigido isso também?

Possivelmente, não há nada que possa ser feito a não ser fornecer um método alternativo em three.js usando as correções de código acima.

Duvido que o webkit e a Apple consigam consertá-lo. Então, todos os olhos neste bilhete agora. o sinalizador RGB está relacionado à renderização do IOS 10 agora. IOS 9 e dispositivos mais antigos presos nele são empalhados.

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

Alguma atualização aqui? Alguém fez funcionar com renderização de cores fixas no iOS?

Por favor, consulte este tíquete.

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

Eu duvido que a solução alternativa do HLS vá para o three.js, ela tem que ir para fora dele.

O código para essa solução é o seguinte

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

Se você quiser mexer nos sinalizadores do webgl, use o exemplo bruto do webgl. Tentei todas as opções possíveis e nada agora. Está bem sabotado e sem resposta do webkit.

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

Obrigado. Existe algum outro formato de vídeo para transmitir no sinalizador de vídeo iOS além de HLS? É possível transmitir H.264 sem problemas de renderização?

@pedrofranceschi mp4 está bom. É apenas o HLS que fornece opções para streaming de vídeo 360 ao vivo no IOS.

A correção flipY relacionada a este tíquete precisa ser aplicada a streams HLS e apenas no Safari. Esta correção FlipY não funciona no IOS 9, que desliga os dispositivos mais antigos que não podem obter o IOS 10.

Meu Ipad 3 que tenho usado para testes nunca fará o HLS e o WebGl funcionarem. Tive que testar em um Iphone mais recente. O simulador IOS 10 mal funcionou e teve problemas de artefatos de cor semelhantes ao outro problema.

Pelo menos os sinalizadores inline para Iphone no IOS 10 funcionaram, vídeo inline e webgl são possíveis agora, mas CORS ainda é um problema. CORS só é corrigido no Safari no macOS.

Eu insisto no Safari apenas porque é outro bug clássico do webkit e o streaming HLS.JS em outros navegadores está ok.

Descobri que pode ser corrigido adicionando uma tela extra. Mas ele só funciona no iOS 10. Veja este commit: https://github.com/yanwsh/videojs-panorama/commit/0122b1bbd31093b77ca7f09900afa74e2c537037

Aquilo foi um não evento. Ele está usando a renderização de tela com drawImage. Não é WebGL. Assim como usar o renderizador de tela three.js. O renderizador de canvas realmente é péssimo em IOS, causando quadros perdidos, impossíveis de usar. Esta é a sua solução?

A qualidade não é muito boa. Mas funciona :)

Eliminar fotogramas é mais do que um problema de qualidade :)

@mrdoob Eu tentei o renderizador de tela como uma

Ele ainda perde frames ao fazer isso.

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

@danrossi

@mrdoob Este problema é sobre HLS no Safari. É muito difícil fazer todas essas demos. Mas fiz algumas combinações.

Eu também acabei de descobrir que o Chrome se recusa a reproduzir mp4 agora, a menos que esteja usando a versão proxy Safari CORS do mp4 ahh.

No que diz respeito ao bizarro problema do CanvasRenderer, que pode corrigir o problema HLS temporariamente para o IOS 10. Aqui estão as combinações, para mostrar o que ela está fazendo e alguns deslocamentos de valor de rotação estranhos possíveis. O código é o mesmo. Há uma grade de malha sobre a 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 A versão Safari também não funciona no iOS 10 ...

Isso deve funcionar no IOS 10, mas você deve ver artefatos coloridos.

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

Esses outros são testes do CanvasRenderer para tentar contornar o problema do IOS, pelo menos deveria estar funcionando em navegadores de desktop e não está.

Isso deve funcionar em qualquer IOS, mas não estou muito preocupado com isso.

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

Não acredito que a solução CanvasRender seja uma boa solução alternativa para IOS, mas é uma opção. Porque ele não só precisa do proxy CORS, o desenho da tela só vai causar quadros perdidos. Safari OSX pode usar a alternativa FlipY em threejs-hls.html

Eu atualizei as demos do canvas, não parece que precisa ser desenhado externamente.

no entanto, há um problema estranho com a geometria da esfera que não consigo descobrir, portanto, a imagem não renderiza ou gira corretamente, está toda inclinada em um ponto.

Clique na área superior esquerda e tente arrastar com os controles orbit.

O problema da malha é que preciso adicionar "overdraw: 0,5" ao MeshBasicMaterial para impedi-lo de mostrar a malha.

Nem requer proxies CORS no safari ao usar o CanvasRenderer. Tentarei dar uma olhada no SoftwareRenderer a seguir para ver se ele funcionará melhor, pois o CanvasRenderer descarta muitos quadros.

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

Considerando que o CanvasRenderer foi marcado como depreciado por causa dos quadros perdidos óbvios. Acho que o único último recurso é tentar texturas de vídeo com o SoftwareRenderer. Essa mudança parece não funcionar ainda e não é possível encontrar uma configuração de exemplo. É apenas uma tela preta.

Alguma solução alternativa para a falha de cor? Tudo é azulado

@andreabadesso Eu tenho dois tíquetes configurados, talvez eu deva mesclá-los.

Para OSX, fazer a solução alternativa FlipY resolverá esse problema desagradável. Para o IOS 10, algo totalmente diferente é necessário.

O desenho da tela é um grande fracasso, não é nem mesmo renderizado corretamente fora da caixa, a geometria está distorcida ao que parece. Ele descarta quadros também.

Agora estou tentando minha sorte com "SoftwareRenderer", que ainda depende do desenho em tela. Tudo o que consigo é uma tela preta agora, então nada. Não há documentação de como fazer as texturas de vídeo funcionarem com ele.

Simplesmente não há outra opção, o webkit não responde e eu tentei todos os sinalizadores de webgl possíveis. Eu poderia voltar e tentar mexer com as codificações, mas o HLS é compactado a partir do arquivo mp4 de trabalho.

Enquanto isso, se alguém precisar de uma solução desesperada, este irá procurar por arquivos .ts, convertê-los para .mp4 e emitir um websocket para que o cliente possa baixar o próximo fragmento em mp4 (que está funcionando no ios10):

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

Posso fornecer a solução completa se alguém estiver interessado.

@andreabadesso Você tem a implementação do cliente sobre sua solução?

Isso é extremamente duvidoso. Não só você ainda precisa de um proxy CORS, ele está tentando passar pelo FFMPEG em tempo real: O O IOS faz websockets? Eu sei que não pode fazer webrtc.

Tentar obter uma textura de vídeo por meio de um desenho em tela com a opção SoftwareRenderer também é ruim. É apenas uma moldura preta. Ambas as opções foram um beco sem saída. Eu esperava que pelo menos o SoftwareRenderer trabalhasse com texturas de vídeo apenas uma textura de imagem exibe.

Olá a todos, estive trabalhando no problema das cores desde o dia anterior e encontrei uma solução que funciona para o meu caso de uso. Este tópico foi muito útil e gostaria de contribuir.
O problema é que as cores vermelha e azul são trocadas. Usei o ffmpeg para pré-trocar essas cores. À medida que as cores são religadas em três, o vídeo volta à sua aparência normal.
Não é uma solução ideal, mas funciona. (testado em IOS 10.2)

@Yralec

Achei que era um problema de codificação ou confusão com a codificação.

Isso não vai ajudar a dizer sobre wowza live streaming. Provavelmente ninguém terá controle de como os codificadores ao vivo funcionam. Para VOD talvez.

Você tem o sinalizador ffmpeg para confirmar?

Ainda é incrível. Parece que isso não é um problema com o three.js, exceto o problema do FlipY, que ainda é necessário.

Eu simplesmente não consigo entender por que o Webkit é assim.

@danrossi

Aqui está o comando que usei:
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 você pode ver, também estou invertendo a saída, então não preciso fazer isso no threejs sozinho.

ok, eu ia perguntar sobre isso.

Não seria mais fácil escrever um sombreador que troque o azul e o verde?

@mrdoob Tenho muito pouco conhecimento sobre sombreadores, então para mim não era (eu também nem pensei nisso), mas se você souber escrever um que troque o vermelho e o azul, é quase com certeza uma solução melhor.
Além disso, a transmissão ao vivo pode finalmente funcionar.

@mrdoob Acho que você está no

Eu fiz algumas pesquisas e parece que há uma troca de pedido de canal como esta, de jeito nenhum sou um especialista com shaders.

gl_FragColor = texture2D(u_image, v_texCoord).bgra;

@mredoob em meu exemplo webgl bruto, tentei algo assim, mas o programa está quebrado e causa erros. Então é aqui que ele obtém cores da textura que é obviamente muito falsa e "bgra" troca os canais vermelho e azul.

Ainda não tenho ideia de como obter uma solução funcional a partir disso.

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

Ocorreu um erro no programa ao copiar e colar.

Usando este código acima. Posso confirmar que o que está sendo renderizado é o que é visível no IOS 10, então ele deve inverter o vermelho e desfocar as cores que são trocadas no shader.

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

@Yralec confirmando a inversão da ordem do canal de cor no shader é invertido de volta no IOS10. No simulador, tive que alterar o formato de cor para rgba para obter a renderização sem linhas estranhas através dele.

gl.texImage2D (gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, vídeo);

@mrdoob como é possível aplicar essa mudança de cor de textura nos programas de sombreamento embutidos?

gl_FragColor=texture2D(sm,txt).bgra;

@mrdoob. Correção. Este pode ser o que as pessoas estariam 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";

Como obter acesso a ele para alterá-lo?

@danrossi Você pode hackear algo assim em JS

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

Eu acredito que preciso copiar os shaders em um THREE.ShaderMaterial, mas não tem ideia de como aplicar a 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
                });

Essa outra maneira é inflexível, pois deve ser aplicada apenas para fluxos HLS no IOS.

na verdade, isso renderiza no safari, mas a correção FlipY falha. Ele joga de cabeça para baixo. a mente confunde. Todo esse esforço por causa da Apple e do Webkit haha.

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

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

@WestLangley o patch não parece funcionar. Eu deveria estar vendo cores invertidas, mas não vejo.

gl_FragColor = texture2D (sm, txt) .bgra;

este é o shader correto para trocar [b] lue e [r] ed: a ordem padrão é rgba, então bgra os troca.

FlipY reparações quebras

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

não tenho ideia de como

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

o patch parece não funcionar. Eu deveria estar vendo cores invertidas, mas não vejo.

talvez você esteja aplicando o patch tarde demais

@makc yes no meu exemplo webgl bruto é fazer o flip no shader.

Acredito que se a inversão for feita no código UV postado no meu exemplo do threejs, ela não será invertida quadro a quadro no shader. Achei que isso removeria um cálculo desnecessário para processar.

no exemplo webgl bruto é invertido no sombreador de vértice

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

então, no sombreador de fragmento, isso inverte os canais de cores.

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

tentar replicar isso em three.js é o problema agora.

Desculpe-me, isso parece funcionar, mas a correção FlipY não funciona. Esqueci de adicionar 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
                });

Se eu alterar o valor tFlip padrão para 1, ele está exibindo o caminho certo para cima, então outra opção de correção para o problema do FlipY com HLS?

tFlip: { value: 1 }

o vídeo decidiu parar de renderizar no simulador, mas pelo menos vejo uma mudança de cor. Infelizmente, o patch não funciona, embora depurá-lo substitua definitivamente o código do sombreador.

Parece que posso fazer um flip com esse valor apenas dando um 1 positivo em vez de negativo.

Perdi o acesso ao IOS10 uma vez que eles tornaram obsoletos os dispositivos mais antigos, como meu Ipad 3. Tenho que carregar o simulador no macOS inicializado em uma unidade externa porque tenho um software que só roda no 10.10. Tempos divertidos com toda essa sabotagem.

Eu não tenho ideia se ele está atualizando o quadro e girando corretamente ainda.

Espero que este exemplo funcione no IOS 10. É o melhor que posso fazer agora. No Safari, deve mostrar cores invertidas.

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

Usando o shadermaterial aparafusa o dimensionamento da imagem, a geometria e impede que a rotação da câmera funcione assim

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

Tenho que tentar fazer esse patch funcionar.

Isso pareceu funcionar, embora ainda atrapalhe a posição da câmera. Não acho que seja uma opção viável. Ele produz ainda mais bugs apenas fazendo isso. Não renderiza o mesmo 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
                });

Se eu tentar usar o material básico, não funcionará. ie

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

Em vez de tentar hackear o shader integrado, eu apenas criaria um shader personalizado.

Aqui está! 😀

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/

Não renderiza apenas uma tela preta.

@danrossi Funcionou para mim.

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

Lembre-se de atualizar o tipo de cor e os nomes das variáveis

Ele renderiza aqui ... (Chrome 55, OSX)

Este problema é sobre texturas de vídeo com streams HLS e Safari, especialmente IOS. Receio: |

Não consigo ver como o meshbasic_frag funciona e como uma textura é aplicada a ele. É isso que está usando.

O programa equirect_frag não consigo ver sendo usado ou selecionado.

gl_FragColor = vec4( outgoingLight, diffuseColor.a );

Isso é tudo que vejo.

Acho que você deve esquecer meshbasic_frag e equirect_frag . Tente usar meu código como base e substitua este:

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

Com algo assim:

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

@mrdoob

a parte traseira estava causando o problema. Este programa de shader é certamente muito mais limpo do que o normal. Qual é a diferença ?

Usando o sombreador personalizado, perco a correção original do FlipY.

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

Tive que modificar um pouco o código do vértice, x foi invertido e y precisava ser invertido. Vou colocar isso em um 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 shader é certamente muito mais limpo do que o normal. Qual é a diferença ?

Magia! 😉

@mrdoob obrigado campeão. desculpe pelo barulho, mas culpe a Apple novamente por este.

Portanto, para vídeo equirretângulo, a demonstração não deveria ser atualizada para usar isso talvez? Então, o programa de sombreador usado pelo MeshBasicMaterial é desnecessário para essas texturas de vídeo? Vou testá-lo em navegadores e diferentes formatos de vídeo.

Vamos fechar?

Aqui está a demonstração atualizada

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

Portanto, para vídeo equirretângulo, a demonstração não deveria ser atualizada para usar isso talvez? Então, o programa de sombreador usado pelo MeshBasicMaterial é desnecessário para essas texturas de vídeo?

Bem, MeshBasicMaterial é mais flexível e as pessoas não precisam escrever sombreadores. É que, para este caso específico, era mais simples escrever um shader personalizado para contornar o problema.

Vamos fechar?

Sim!

Está funcionando bem no IOS 10. Só que os frames não estão atualizando no simulador. Terá que esperar pelo hardware. vou fechar o outro tíquete.

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

Com pequenos ajustes no flipy, o mesmo programa está funcionando no Chrome com o webm.

@mrdoob Acredito que este sombreador funciona em todos os navegadores com texturas de vídeo. A correção invertida, "1.0 - uv.y", só é necessária para HLS no Safari. A inversão do canal de cor só é necessária para IOS10 com HLS.

Camadas muito malucas de soluções alternativas, incluindo o proxy CORS.

Acredito que este tenha um desempenho melhor do que o sombreador fornecido pelo material básico de malha. Esse deveria ser o padrão para texturas de vídeo então? a rotação parece funcionar com o código do vértice.

Olá a todos
Estou tentando fazer um player 360vr com three.js que mostra uma transmissão ao vivo HLS (.m3u8 reproduzido com hls.js)
Funciona no Safari osx com webgl habilitado, mas no ipad 10.2 todas as minhas tentativas se perdem em uma tela preta (o som está funcionando)
Se eu desabilitar o modo vr360, o fluxo de vídeo funciona bem em todos os dispositivos.
Tentei alguns dos métodos sugeridos, mas ainda tenho a renderização em tela preta.
Alguém sabe como contornar?

O FlipY e as correções de inversão de canal de cor estão neste tópico.

Os bugs do Webkit que rastreei estão obsoletos e acabaram criando alguma arrogância sobre isso. Ainda está aberto, mas ninguém vai se incomodar em olhar para eles.

Você precisa da correção FlipY para Safari. Portanto, desative-o ainda na textura three.js.

Aqui estão os métodos es6 formais que desenvolvi para minha solução de jogador. Ainda estou tendo pesadelos meses depois de caçar essa porcaria haha.

Obrigado ao mrdoob, o campeão, por sugerir a solução do shadermaterial. Estou usando isso para todos os navegadores agora. É um sombreador mais simples do que aquele gerado também. É apenas para texturas de vídeo.

 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 o comentário na linha _gl.pixelStorei (_gl.UNPACK_FLIP_Y_WEBGL, texture.flipY) no three.js faz a exibição do vídeo no Safari (10.0.2, na versão anterior era necessário apenas habilitar o webgl nas ferramentas de desenvolvimento, este opção não está disponível agora), mas ainda tenho o problema no iPad e no iPhone (esse é o meu alvo)
Sobre a solução shaderMaterial, não sei como aplicá-la exatamente no meu código ...
Obrigado por seu apoio

A desativação do FlipY em meus testes também foi necessária para o MacOs Safari 10.

Sim também para o meu (exceto para a versão 9.xx anterior)
Mas preciso usar o player em dispositivos móveis para que essa solução não seja a minha solução :-(

Você precisa da correção FlipY e da inversão do canal de cor no IOS. E apenas para IOS 10. Não é bom no IOS 9. O que deixa muitos dispositivos mais antigos de fora. Porque a Apple os depreciou como meu Ipad 3. IOS 10 suporta reprodução em linha, então seria preferível de qualquer maneira.

Estou tentando consertar isso no iOS agora. Mas estou um pouco confuso com os comentários.

Para vídeos HLS:

• O iOS está fornecendo canais de cores na ordem errada (bgra em vez de rgba). Os valores estão corretos de outra forma.
• O macOS está produzindo uma textura que requer a inversão do eixo X. Isso pode ser contornado usando setPixelStorei (UNPACK_FLIP_Y_WEBGL, true)
• O iOS está produzindo uma textura que requer inversão no eixo X, mas a solução alternativa acima não funciona.

Isso está correto?

A resposta está neste tíquete acima.

Apenas como um aviso para vocês, aparentemente a atualização mais recente do iOS 10.3.3 corrigiu o problema do bgr , o que faria a solução alternativa ... resolver o problema. Não estou usando o three.js, portanto, para qualquer dúvida / triagem, consulte seu próprio teste ou a pergunta do SO.

Como esperado. bastante padrão. Obrigado pelo aviso.

Eles devem fazer a coisa certa e atualizar o tíquete que fiz e deixei aberto e obsoleto. Para atualizar todos os desenvolvedores, se houver uma correção. Eles não têm. Então, tem que verificar se há versões menores agora?

O IOS 11 deveria ter correções de CORS, mas ainda não.

Consegui obter o xcode 9 beta. Ele não vem com o simulador 10.3.3, apenas 10.3.1 e 11. Eu testei no 11 e o rgba invertido ainda é necessário, ao que parece. Eu deveria estar vendo uma tela verde de outra forma ou nenhuma. Terei que executar mais testes desativando a correção.

O simulador IOS11 é um fracasso. Não há simulador 10.3.3 IOS. Aparentemente, o IOS11 tem CORS corrigido.

Agora que o iOS 11 foi divulgado ao público, estou executando alguns testes e não consigo usar a correção neste tópico para iPhone iOS 11 (não tentei iPad ainda).

Posso fazer funcionar (usando CORS hack, FlipY e correções de cores) para iOS 10.3.3 no iPhone e iPad com HLS.
No iPhone iOS 11, tenho uma tela preta com HLS (usando CORS hack, FlipY e correções de cores). Acho que há algo mais para consertar, mas até agora não descobri.

Em relação ao problema CORS, parece ter melhorado no iOS 11, pelo menos para download progressivo de MP4, mas não posso confirmar para HLS por causa do acima.

Se alguém tiver mais sorte, atualize: /

Estou tentando o meu melhor para conseguir um ipad novo para poder até mesmo obter o IOS11.

O emulador não tem as correções, então foi um fracasso.

Terei que confirmar se preciso fazer um counter hack lá. Ou se os canais de cores rgb podem ser alternados de volta.

A renderização em preto para HLS não é um bom começo e apenas a sabotagem usual que levará anos para reverter uma regressão. Isso é o que acontece no IOS9.

O CORS deveria ter sido corrigido no IOS11 e não precisa de um proxy

@danrossi Também estou enfrentando esse problema agora com o iOS 11. Se você encontrar uma solução para esse problema, por favor me avise. O iOS 10 ainda está funcionando bem com a correção CORS e Flip Y, mas o iOS 11 só reproduz áudio.

Ainda preciso obter um novo ipad com IOS11. HLS está trabalhando no simulador beta do IOS11? Pode ser relacionado ao CORS. A mudança de canal rgb exibiria cores invertidas. Então, o preto pode estar relacionado ao CORS?

Eu tentei sem meu proxy CORS e com ele, e ainda tenho o mesmo problema. Eu também tentei sem o Flip Y apenas por causa dele, e ele não muda nada. Apenas som, sem vídeo: /

Ainda existe o mesmo problema no dispositivo ios11, apenas som, nenhum vídeo。 Alguém resolveu este problema？

Consegui trabalhar desenhando o vídeo em uma tela 2D e usando essa tela 2D como uma textura no webgl.

Não consigo obter a textura 2D da tela corretamente no ios11, você poderia postar o código?

Essa é uma ideia muito ruim. O desenho da tela exige muito do processador.

Eu atualizei o tíquete do webkit em relação a este problema. Eles não trataram disso de forma alguma. Eu até forneci meus work arounds com shader completo e código-fonte. Que você afirma que agora não estão funcionando.

Eu sei que outra pessoa está tendo problemas. Mas não posso testá-lo adequadamente ainda antes de comprar um dispositivo novo. O simulador está mostrando isso corretamente. foram encontrados com obsolescência planejada onde até mesmo um Iphone 5 não consegue IOS 11.

aqui está o bilhete novamente. https://bugs.webkit.org/show_bug.cgi?id=163866#c17

@LoveLetterIloveU aqui está meu código de exemplo: https://htmlvideocanvas-sibabi.c9users.io/hello-world.html (aberto SOMENTE no ios)
@danrossi está certo, não é a melhor solução. Basicamente, ele executa a memcopy de matrizes de bytes em vez de vincular o ponteiro. no entanto, ele faz o trabalho enquanto a apple mantém o projeto. Ainda estou avaliando essa abordagem e tenho um método de fallback mp4 pronto para usar também.

Passei dois meses inteiros encontrando aquela solução acima com a ajuda de todos fazendo o ajuste fino do shader, claro, muito obrigado. Significa apenas mais tempo combatendo-os para encontrar outra solução.

Espero que haja um.

Eles não se preocuparam em tentar consertar o problema flipy / HLS / webgl, você pode ver naquele tíquete que fiz.

Afinal, eles apenas consertaram o problema do CORS. Embora eu ainda não tenha certeza se eles conseguiram fazer Dash funcionar.

Apple / webkit é o meu espinho. Isso pode significar que eu tenho que tentar consertar sozinho e não uso c ++. Seria muito engraçado se eu consertasse, mas gostaria de manter meu cabelo.

Alguém pode postar seu código para eu dar uma olhada, apenas para ter certeza de que o FlipY está ativado / desativado.

Veja meu comentário aqui. Eu tive um gutfull absoluto dessa bagunça de sabotagem. Desativar flipY na textura deve mostrar uma imagem, mas de cabeça para baixo. É uma moldura preta aqui. Volte para o começo. Eles causaram uma regressão que era um problema no IOS9.

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

Estou fechando o tíquete do webkit original que nunca foi examinado ou endereçado. E começar um novo logo, pois levará tempo para reunir evidências.

Ele foi além do problema FlipY original. Parece que eles nunca se preocuparam em verificar o funcionamento do HLS com WebGL antes de lançar o sistema operacional.

Fechei o tíquete do webkit original para iniciar um novo, especificamente as texturas de vídeo HLS com webgl, que está completamente corrompido e sem solução possível ainda. A solução alternativa FlipY original não é mais relevante.

Descobri que todos os testes de conformidade do webkit webgl usam Mp4.

Eles nunca se preocuparam em testar o formato de streaming da própria Apple. Daí porque ele foi quebrado e ainda está quebrado com uma nova atualização do IOS 11.

Veja aqui para mais

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

@danrossi Você tem um link para o ingresso recém-aberto do webkit? Acabei de me deparar com esse problema no iOS11 e estou ansioso para acompanhar todos os desenvolvimentos.

Estou autofinanciando seu trabalho para eles. Estou executando testes de conformidade com HLS gerado a partir dos arquivos mp4 de teste Khronos. Ele afirma que passou, mas o teste falha em provar se está exibindo alguma coisa. A tela nem mesmo é exibida aqui. Na verdade, eu nem acho que o teste funciona corretamente no IOS. Não há registros.

Tenho que usar seus próprios arquivos de teste para provar que as texturas HLS não funcionam. Eu construí outros arquivos de teste e farei o upload para fazer o tíquete.

Espero que haja algum parâmetro webgl necessário ou outro que precise ser desativado como da última vez.

Ok, pelo que vejo com os arquivos de teste do webkit. Eles não são projetados para testes de IOS. Nenhuma funcionalidade de clique do usuário para jogar. Por algum motivo, o MP4 pode reproduzir automaticamente o que descobri no IOS 11, embora nenhum atributo seja especificado, mas o HLS ainda não pode.

Não acredito que nenhum teste seja feito especificamente para IOS e, definitivamente, nenhum teste é feito para HLS.

Daí os problemas. Está além de ruim.

Tenho o que preciso para enviar o tíquete.

Tão longe quanto eu consigo ver. Os testes do webgl webkit são falhos. Eles não se importam com a saída do canvas do webgl. Eles estão desenhando o vídeo em uma tela como uma saída de visualização em um tamanho muito pequeno.

Eles têm a tela webgl, mas seu tamanho é muito pequeno, então você nem verá se está renderizando ou não.

Tive que modificar os testes para HLS e eles não passam. E agora eu aumentei o tamanho da tela do webgl, ela é preta.

Depois de modificar o código para adicionar o usuário, clique nos testes realmente começarem a ser executados no IOS.

Pelo que eu posso ver, nenhum teste foi feito para HLS e os testes são falhos. E assim sabotou absolutamente a todos.

Aqui está. Estou realmente perdendo minha paciência com a Apple e quanto trabalho pessoal é necessário para consertar seus problemas e executar testes para eles.

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

Dois dias e nenhuma urgência para olhar. Suspeito que isso nunca será abordado. Demorou anos e várias versões de IOS e upgrades de dispositivo para que o CORS fosse corrigido?

Vou tentar brincar com sinalizadores webgl e código de shader para ver se algo pode ser feito.

As pessoas podem ir lá e causar algum barulho. Como ainda não foi nem olhado. Como se eles realmente não se importassem em testar o HLS em seus próprios navegadores.

@jernoble você poderia apontar quem poderia nos ajudar na equipe do webkit sobre esse problema? Seria muito grato se alguém pudesse dar uma olhada ou nos dar uma atualização. O problema aqui no GitHub é bastante longo, mas foi resumido aqui: https://bugs.webkit.org/show_bug.cgi?id=179417. Desde já, obrigado.

Olá, @radiantmediaplayer. Tanto @grorg quanto eu somos as pessoas certas para

Ei pessoal. Estou postando um exemplo de solução alternativa para o iOS 11 usando a tela temporária, conforme descrito por @sorob . Você pode vê-lo funcionando em http://redgetan.cc/demo/ios_11_hls_webgl_canvas_workaround/index.html . Não estou familiarizado com Three.js, então é simplesmente javascript.

CanvasRenderer. isso é renderização de software. Não é digno de produção.

Estou com @danrossi neste. Deixando de lado as questões de desempenho, manter 2 soluções diferentes completas para exibir conteúdo HLS seria impraticável. Precisamos chegar ao fundo do problema do webkit iOS. O novo tíquete do webkit está mostrando atividade, o que é um sinal positivo. Esperançosamente, podemos chegar a algo, mesmo que isso signifique esperar pelo iOS 11. *.

@danrossi Acabei de notar que este problema está encerrado. Você poderia reabri-lo?

O novo problema está aqui. Não está relacionado ao Three.JS, então mantido em um arquivo, eu acho.

O nível de testes exigidos era insano. Quebrou minhas costas como encontrar o IOS10 ao redor. dê uma olhada lá.

Nada funciona em torno disso até agora. Alguém finalmente está dando uma olhada e não está sob nosso controle. Algo a ver com uma referência compartilhada ao contexto para a textura, visto que HLS é diferente de Mp4, o que pode corrigi-lo. Pelo que eu percebi, eles realmente precisam de tempo para fazer isso. Não tenho meios de configurar um ambiente de construção como estou no Windows.

Mas olhar para o código do webkit explica porque o IOS10 teve problemas de cor estranhos com HLS. Ele não usa código de espaço de cores. Daí o código para contornar ambos os problemas lá para IOS10 / Safari.

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

Olá. Parece que eu mesmo tenho que reverter e implementar um renderizador de tela para suporte de textura de vídeo do IE11. Não funciona com WebGL. Alguém estava perguntando sobre isso.

Eu calculo que ao ritmo que está levando para ser examinado, pode levar cerca de 2 anos para consertar.

IOS 11 terá que sofrer com a renderização de software, eu acho, para HLS. No lixo, toda a coisa do IOS é para VR. Vou implementar isso sozinho.

@redgetan , alguma ideia de como implementar com three.js? Tentei usar o CanvasRenderer e obtenho um quadro de malha visível sobre a textura e não renderiza uma esferegeometria corretamente.

A demonstração do canvas três mostra apenas o vídeo 2D sendo renderizado.

Desculpe, você está usando uma renderização webgl, mas usando uma tela como fonte da imagem de textura. Ver se consigo replicar isso. Ele não renderiza e gira corretamente para mim ao usar a tela como a textura.

ok por algum motivo eu tive que fazer isso.

Use o renderizador webgl normalmente. Mas para a textura da tela e o desenho do vídeo, tive que definir as dimensões

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

Ele está sendo renderizado corretamente agora. Executará testes no IOS 11.

@danrossi nos

Sem problemas. Eu adicionarei um teste básico com uma visualização de estatísticas fps online em breve se parecer funcionar. Pode precisar de qualquer coisa agora.

Existe uma maneira de verificar o desempenho do processador no IOS?

Eu fiz um teste de textura da tela. Está funcionando, mas um vídeo de resolução maior pode fazer com que ele caia.

Este HLS é de baixa qualidade, então se mantém em 40 fps. Um mp4 de resolução maior, mas também de baixa qualidade, ficou em 30fps.

Um arquivo de resolução de produção pode obter 10 fps com isso. Isso é para um novo Ipad.

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

Esse problema tem a ver com o problema que estou enfrentando nesta página agora: https://digitalejulegaver.firebaseapp.com/#catarina

Abra-o no navegador Safari em um mac ou dispositivo macOS. Um ipad ou iphone não consegue lidar com esta página, mesmo que esteja em um navegador Chrome ou Mozilla.

Recebo uma página preta, mas no Chrome normal no Mac, funciona

@vongohren Você precisa usar as soluções alternativas FlipY que descobri para HLS com o macOS Safari e o shader que trabalhamos neste tíquete.

No entanto, acabei de voltar aos meus tíquetes do webkit e eles alegaram que corrigiram o problema do FlipY para o 10.13. Acredito que seja High Sierra. Não há chance de testar isso para mim, pois estou usando um macOS baseado em nuvem.

Isso vai exigir mais uma verificação de versão da plataforma para não exigir soluções alternativas FlipY para 10.13. portanto, qualquer coisa abaixo da versão 13 exigirá isso. Tenho cerca de 4 verificações de plataforma e versão de navegador diferentes para macOS e IOS para solucionar vários bugs. A verificação do IOS 11 é ativar a renderização de textura de software!

Se você puder marcar 10.13, isso pode ser útil.

Aqui estão os detalhes de todos os meus ingressos.

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 tem 10.13, mas você tem um demo que pode ser testado?

A versão three.js que estou usando agora é nova para essas correções, então não tenho certeza de onde aplicá-las.
Encontrei algo chamado data.flipY e configurei como false. Mas não fez nada pelo meu aplicativo.

Estou usando three.js por meio desta biblioteca: https://github.com/iberezansky/flip-book-jquery

Problema no CORS?

Isto funciona ?

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

ou isto

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

Minhas listas enormes de arquivos de teste estão nesses tickets.

FlipY pode ser desabilitado na textura

texture.flipY = false;

Tudo é local, então não vejo por que os cors devem ser efetuados. Mas esses dois links só mostram preto no Safari e Chrome, no Mac 10.13

E o recurso flipY não fez muito, ao invés de apenas virar o quadro. Mas ainda estava preto

Parece que o 10.13 sofre do mesmo problema que o IOS 11, onde a solução alternativa FlipY está quebrada. Esta é uma boa informação. e ainda outro bug para relatar. É tão bagunçado que está me deixando louco. Vou atualizar isso no tíquete do IOS. na versão 10.12, o bug FlipY precisa ser contornado e criado um tíquete separado para ele.

Assim como no meu recurso de RV agora. Você deve fazer uma verificação de versão da plataforma para IOS 11 e 10.13 e fornecer um modo de textura de tela de renderização de software para hls.

aqui estão alguns utilitários estáticos que estou usando para verificações de recursos, especialmente suporte cors ou fontes proxy cors. Obviamente, agora eu tenho que verificar a versão superior a 13 para ativar temporariamente a renderização de software como o 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;
    }

Você fez um ótimo trabalho nisso, espero que os ingressos sejam resolvidos: D

Aqui está a solução para a textura da tela. Tive que ativá-lo para o IOS 11. Talvez seja necessário fazer a verificação da versão do macOS 13 e ativá-lo para isso também. se você considerar que a alternativa flipY está quebrada para 10,13? Eu tenho que relatar para eles.

Cara, você não tem ideia, eu não consigo nenhum benefício com isso, autofinanciado, além de fazer o software de todos, incluindo meu próprio recurso, mal funcionar no Apple OS haha.

Aqui está minha integração completa agora, tem o trabalho, incluindo as correções da apple e soluções alternativas. Agora tenho suporte para vídeo de mapa de cubo.

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

Isso tem acontecido desde que eu relatei pela primeira vez, há alguns anos, que estava sentado lá sem fazer nada!

Isso funciona para você?

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

Quando você diz que aqui está a textura da tela, para onde você aponta?

Esse flowplayer parece lindo! Ele viu muito uso?

O que devo ver neste link: http://dev.electroteque.org/webgl/three-canvas.html?
Quando eu o abro no Chrome - versão 63.0.3239.84 (versão oficial) (64 bits) - no macOS 10.13.1:
Vejo um fundo preto com um medidor de FPS no canto esquerdo e um botão dizendo ativar AR na parte inferior do meio
Quando clico nisso, obtenho uma tela dividida, com uma roda de configurações e um botão Voltar. Mas a tela em si é apenas preta.

Quando eu o abro no Safari versão 11.0.1 (13604.3.5) no macOS 10.13.1:
Eu vejo o vídeo de vôo com um medidor de FPS no canto esquerdo e um botão dizendo ativar AR na parte inferior do meio. Também posso rolar para ter uma experiência 360 completa.
Quando clico no botão VR, obtenho uma tela dividida, com uma roda de configurações e um botão Voltar. E a tela de vídeo, mas não consigo rolar, acho que é para o giroscópio controlar.

Mas se eu apertar o botão Voltar no modo VR, o vídeo fica travado no modo VR, e eu não consigo mais rolar, e ele fica travado na visualização em que o modo VR foi iniciado.

Essa demonstração é para renderização HLS no Safari. Se você acha que a demonstração do flipY fix não funciona no Safari

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

então tem que usar texturas de tela com 10.13 e IOS 11 Safari?

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

Deixe-me saber entre os dois. Eu não me importo com os controles de rotação, apenas que ele renderiza e não um quadro preto.

É importante sobre o 10.13, pois eu o adicionei ao tíquete do webkit IOS 11 referenciado aqui agora. Supondo que seja uma "regressão" que quebrou completamente a renderização HLS.

@danrossi funciona no safari, maior qualidade com a versão hls. Ambos são a direção certa, se você está se perguntando.

Mas nenhum funcionou em cromo.

OK. ótimo, preciso desfazer meu relatório.

Então esse ainda é um problema correto?

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

Se for esse o caso, use a solução alternativa FlipY como padrão para o macOS.

A demonstração HLS nesta página deve funcionar para ambos os navegadores. Ele usará o streaming de mediasource para cromo com o plugin hls. Ele também tem as soluções alternativas FlipY para macOS.

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

Você está certo
http://dev.electroteque.org/webgl/three-hls.html
Isso não funciona para Chrome ou Safari

O link flowplayer, funciona para ambos os navegadores

Obrigado campeão. Eu tinha informações suficientes para atualizar os tíquetes novamente. O problema do macOS Safari é diferente do IOS 11.

Você precisa usar o exemplo de textura de tela para IOS 11.

E para o macOS Safari, desative o FlipY na textura e inverta a posição Y no shader para girá-lo da maneira certa. Você precisa fazer a inversão do canal de cor no sombreador de fragmento para IOS 10 HLS também. O código do shader está acima.

Fiquei feliz por cerca de 1h esta manhã quando consegui quebrar o caso do iOS 11 com a solução acima ( @danrossi, me

Este é o resultado que obtenho em um iPhone 6 Plus com iOS 11.2.1, a animação na verdade é bem suave, mas é simplesmente feia, pixelizada, com alias ...

O comportamento esperado é o seguinte (Nexus 5X com Android 8 e o Chrome mais recente - isso não usa a solução alternativa acima).

Nosso caso de uso é um player HTML5 360 e em ambas as amostras acima do vídeo é o mesmo feed de taxa de bits única HLS http://www.rmp-streaming.com : 1935 / vod / sea360.mp4 / playlist.m3u8

Se eu aplicar a solução alternativa (veja meu código abaixo) ao Android, obtenho a mesma renderização feia. É o que devo obter com esta nova solução alternativa ou estou faltando alguma coisa?
Tentei brincar com algumas das configurações, mas não estou vendo nenhuma melhora notável.

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

Eu estou fazendo isto. Estou bastante certo de que isso deve dimensioná-lo corretamente.

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

Então eu acertei depois de cutucar um pouco. Parece que em nossa configuração a tela off-dom deve ter o tamanho exato da renderização HLS atual sendo reproduzida para renderizar corretamente (portanto, para ABR, ela precisa ser atualizada cada vez que a renderização muda). Nossos testes mostram que isso funciona bem para iOS 11 (ok é melhor do que nada). Deixar isso aqui se ajudar outra pessoa.

Sim, portanto, faço isso no evento loadata para obter a largura do vídeo. Eu descobri isso antes e teve o mesmo problema.

No entanto, para HLS nativo, não há evento quando a taxa de bits muda? Estou apenas sentado uma vez pessoalmente. A quantidade de soluções alternativas para a Apple já é incrível o suficiente.

Não há nenhum evento, que eu saiba, fornecido pelo Safari que possa ser usado para detectar uma alteração na renderização para ABR HLS. Acabamos de atualizar a largura e a altura da tela off-dom com video.videoWidth e video.videoHeight em cada AnimationFrame (o que provavelmente não é ideal do ponto de vista do desempenho, mas neste estágio está funcionando e vamos nos contentar com isso até outro opção torna-se disponível). Nossos testes mostram que video.videoWidth e video.videoHeight devem ser atualizados de acordo quando uma nova renderização é exibida.

Sim, vale a pena, é hacky o suficiente. Portanto, fazer isso é excessivo, especialmente se houver instruções de condição em um retorno de chamada de quadro. O que quer que funcione por enquanto, eu acho.

Eles ainda não podem fornecer um evento de alteração de renderização. Acredito que haja uma especificação para um, mas nunca foi implementado.

O proxy CORS para contornar bugs antigos do Safari, o HLS flipy corrige e agora isso é o suficiente.

Ainda bem que tudo está funcionando. Eu não vi nenhuma atualização ainda em meus ingressos por um bom mês ou mais agora.

Não me lembro de ter visto algo nas especificações de vídeo HTML5 sobre um evento de troca de qualidade. Existe a especificação HLS mantida pela Apple, mas ela não descreve o que deve ser feito pelo cliente quando ocorre uma troca de qualidade. Libs como hls.js têm isso implementado, mas não está disponível para HLS para vídeo HTML5 nativo no Safari.

Acabei de perceber que poderia "polyfill" nosso hack para detectar alterações na renderização, consultando video.videoWidth em intervalos fixos e, quando uma alteração for detectada, chame o retorno de chamada de redimensionamento. Isso será menos oneroso. Provavelmente irei implementar isso em um estágio posterior em nosso player.

@radiantmediaplayer Você deve ser capaz de usar o evento "resize" para detectar alterações nas propriedades .videoWidth e .videoHeight subjacentes.

Olá pessoal, veja meu comentário aqui. Está funcionando.

Que provação era fazer testes e seguir em frente. Apenas para não obter feedback ou resposta adequada. Estou seriamente pronto! Chega de regressões, por favor !!

Instale o OSX 11.3 beta e ele funcionará. O OSX 11 anterior precisa de renderização de software, o OSX 10 precisa do flipY e da correção de cor. Uma complicada bagunça de compatibilidade e detecção de versão de plataforma necessária.

O Safari macOS ainda tem o problema FlipY e também não obtive resposta, está em um tíquete separado. De qualquer forma, não consigo testar o HLS corretamente até tentar instalar o macOS na estação de trabalho do meu PC. O HLS está impedido de ser reproduzido no VMware.

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

As soluções alternativas FlipY também não são necessárias para o OSX 11.3, mas acho que já mencionei isso.

Aqui está minha verificação completa de compatibilidade com IOS e Safari agora, começando com CORS.

A mente confunde. Este é uma loucura. Eu até tive que fazer uma prova futura e incluir algo além do IOS 12.

Está trabalhando na integração! Ainda não é possível verificar o que está acontecendo com o 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;
          }

        }
    }

Correção um último ponto importante. A implementação de renderização IOS HLS está sendo executada com poucos recursos e muito sensível. A renderização deve começar após o carregamento de dados.

Assim que ocorre um erro teximage2d, nenhuma outra renderização acontece, apenas a renderização em preto, vai parecer que a correção nunca aconteceu.

Se a renderização começar assim que houver dados de vídeo, está tudo bem. Não era um problema antes do 11.3.

Parece que o vídeo está funcionando novamente (sem correção temporária da tela). Verificado para a última versão ios 11.3 (testado no iphone 6s, 7).

Sim, acho que atualizei em 15 de fevereiro. Trabalhando novamente em 11.3. Nunca recebi uma atualização. Eu tive que verificar especificamente e estava funcionando!

Corrigimos muitos problemas com vídeo -> textura no iOS 11.3 (e a versão equivalente do macOS). Desculpe se não fechamos / atualizamos os bugs.

Informe se você ainda está tendo problemas. Acredito que streams diretos (por exemplo, mp4) e HTTP Live Streams devem funcionar, e flipy deve ser refletido com precisão.

Tudo é feito a partir de fevereiro, quando relatado. Mas eu relatei originalmente no ano passado em algum momento. Eu atualizei aleatoriamente o IOS beta para 11.3 e ele começou a funcionar. O código de verificação de compatibilidade acima é necessário para lidar com soluções alternativas de várias plataformas.

O IOS 10 requer a correção flipY. IOS 11.0 - 11.2 requer soluções alternativas de renderização de software. 11.3> pode renderizar normalmente.

Alguém pode compartilhar uma amostra de trabalho para isso, um jsfiddle ou algo assim? Eu ainda podia ver uma tela preta no IOS 11 Safari. Consegui ouvir o áudio, mas não há vídeo para streaming HLS

@dhanishapa Qual é a sua versão do iOS? É 11.3+?

Há pouco tempo (~ maio de 2018), eu também estava tendo os seguintes problemas com HLS (? <= 11.2):

• Segmentos de vídeo às vezes se repetem durante a reprodução
• Os vídeos às vezes pausam e exibem uma tela preta
• Buffers de vídeos, mas o áudio continua

Depois de entrar em contato com o Vimeo (estou usando o serviço HLS deles), eles puderam entrar em contato com a equipe de desenvolvimento da Apple e trabalhar juntos em uma correção.

Acabamos de receber a palavra da equipe de desenvolvimento da Apple de que uma nova versão do iOS (11.3.1) foi lançada, que inclui uma correção para os problemas de reprodução que você relatou. A correção deve evitar que os vídeos parem em uma tela preta, repetindo segmentos de vídeo ou sejam pegos em um estado de carregamento sem fim.

Percebi que quando forneci MP4 codificado em H264 como fonte durante o upload, os problemas de reprodução foram embora nas versões do iOS inferiores a 11.3.1. Tive problemas ao usar o Quicktime como formato de entrada durante o upload.

Eu localizei algumas diferenças entre os manifestos gerados por cada arquivo de vídeo (os codecs de vídeo são "avc1.64001E, mp4a.40.2" para o que está funcionando e "hvc1.2.4.L63.90, mp4a.40.2" para o que não funciona )

Talvez esta informação seja útil para qualquer pessoa.

Oi
Estou tendo problemas com o streaming de HLS no IOS Safari.
Estou usando o cors proxy. Tentei usar o player hls nativo e o player html5 e até tentei jogar o link m3u8 diretamente no IOS, mas não funciona, enquanto funciona no safari (desktop - mac), chrome, firefox, mas não no IOS (iphone)

cors foi corrigido no IOS 11.0. A outra grande correção que descobri está no 11.3. 11.3 deve ser lançado agora. O proxy é necessário apenas para IOS 10 e 9.

Está funcionando para mim 🙆🏽‍♂️

Aqui está uma demonstração do vídeo 360 por playhouse-vr ).

Testado em macOS v10.13.4 + Safari v11.1 e iOS 11.4.1 + Safari

Estou vendo um NOVO problema de tela preta agora no iOS 14.0 Safari e no iPadOS 14.0 Safari. O mesmo player funciona com iOS 13.7 Safari e iPadOS 13.7 Safari. Tentei atualizar para three.js r120 (de r116), mas sem sucesso. macOS Safari 14 está ok. Alguém está vendo a mesma coisa? Alguma dica de qual é a próxima etapa para oferecer suporte ao iOS 14?

Sim, verifique https://bugs.webkit.org/show_bug.cgi?id=215908 e https://bugs.webkit.org/show_bug.cgi?id=216250 para regressões iOS 14. Espero que ambos possam ser resolvidos rapidamente, pois muitos sites provavelmente serão afetados.

É uma batalha sem fim com o Safari. Espero reclamações novamente para meus próprios recursos do 360. Leva meses para consertá-los. Eu encontrei o trabalho original acima. Então é hora de encontrar mais soluções alternativas !! O Webkit não testa HLS, eles não têm testes de HLS para WebGL. Eu mesmo tive que fazer alguns.

Removi todas as soluções alternativas inchadas para diferentes IOS em meu recurso. Mas um deles teve que usar a renderização do software canvas para 11.0 ... Eu ainda tenho que fazer as verificações da plataforma. Com o IOS 13, eles quebraram as verificações de plataforma agora. Tive que consertar isso no projeto de papelão. Descobri que o HLS não renderiza imediatamente e demora um pouco no IOS 13, mas preciso revisar como resolvi esse problema.

Eles simplesmente não se importam. Nenhuma API WebXR, nenhuma API Wakelock como o Android acabou de implementar.

de acordo com o meu trabalho ao redor, eu tenho que reconfigurar na mudança de rendição. E desative o zoom no controle de órbita. Isso interrompe a renderização de preto no IOS 13. IOS 14 tem que verificar.

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

Eu testei 14,2. HLS OK. A correção acima vai resolver ...