Three.js: Safari/IOS의 HLS가 이제 작동하지 않음

프레임을 떨어뜨리기는 하지만 캔버스 렌더러로 캔버스에 그리고 렌더링합니다. webgl에 필요한 것이 있습니다.

이것은 아름다움입니다. 프록시된 HLS 스트림으로 kpano 데모를 약간 수정했습니다.

현재 Safari OSX에서는 작동하지만 IOS 9에서는 작동하지 않습니다. 차이점이 무엇인지 아십니까? 나는 슬프게도 webgl 플래그나 그들이 하는 일에 대한 전문가가 아닙니다. IOS9에서는 여전히 검은색 프레임입니다.

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

이 마지막 링크는 검은색 사각형/사파리 9.1.3/mac os x 10.11.6에서만 사운드입니다.

HLS는 무엇입니까?

@makc 정말? 저는 OSX 10.10과 Safari 10을 사용하고 있습니다. Apple의 최근 방해 행위 변경 사항을 설명합니다. Safari 10. 우리가 Safari 10이라면 우리는 모두 좋습니다.

@mrdoob HLS = 애플 스트리밍. 즉, 라이브 스트림뿐 아니라 VOD도 가능합니다. 라이브 스트리밍은 Terradeck 장비와 함께 표준이 될 것입니다. 예: http://dev.electroteque.org/video/360/hls/ultra_light_flight.m3u8

차이점은 무엇입니까? 첫 번째 예에서 몇 가지를 변경해 보았습니다. 두 번째 예는 원시 webgl 함수입니다.

그래서 texImage2D는 HLS를 부분적으로 렌더링하지만 IOS에서는 아직 렌더링하지 않습니다. 아마도 Safari 10이 아니기 때문일까요?

몇 가지 웹킷 버그 티켓에 대해 보고한 것을 용서해 주십시오.

그들은 가서 IOS 업데이트에서 CORS 프록시 해킹을 방해했습니다. macOS는 Safari에서도 CORS 문제를 해결하지 않은 것으로 보고되었습니다.

나는 이제 그들의 방해 공작을 피하는 방법을 알아내야 합니다. IOS에서 작동하는 HLS를 추가로 테스트하려면 해당 작업을 수행해야 합니다. 애플이 진심으로 불을 끄느라 땀 흘리게 하네 ㅋㅋㅋㅋ

내가 OSX 렌더링을 얻을 수 있다면 그것이 시작이 될 것입니다. three.js에서 무엇이 다른지 알아내야만 합니까?

나는 여전히 무엇이 다른지 비교하기 위해 축소 방법을 시도하고 있습니다. 그 사실을 알게 되면 IOS도 작동할 수 있습니다.

아마도 three.js 내의 추가 셰이더 프로그램이 렌더링 문제를 일으키는 것일까요? 나는 그것을 가로 지르지 않지만 원시 webgl 예제에서 three.js가 해당 equirectangular 예제에서 수행하는 작업을 복제하려고합니다. 이에 대한 예제 셰이더 코드가 있습니까?

여기에서 three.js가 하는 일을 완전히 복제할 수 있는 원시 함수를 찾았습니다. 일부 변수는 세계 위치와 같이 외부적으로 설정되어 있기 때문에 셰이더 프로그램을 직접 복사할 수 없습니다.

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

방금 이 문제 또는 관련 문제를 겪었을 수 있습니다. S3 버킷에 h264 mp4 파일이 있고 blob으로 video.src에 로드하고 있습니다.

Amazon 웹 기반 업로더를 사용하여 S3 버킷에 업로드하면 Mobile Safari(iOS 10.0.1)에서 직접 로드할 때 동영상이 제대로 재생되지만 three.js 뷰어를 사용하여 동영상을 재생하려고 하면 검은 화면. 그러나 Cyberduck으로 S3 버킷에 업로드하면 Mobile Safari와 three.js에서 직접 제대로 재생됩니다.

Cyberduck이 메타 데이터 'Content-Type=video/mp4'를 설정하고 AWS 업로더가 'Content-Type=application/octet-stream'인 것 같습니다. 이 메타 데이터를 비디오/mp4로 수동으로 설정하면 모든 것이 올바르게 작동합니다.

이상한 문제, 그리고 나에게 많은 머리를 긁적 거리는 문제를 일으켰습니다. 이것이 이 티켓과 같은 근본적인 문제인지 아니면 새로 만들어야 하는지 알려주십시오.

감사 해요,
더스틴

이것은 mp4가 아닌 mpegts 조각 또는 조각난 파일에서와 같이 HLS 메이트를 위한 것입니다. Mp4는 Safari와 IOS 모두에서 괜찮습니다. 나는 Cyberduck에서 MIME 유형을 확인했고 mpegts가 정확하다고 말합니다.

물론 IOS가 아닌 원시 webgl 예제에서 동일한 스트림이 작동합니다. 귀하의 문제는 검은 색 프레임과 마찬가지로 나와 비슷합니다. 렌더링이 전혀 되지 않습니다.

@danrossi ok 멋져요. 내 문제에 대해 특별히 새 티켓을 생성하겠습니다. 감사 해요.

이것이 문제라고 생각합니다: www.krpano.com/ios/bugs/ios10-webgl-video-texture-crash/
현재 three.js에 대해 동일한 해결 방법을 구현하려고 시도하고 있지만 그다지 멀리 가지 못하고 있습니다.

@페이즈원. OSX와 IOS의 문제로 사파리 문제입니다. Mp4는 IOS 및 OSX에서 잘 작동합니다. 앤티앨리어싱을 수정하겠습니다.

여전히 둘 사이의 차이점을 알아낼 수 없습니다. 원시 webgl 예제는 여전히 IOS에서 작동하지 않지만 OSX에서 작동하게 하는 것은 시작입니다.

들를 수 ​​있는 작동하는 정방형 셰이더 프로그램을 찾을 수 있는지 궁금합니다.

추가 정보: http://stackoverflow.com/questions/39123109/rendering-a-video-with-webgl-in-ios-10-beta-7-safari-shows-weird-purpish-co.

이것이 브라우저 버그라는 것을 알고 있지만 이러한 WebGL 버그를 수정하는 데 걸리는 시간을 감안할 때 해결 방법을 구현해야 할 수도 있습니다.

캔버스를 통해 텍스처를 사용하는 경우 사파리에서 영상이 표시되었습니다.
그러나 iOS에는 여전히 CORS 문제가 있기 때문에 Same Origin에서만 작동했습니다.
https://bugs.webkit.org/show_bug.cgi?id=135379

webgl은 잘 모르지만 다음을 참고해 주세요.
https://github.com/NishimuraT/videojs-panorama/commit/bd99200d8831c7ad0d10d742e087953da0f44169

@NishimuraT canavasrender를 사용한다는 것이 무슨 말인지 알 것 같습니다. 나는 그것을 줄이는 방법을 시도했다.

나는 그것이 효과가 있다고 생각하지만 CPU로 인해 심각한 드롭 프레임 및 재생 성능 문제를 일으킵니다. 분명히 IOS에서 더 나쁩니다. Ipad 3는 이미 webgl용 프레임을 삭제합니다.

@danrossi 제가 조금 오해를

raw webgl과 shader를 사용하는 elevr 프로젝트에서도 동일한 문제를 확인했습니다. 내 방법을 다시 작동하려면 그 하나를 해킹해야합니다. 거기에 무언가가 렌더링 문제를 일으키고 three.js에 동일하게 영향을 미칩니다.

나는 elevr에서 그것이 깨지는 원인이 되는 텍스처를 바인딩하는 자동 지우기임을 확인했습니다.

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

이것이 주석 처리되면 작동하는 것입니다.

이것은 또한 문제를 일으켰습니다. 무엇을 위한 것인지 잘 모르겠습니다.

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

three.js에서 같은 일을 하는 auto clear 속성이 있을까요?

에 대한 많은 언급을 봅니다.

state.bindTexture(_gl.TEXTURE_2D, null);

그러나 그것이 어디에 있을지 모릅니다. 그렇게 해야 합니까?

코드가 너무 미쳐서 텍스처 드로잉 문제를 일으키는 원인을 추적할 수 없습니다. 이 질감 바인딩에 뭔가가 있는 것 같습니다.

@danrossi 제대로 렌더링하는 페이지가 있습니까?

노이즈 메이트에게 죄송합니다. AB 테스트를 더 많이 했습니다. elevr 데모에도 주석을 달아야 했기 때문에 실제로 제가 언급한 것 같습니다.

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

이것이 문제의 원인입니다. 그러나 그것이 없으면 질감이 거꾸로됩니다. 이제 작동하는지 보여주기 위해 다른 테스트를 추가하겠습니다.

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

내가 찾은 또 다른 원시 예제는 FLIP_Y를 주석 처리했습니다. 지금 가능한 Webkit 버그?

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

flipY에 대한 유일한 참조는 이것이지만 webkit nightly는 여전히 문제입니다.

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

하드웨어 가속이 중단된다고 가정하는 flipY를 비활성화하면 작동합니까?

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

지금 웹킷 버그인지 확인하려고 합니다. 지금은 텍스처를 회전하여 이를 해결하는 것이 어떻게 가능한가요?

지금은 텍스처를 회전하여 이를 해결하는 것이 어떻게 가능한가요?

지오메트리 uv를 뒤집거나 셰이더에서 수행하지 않는 이유는 무엇입니까?

@makc 어떻게

더 나아가 헤드를 하기 위해서입니다. 이 FlipY "수정"은 IOS 9에서 도움이 되지 않고 방금 테스트했습니다.

지금 다른 문제가 있습니다. 이것을 추적하는 데 며칠이 걸렸습니다.

겉보기에는 Three.JS가 아니라 모든 웹킷의 문제일 수 있습니다. 평소와 같이 이것에 대해 너무 죄송합니다.

저도 거기에 신고했어요 https://bugs.webkit.org/show_bug.cgi?id=163866

나는 그것에 대해 어떻게 해야할지 모르겠다.

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

@makc 가 uv를 뒤집는 것을 확인하는 것이 도움이 됩니다. 이것으로 어떻게 반전합니까?

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

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

IOS에서는 여전히 문제가 분명합니다.

@makc. 이 셰이더 프로그램이 반전을 수행하고 있을 가능성이 매우 높습니다. 이것은 데모 소스 중 하나에 있었습니다.

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

FlipY 플래그를 사용하지 않기 때문에 작동하는 것처럼 보였던 원래 데모에서 발견되었으며 셰이더 프로그램에서 수행하는 것으로 보입니다.

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

이것을 three.js에 통합하는 방법을 모르십니까? 셰이더 프로그램을 사용하는 것이 더 낫습니까?

나는 지금도 IOS를 디버깅하고 있다.

흥미롭네요. 이 계산을 이 예제에 복제하려고 하면 뒤집는 것처럼 보이지만 여전히 심하게 확장됩니다.

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

따라서 gl_Position은 위치를 제어합니다.

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

셰이더 프로그램을 사용하는 것이 더 낫습니까?

셰이더 프로그램은 프레임마다 한 번씩 실행되지만 전체가 시작되기 직전에 지오메트리에서 UV를 뒤집습니다.

@makc는 아마도 처음에 값을 설정하는 것이 가장 좋습니다. 내가 맞다면 이 uv 값은 셰이더 프로그램의 변수이며 계산에 사용됩니까?

소스에서 gl_Position에 대한 몇 가지 참조를 봅니다. 이게 맞는지는 모르겠으나 이런것도 있다

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

감사 해요.

IOS Safari에서 webgl을 사용하여 모든 종류의 트릭을 시도하여 렌더링할 프레임을 얻을 수 있는지 확인했으며 현재로서는 검은색입니다. MP4는 괜찮습니다.

이에 대한 리소스가 많지 않습니다. 내 발견 사람들도 찾고 있다고 생각합니다. 그것은 라이브 스트리밍 btw 용이지만 VOD도 있습니다.

누군가에게 몇 가지를 테스트하게 했습니다. 그들은 FLIPY 수정 사항이 포함된 이 원시 webgl 예제가 IOS 10에서 작동한다고 생각하지만 three.js 버전은 실제로 충돌하지 않습니다.

나는 그것이 텍스처를 뭉툭하게 만드는 NEAREST 필터를 사용한다는 것을 알아차렸고, 그것을 복제하려고 시도했지만 그들에 대해 동일한 문제가 있었습니다.

그래서 이들 중 어느 것도 작동하지 않습니다

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

그러나 이것은 나를 위한 IOS 9가 아니지만

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

매우 무겁고 고통스러운 테스트 후에 데모와 문제를 미세 조정했습니다.

FlipY 해결 방법은 OSX 10.11 및 macOS, IOS 9 및 10 모두에서 HLS에 필요합니다. 원시 webgl 예제는 셰이더 프로그램에서 수행하기 때문에 FlipY를 사용하지 않습니다. three.js를 사용하면 지오메트리를 뒤집어야 합니다.

IOS 10의 HLS 렌더링이 표시되지만 심각한 색상 아티팩트 문제가 있습니다. 프레임이 작동을 멈췄지만 에뮬레이터와 프레임이 떨어지는 문제라고 생각합니다. 이제 IOS 10으로 업데이트할 수 있는 장치가 없습니다. IOS 9에는 전혀 표시되지 않습니다. 둘 다 mp4 및 HLS용 CORS 프록시가 필요합니다.

에뮬레이터가 아님을 확인한 후 IOS 10에서 HLS의 연색성 문제와 관련하여 이제 다른 티켓을 제공해야 할 수도 있습니다.

아무도 Safari를 지원하지 않으려는 것은 당연하지만 사람들은 Safari가 작동해야 합니다.

여기에 다른 rgb 형식 설정을 제공해야 했습니다. 기본값은 수직 coiourbars를 생성하고 rgba는 색상이 올바르지 않습니다. 그러나 에뮬레이터에서. 내 Ipad 장치가 지원되지 않기 때문에 이제 IOS 10을 제대로 테스트할 수 없습니다. 확인을 위해 IOS 10이 설치된 Iphone을 가져오려고 합니다.

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

이 두 가지 예에 집중하십시오. RGB 플래그는 실제 장치에서 차이가 없으며 시뮬레이터는 잘못된 출력을 생성하지만 RGBA 형식을 사용할 때 유사한 출력을 생성합니다.

FlipY 해결 방법은 HLS가 있는 IOS 9/10/OSX Safari에 필요합니다.

Webkit flakey 버그가 three.js 문제인지 확실하지 않지만 이제 두 번째 티켓이 필요한 HLS webGL 렌더링으로 색상 문제를 복제할 수 있었습니다.

너무 많은 엄청난 결함과 버그로 인해 쇼 스토퍼가되었습니다.

따라서 이러한 HLS webgl 출력은 IOS 9가 아닌 IOS 10에서 부분적으로만 작동합니다. 많은 장치가 현재 9에서 멈춥니다. 9시에 해결 방법을 찾아야 합니다.

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

안녕하세요! 나도 같은 문제를 안고있어. 지금 해결 방법이 있습니까?

예, 그 데모에 있지만 IOS 10의 색상 공간 문제에 관한 두 번째 티켓을 확인하십시오. Webkit/Apple을 대신하여 IOS 9에서 작동하도록 하는 노력은 없을 것 같습니다. 즉, Ipad 3과 같은 구형 장치는 제외되지만 어쨌든 간신히 5fps를 렌더링할 수 있습니다. IOS 10이 작동하려면 먼저 집중해야 합니다.

Webkit에 보고된 이 문제에 대한 해결 방법입니다. 모든 Safari에서 발생하는 문제입니다.

http://dev.electroteque.org/webgl/webgl.html 이 작동하지 않는 것 같습니다. ios10에서 페이지를 테스트했습니다. 그러나 페이지가 로드될 때 사파리가 충돌합니다.

threejs 예제를 사용하십시오.

이 문제에 나열된 모든 예를 테스트했습니다. http://dev.electroteque.org/webgl/webglrgba.html 만 작동하는 것 같습니다. 그러나 색 공간 문제가 있습니다.

@wuyingfengsui 이것은 IOS 10 Iphone에서 작동합니다.

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

당신은 아마 내가 내기 시뮬레이터를 확인하고있을 것입니다. 그것은 엄청난 문제입니다. 프레임을 업데이트하지 않을 뿐만 아니라 녹색 컬러바를 표시합니다. RGBA 플래그를 사용하면 시뮬레이터에서 작동합니다. 거기에 이상한 그래픽 문제가 발생하고 있습니다.

시뮬레이터에서 RGBA 플래그와 같이 RGB 플래그를 사용할 때 실제 IDevice에서 색 공간 문제를 볼 수 있습니다!

Ipad 3가 구식이 되었지만 고맙게도 Iphone에 액세스할 수 있었기 때문에 지금은 IOS 10을 제대로 테스트하지 못하고 있습니다.

CORS 프록시 URL도 기록해 두십시오.

색상 공간 문제에 대해서는 지금 이것을 참조하십시오.

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

이 웹킷 티켓은 그들이 그것을 수정하고 릴리스를 미루는 데 신경을 쓰지 않을 것입니다.

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

ios 10 iphone 7에서 RGB를 RGBA로 변경할 때 작동하는 것으로 나타났습니다.

좋아, 다른 장치에 대해 다르므로 좋은 것입니다. RGBA로 업데이트 했습니다. 어때 ?

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

@danrossi 작동합니다.

@wuyingfengsui 그것에 관해 웹킷 티켓을 업데이트해야 합니다. 나는 엉망이 될 다른 색상 플래그가 있음을 알 수 있으며 그 중 하나가 올바른 것입니다. 다른 HLS 스트림을 시도했지만 동일했습니다.

three.js 상수에 다양한 값이 있음을 알 수 있습니다. 즉 이것들. 처리되는 바이트 유형 플래그도 있습니다. 시행 착오와 매우 피곤한 시행 착오.

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

그래서 슬프게도 IOS 9는 이것으로 완전히 중복되어 작동하지 않습니다. 이전 장치는 IOS 10을 사용할 수 없습니다.

어떤 종류의 방해 행위가 진행되고 있다고 생각하며 Safari 10이 출시되기 전에 작동했다고 생각합니까? Apple 및 때로는 Android와의 모든 불일치로 인해 테스트 단계에 몇 달이 걸렸습니다. 나는 HLS를 테스트했을 때 그것이 작동하고 있다고 확신합니다.

나는 webGL에 익숙하지 않습니다. 웹킷이 해결될 때까지 해결될 수 없다고 생각합니다.

이것이 webgl에 텍스처를 업로드하는 것입니다. 관심 있는 플래그입니다.

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

@wuyingfengsui macOS에서 CORS 문제를 부분적으로 "수정"하는 데 5년 이상이 걸렸다면

그래서 누군가는 거기에 앉아서 해결 방법을 알아내야 하고 슬프게도 저 자신입니다.

원시 webgl 예제를 사용하면 해당 플래그가 엉망이 될 수 있습니다. 또는 상수를 사용하여 three.js를 통해 수행하고 "형식" 및 "유형" 속성은 바이트 형식이고 형식은 RGBA가 거의 작동하지 않도록 하는 데 필요한 색상 형식입니다.

내일 시간을 할애하여 각 플래그를 살펴보고 하나의 조합이 작동하기를 바랍니다.

@danrossi 어떻게

나는 가능한 모든 플래그와 아무 것도 엉망으로 시도했습니다. RGB 및 RGBA 플래그만 사용할 수 있으며 바이트 유형은 부호가 없습니다. 다른 옵션은 검은색 캔버스만 ​​표시했습니다. 무엇을 더 해야 할지 모르십니까?

@danrossi 작업에 감사드립니다. Hls.js 가 MSE로 hls 비디오를 재생한다는 것을

@wuyingfengsui 이것은 이제 IOS의 기본 HLS 문제입니다. 위의 수정 사항은 Safari OSX의 버그를 해결합니다.

Dash 스트리밍을 사용하면 이전 Safari에는 프록시가 해결된 경우에도 CORS 문제가 있었습니다. 어쩌면 macOS에서 그들은 그것도 고쳤습니까?

위의 코드 수정을 사용하여 three.js에서 해결 방법을 제공하는 것 외에는 아무 것도 할 수 없습니다.

나는 웹킷을 의심하고 애플이 그것을 고칠 것입니다. 그래서 지금 이 티켓에 모든 시선이 집중되어 있습니다. RGB 플래그 항목은 이제 IOS 10 렌더링과 관련이 있습니다. 그것에 갇힌 IOS 9 및 이전 장치는 채워져 있습니다.

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

업데이트가 있습니까? iOS에서 고정 색상 렌더링으로 작업하는 사람이 있습니까?

이 티켓을 참조하십시오.

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

HLS 해결 방법이 외부로 이동해야 하는 three.js에 들어갈지 의심됩니다.

해당 해결 방법의 코드는 다음과 같습니다.

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

webgl 플래그를 엉망으로 만들고 싶다면 raw webgl 예제를 사용하십시오. 가능한 모든 옵션을 시도했지만 지금은 아무 것도 시도하지 않았습니다. 그것은 훌륭하고 진정으로 방해를 받았으며 웹킷에서 응답이 없습니다.

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

감사 해요. HLS 외에 iOS 비디오 플래그로 스트리밍할 다른 비디오 형식이 있습니까? 렌더링 문제 없이 H.264를 스트리밍할 수 있습니까?

@pedrofranceschi mp4 괜찮습니다. IOS에서 라이브 스트리밍 360 비디오를 위한 옵션을 채우는 것은 HLS일 뿐입니다.

이 티켓과 관련된 플립 수정은 HLS 스트림과 Safari에만 적용해야 합니다. 이 FlipY 수정은 IOS 10을 가져올 수 없는 구형 장치를 종료하는 IOS 9에서 작동하지 않습니다.

테스트용으로 사용한 Ipad 3에서는 HLS 및 WebGl이 작동하지 않습니다. 최신 아이폰에서 테스트해야 했습니다. IOS 10 시뮬레이터는 거의 작동하지 않았고 다른 문제와 유사한 색상 인공물 문제가 있었습니다.

적어도 IOS 10에서 Iphone에 대한 인라인 플래그가 작동했으며 인라인 비디오 및 webgl이 이제 가능하지만 CORS는 여전히 문제입니다. CORS는 macOS의 Safari에서만 수정됩니다.

나는 그것이 또 다른 고전적인 웹킷 버그이고 다른 브라우저에서 HLS.JS 스트리밍이 괜찮기 때문에 Safari를 지적합니다.

캔버스를 추가하여 해결할 수 있다는 것을 알았습니다. 하지만 iOS 10에서만 작동합니다. 이 커밋을 보세요: https://github.com/yanwsh/videojs-panorama/commit/0122b1bbd31093b77ca7f09900afa74e2c537037

그것은 비 이벤트였습니다. drawImage와 함께 캔버스 렌더링을 사용하고 있습니다. WebGL이 아닙니다. three.js 캔버스 렌더러를 사용하는 것과 같습니다. Canvas 렌더러는 IOS에서 정말 짜증나서 프레임을 떨어뜨려 사용할 수 없습니다. 이것이 당신의 해결책입니까?

품질이 별로 좋지 않습니다. 하지만 작동합니다 :)

프레임을 떨어뜨리는 것은 품질 문제 그 이상입니다. :)

@mrdoob 캔버스 렌더러를 해결 방법으로 시도했지만 이 작업을 수행합니다. 문제가 무엇인지 잘 모르겠습니다. 메쉬를 표시하는 것입니다. 회전도 옳지 않다. mp4 파일을 로드하면 제대로 표시되지만 여전히 메쉬 선이 표시됩니다.

여전히 이 작업을 수행하는 프레임을 삭제합니다.

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

@danrossi

@mrdoob 이 문제는 Safari의 HLS에 관한 것입니다. 이 모든 데모를 수행하는 것은 정말 어렵습니다. 그러나 나는 몇 가지 조합을 만들었습니다.

나는 또한 Chrome이 mp4 ahh의 Safari CORS 프록시 버전을 사용하지 않는 한 지금 mp4 재생을 거부한다는 사실을 알아냈습니다.

IOS 10의 HLS 문제를 일시적으로 해결할 수 있는 기괴한 CanvasRenderer 문제가 진행되는 한. 여기에 조합이 있으므로 수행하는 작업과 가능한 이상한 회전 값 오프셋을 보여줍니다. 코드는 모두 동일합니다. 텍스처 위에 메쉬 그리드가 있습니다.

사파리용

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

크롬용

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

@danrossi Safari 버전도 iOS 10에서 작동하지 않습니다…

이것은 IOS 10에서 작동해야 하지만 색상 아티팩트가 표시되어야 합니다.

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

다른 것들은 IOS 문제를 해결하기 위한 CanvasRenderer 테스트입니다. 최소한 데스크탑 브라우저에서는 작동해야 하고 작동하지 않아야 합니다.

이것은 모든 IOS에서 작동해야 하지만 나는 그것에 대해 너무 걱정하지 않습니다.

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

나는 CanvasRender 솔루션이 IOS를 위한 좋은 해결 방법이 될 것이라고 믿지는 않지만 그것은 옵션입니다. 여전히 CORS 프록시가 필요하기 때문에 캔버스 그리기는 프레임 손실만 발생시킵니다. Safari OSX는 threejs-hls.html에서 FlipY 작업을 사용할 수 있습니다.

캔버스 데모를 업데이트했는데 외부에서 그릴 필요가 없는 것 같습니다.

그러나 구 형상에 이상한 문제가 있어 이해할 수 없으므로 그림이 올바르게 렌더링되거나 회전하지 않고 모두 한 점으로 기울어져 있습니다.

왼쪽 상단 영역을 클릭하고 궤도 제어로 드래그하십시오.

메쉬 문제는 메쉬 표시를 중지하려면 MeshBasicMaterial에 "overdraw: 0.5"를 추가해야 한다는 것입니다.

CanvasRenderer를 사용할 때 사파리에 CORS 프록시가 필요하지 않습니다. CanvasRenderer가 너무 많은 프레임을 떨어뜨릴 때 더 잘 작동하는지 확인하기 위해 다음으로 SoftwareRenderer를 살펴보려고 합니다.

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

CanvasRenderer는 명백한 프레임 삭제로 인해 감가상각된 것으로 표시되었습니다. 유일한 최후의 수단은 SoftwareRenderer로 비디오 텍스처를 시도하는 것입니다. 해당 변경 사항은 아직 작동하지 않는 것 같으며 예제 설정을 찾을 수 없습니다. 그것은 단지 검은 캔버스입니다.

색상 결함에 대한 해결 방법이 있습니까? 모든 것이 파랗다

@andreabadesso 티켓 설정이 두 개 있는데 병합해야 할 수도 있습니다.

OSX의 경우 FlipY 해결 방법을 사용하면 그 불쾌한 문제를 해결할 수 있습니다. IOS 10의 경우 완전히 다른 것이 필요합니다.

캔버스 드로잉은 큰 실패입니다. 상자에서 제대로 렌더링되지도 않고 보석이 왜곡된 것 같습니다. 프레임도 떨어집니다.

나는 이제 여전히 캔버스 드로잉에 의존하는 "SoftwareRenderer"로 운을 시험하고 있습니다. 지금 내가 얻는 것은 검은 캔버스뿐이므로 아무 것도 없습니다. 비디오 텍스처를 작업하는 방법에 대한 문서는 없습니다.

다른 옵션이 없으며 webkit이 응답하지 않으며 가능한 모든 webgl 플래그를 시도했습니다. 돌아가서 인코딩을 엉망으로 만들 수 있지만 HLS는 작업 mp4 파일에서 패키지됩니다.

한편, 필사적인 솔루션이 필요한 사람이 있으면 .ts 파일을 감시하고 .mp4로 변환하고 웹 소켓을 방출하여 클라이언트가 mp4(ios10에서 작동하는)의 다음 조각을 다운로드할 수 있도록 합니다.

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

관심이 있는 사람이 있으면 전체 솔루션을 제공할 수 있습니다.

@andreabadesso 솔루션에 대한 클라이언트 구현이 있습니까?

그것은 매우 조심스럽습니다. CORS 프록시가 필요할 뿐만 아니라 실시간으로 FFMPEG를 통과하려고 합니다. O IOS는 웹 소켓도 수행합니까? 나는 그것이 webrtc를 할 수 없다는 것을 알고 있습니다.

SoftwareRenderer 옵션을 통해 여전히 캔버스 드로잉을 통해 비디오 텍스처를 얻으려는 시도도 좋지 않습니다. 바로 블랙 프레임입니다. 두 옵션 모두 막다른 골목이었습니다. 최소한 SoftwareRenderer가 비디오 텍스처와 함께 작동하는 것은 이미지 텍스처만 표시되기를 바랍니다.

안녕하세요 여러분, 저는 지난 날 색상 문제에 대해 작업해 왔으며 제 사용 사례에 적합한 해결 방법을 찾았습니다. 이 스레드는 매우 유용했으며 기여하고 싶습니다.
문제는 빨간색과 파란색 색상이 서로 바뀌었다는 것입니다. 그래서 ffmpeg를 사용하여 해당 색상을 미리 전환했습니다. threejs에서 색상이 다시 전환되면 비디오가 원래 모양으로 돌아갑니다.
최적의 솔루션은 아니지만 작동합니다. (IOS 10.2에서 테스트)

@Yralec

인코딩 문제이거나 인코딩 문제라고 생각했습니다.

그러나 Wowza 라이브 스트리밍에 대해서는 도움이되지 않습니다. 라이브 인코더의 작동 방식을 제어할 수 있는 사람은 아무도 없을 것입니다. 아마도 VOD용.

확인을 위한 ffmpeg 플래그가 있습니까?

여전히 놀랍습니다. 이것은 여전히 ​​필요한 FlipY 문제를 제외하고 three.js의 문제가 아닌 것 같습니다.

Webkit이 왜 이런지 이해할 수 없습니다.

@danrossi

내가 사용한 명령은 다음과 같습니다.
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
보시다시피 출력을 뒤집고 있으므로 threejs에서 직접 할 필요가 없습니다.

좋아, 그것에 대해 물어보려고 했어.

파란색과 녹색을 바꾸는 셰이더를 작성하는 것이 더 쉽지 않을까요?

@mrdoob 저는 셰이더에 대한 지식이 거의 없으므로 저에게는 그렇지 않았습니다(또한 그것에 대해 생각조차 하지 않았습니다). 그러나 빨간색과 파란색을 바꾸는 것을 작성하는 방법을 알고 있다면 거의 확실하게 더 나은 솔루션입니다.
또한 라이브 스트리밍이 마침내 작동할 수도 있습니다.

@mrdoob 뭔가 하고 있는 것 같아요. 다시 한 번 죄송합니다. 이것은 또 다른 Webkit 문제가 되었습니다. FlipY 수정은 여전히 ​​피할 수 없습니다.

나는 약간의 조사를했고 이와 같은 채널 순서 교환이있는 것 같습니다. 저는 이제 셰이더 전문가가 아닙니다.

gl_FragColor = texture2D(u_image, v_texCoord).bgra;

내 원시 webgl 예제 에서

이것에서 작동하는 솔루션을 얻는 방법을 아직 모릅니다.

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

단순히 복사해서 붙여넣기 하는 프로그램 오류가 있었습니다.

위의 이 코드를 사용합니다. 렌더링되는 내용이 IOS 10에서 보이는지 확인할 수 있으므로 셰이더에서 교체된 빨간색과 흐림 색상을 반전시켜야 합니까?

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

@Yralec은 IOS10 에서 셰이더의 색상 채널 순서 반전을 확인합니다. 시뮬레이터에서 이상한 선 없이 렌더링하려면 색상 형식을 rgba로 변경해야 했습니다.

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, 비디오);

@mrdoob 내장 셰이더 프로그램에 이 텍스처 색상 변경을 어떻게 적용할 수 있습니까?

gl_FragColor=texture2D(sm,txt).bgra;

@mrdoob. 보정. 이것은 사람들이 사용하는 것일 수 있습니다.

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

그것을 변경하기 위해 액세스하는 방법은 무엇입니까?

@danrossi JS에서 이와 같은 것을 해킹할 수 있습니다.

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

셰이더를 THREE.ShaderMaterial에 복사해야 한다고 생각하지만 텍스처를 적용하는 방법을 모르십니까?

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

다른 방법은 IOS의 HLS 스트림에만 적용해야 하므로 유연하지 않습니다.

실제로 이것은 사파리에서 렌더링되지만 FlipY 수정은 중단됩니다. 거꾸로 재생됩니다. 마음이 흔들립니다. 이 모든 노력은 애플과 웹킷 덕분입니다.

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

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

@WestLangley 패치가 작동하지 않는 것 같습니다. 색상이 거꾸로 표시되어야 하지만 그렇지 않습니다.

gl_FragColor=texture2D(sm,txt).bgra;

이것은 [b]lue와 [r]ed를 교환하는 올바른 셰이더입니다. 기본 순서는 rgba이므로 bgra는 이를 교환합니다.

FlipY 수정 중단

예를 들어 txt -> vec2(txt.x, 1.0 - txt.y)

방법을 몰라

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

패치가 작동하지 않는 것 같습니다. 색상이 거꾸로 표시되어야 하지만 그렇지 않습니다.

어쩌면 당신은 패치를 너무 늦게 적용하고 있습니다

@makc 내 원시

내 threejs 예제에 게시된 UV 코드에서 뒤집기가 완료되면 셰이더에서 프레임별로 뒤집히지 않는다고 생각합니다. 나는 그것이 처리하기 위해 불필요한 계산을 제거 할 것이라고 생각했습니다.

원시 webgl 예제에서는 정점 셰이더에서 뒤집혔습니다.

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

그런 다음 조각 셰이더에서 색상 채널을 반전시킵니다.

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

three.js에서 그것을 복제하려고 하는 것이 지금 문제입니다.

죄송합니다. 작동하는 것 같지만 FlipY 수정이 작동하지 않습니다. 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
                });

기본 tFlip 값을 1로 변경하면 올바른 방향으로 표시되므로 HLS의 FlipY 문제에 대한 또 다른 수정 옵션이 있습니까?

tFlip: { value: 1 }

비디오는 시뮬레이터에서 렌더링을 중지하기로 결정했지만 적어도 색상 변화가 보입니다. 패치를 디버깅하면 셰이더 코드를 확실히 대체하지만 패치는 슬프게도 작동하지 않습니다.

음수가 아닌 양수 1만 주는 값으로 뒤집을 수 있는 것 같습니다.

내 Ipad 3과 같은 구형 장치를 더 이상 사용하지 않게 된 후 IOS10에 대한 액세스 권한을 잃었습니다. 10.10에서만 실행되는 소프트웨어가 있기 때문에 외부 드라이브에서 부팅된 macOS에서 시뮬레이터를 로드해야 합니다. 이 모든 방해 행위와 함께 즐거운 시간을 보내십시오.

프레임을 업데이트하고 제대로 회전하는지 여부는 아직 모르겠습니다.

이 예제가 IOS 10에서 작동하기를 바랍니다. 지금 당장 할 수 있는 최선입니다. Safari에서는 반전된 색상이 표시되어야 합니다.

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

셰이더 머티리얼을 사용하면 이미지 스케일링, 지오메트리를 망치고 카메라 회전이 다음과 같이 작동하지 않도록 멈춥니다.

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

이 패치가 작동하도록 시도해야 합니다.

이것은 여전히 ​​카메라 위치를 엉망으로 만들고 있지만 작동하는 것처럼 보였습니다. 실행 가능한 옵션이 아니라고 생각합니다. 이런 식으로 하면 더 많은 버그가 생성됩니다. 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
                });

기본 재료를 사용하려고 하면 작동하지 않습니다. 즉

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

내장 셰이더를 해킹하는 대신 사용자 지정 셰이더를 만들 것입니다.

자! 😀

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/

검은 화면만 렌더링하지 않습니다.

@danrossi 그것은 나를 위해 일합니다.

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

색상 유형 및 변수 이름 업데이트 기억

여기에서 렌더링됩니다... (Chrome 55, OSX)

이 문제는 HLS 스트림과 Safari, 특히 IOS가 있는 비디오 텍스처에 관한 것입니다.

meshbasic_frag의 작동 방식과 텍스처가 적용되는 방식을 알 수 없습니다. 그것이 그것이 사용하는 것입니다.

equirect_frag 프로그램이 사용 중이거나 선택되어 있지 않습니다.

gl_FragColor = vec4( outgoingLight, diffuseColor.a );

이것이 내가 보는 전부입니다.

meshbasic_frag 및 equirect_frag 은 잊어야 한다고 생각합니다. 내 코드를 기본으로 사용하고 이것을 대체하십시오.

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

다음과 같이

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

@mrdoob

뒷면이 문제를 일으켰습니다. 이 셰이더 프로그램은 확실히 일반 프로그램보다 훨씬 깨끗합니다. 차이점은 무엇입니까?

사용자 정의 셰이더를 사용하면 원래 FlipY 수정 사항이 손실됩니다.

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

정점 코드를 약간 수정해야 했고 x는 뒤집혔고 y는 반전이 필요했습니다. 잠시 후에 올리겠습니다.

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

이 셰이더 프로그램은 확실히 일반 프로그램보다 훨씬 깨끗합니다. 차이점은 무엇입니까?

마법! 😉

@mrdoob 감사합니다 챔피언. 소음에 대해 미안하지만 이것에 대해 Apple을 다시 비난하십시오.

따라서 정방형 비디오의 경우 데모를 업데이트하여 이를 사용하지 않아야 합니까? 그렇다면 이러한 비디오 텍스처에는 MeshBasicMaterial이 사용하는 셰이더 프로그램이 필요하지 않습니까? 브라우저와 다양한 비디오 형식에서 테스트하겠습니다.

닫을까?

업데이트된 데모는 다음과 같습니다.

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

따라서 정방형 비디오의 경우 데모를 업데이트하여 이를 사용하지 않아야 합니까? 그렇다면 이러한 비디오 텍스처에는 MeshBasicMaterial이 사용하는 셰이더 프로그램이 필요하지 않습니까?

글쎄, MeshBasicMaterial 는 더 유연하고 사람들은 셰이더를 작성할 필요가 없습니다. 이 특정한 경우에 문제를 해결하기 위해 사용자 지정 셰이더를 작성하는 것이 더 간단했을 뿐입니다.

닫을까?

네!

IOS 10에서는 잘 작동합니다. 단지 프레임이 시뮬레이터에서 업데이트되지 않는다는 것뿐입니다. 하드웨어를 기다려야 합니다. 다른 티켓을 끊겠습니다.

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

플리피를 약간 조정하면 동일한 프로그램이 webm으로 크롬에서 작동합니다.

@mrdoob 이 셰이더는 비디오 텍스처가 있는 모든 브라우저에서 작동한다고 생각합니다. 플립 수정 "1.0 - uv.y"는 Safari의 HLS에만 필요합니다. 색상 채널 반전은 HLS가 있는 IOS10에만 필요합니다.

CORS 프록시를 포함하여 해결 방법의 꽤 미친 레이어.

나는 이것이 meshbasicmaterial에서 제공하는 셰이더보다 더 나은 성능을 발휘한다고 믿습니다. 이것이 비디오 텍스처의 표준이어야 합니까? 회전은 정점 코드와 함께 작동하는 것 같습니다.

안녕하세요 여러분
HLS 라이브 스트림(.m3u8이 hls.js로 재생됨)을 표시하는 three.js로 360vr 플레이어를 만들려고 합니다.
webgl이 활성화된 Safari osx에서 작동하지만 ipad 10.2에서는 모든 시도가 검은색 캔버스에서 길을 잃습니다(사운드가 작동함)
vr360 모드를 비활성화하면 비디오 스트림이 모든 장치에서 제대로 작동합니다.
제안된 방법 중 일부를 시도했지만 여전히 검은색 캔버스 렌더링이 있습니다.
해결 방법을 아는 사람이 있습니까?

FlipY 및 색상 채널 반전 수정 사항은 이 스레드에 있습니다.

내가 추적한 Webkit 버그는 오래되었고 결국 그것에 대해 약간의 오만함을 극복했습니다. 아직 열려 있지만 아무도 그들을 쳐다보지 않을 것입니다.

Safari용 FlipY 수정이 필요합니다. 따라서 three.js 텍스처에서 여전히 비활성화하십시오.

다음은 내 플레이어 솔루션을 위해 고안한 공식적인 es6 방법입니다. 나는이 쓰레기를 사냥 한 후에도 몇 달 동안 여전히 악몽을 꾸고 있습니다.

shadermaterial 솔루션을 제안한 mrdoob 챔피언에게 감사드립니다. 지금 모든 브라우저에서 이것을 사용하고 있습니다. 또한 생성되는 것보다 더 간단한 셰이더입니다. 그것은 단지 비디오 텍스처를 위한 것입니다.

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

용법

 let invertColour = false;

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

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

ok three.js의 _gl.pixelStorei(_gl.UNPACK_FLIP_Y_WEBGL, texture.flipY) 줄에 대한 주석은 Safari(10.0.2, 이전 버전에서는 개발 도구에서 webgl만 활성화하는 것이 필요했습니다. 옵션을 지금 사용할 수 없음) 하지만 여전히 문제가 있는 iPad 및 iPhone(내 대상)
shaderMaterial 솔루션에 대해 내 코드에 정확히 적용하는 방법을 모르겠습니다...
당신의 지원에 감사드립니다

내 테스트에서 FlipY 비활성화는 MacOs Safari 10에도 필요했습니다.

예(이전 9.xx 버전 제외)
하지만 솔루션이 내 솔루션이 아니도록 모바일 장치에서 플레이어를 사용해야 합니다.-(

IOS에서는 FlipY 수정과 색상 채널 반전이 모두 필요합니다. 그리고 IOS 10에만 해당됩니다. IOS 9에서는 좋지 않습니다. 이로 인해 많은 구형 장치가 제외됩니다. Apple이 내 Ipad 3처럼 그것들을 평가절하했기 때문입니다. IOS 10은 인라인 재생을 지원하므로 어쨌든 바람직할 것입니다.

지금 iOS에서 이 문제를 해결하는 방법을 살펴보고 있습니다. 그런데 댓글이 좀 헷갈리네요.

HLS 비디오의 경우:

• iOS는 잘못된 순서로 색상 채널을 제공합니다(rgba 대신 bgra). 값은 그렇지 않으면 정확합니다.
• macOS는 X축을 뒤집어야 하는 텍스처를 생성합니다. setPixelStorei(UNPACK_FLIP_Y_WEBGL, true)를 사용하여 이 문제를 해결할 수 있습니다.
• iOS는 X축에서 대칭 이동이 필요한 텍스처를 생성하지만 위의 해결 방법은 작동하지 않습니다.

이 올바른지?

답은 위의 티켓에 있습니다.

여러분에게 경고하듯이, 분명히 최신 iOS 10.3.3 업데이트가 bgr 문제를 수정 하여 해결 방법을 ...

예상대로. 꽤 표준. 충고 고맙습니다.

그들은 옳은 일을 해야 하고 내가 만든 티켓을 업데이트해야 하고 미개봉 상태로 남겨두었습니다. 수정 사항이 있는 경우 모든 개발자를 업데이트합니다. 그들은 아직 ~하지 못했다. 이제 마이너 버전을 확인해야 합니까?

IOS 11에는 CORS 수정 사항이 있어야 하지만 아직 없습니다.

xcode 9 베타를 얻을 수 있었습니다. 그것은 10.3.3 시뮬레이터 10.3.1 및 11과 함께 제공되지 않습니다. 11에서 테스트했는데 반전된 rgba가 여전히 필요한 것 같습니다. 그렇지 않으면 녹색 디스플레이가 표시되거나 전혀 표시되지 않습니다. 수정을 비활성화하여 더 많은 테스트를 실행해야 합니다.

IOS11 시뮬레이터는 엉망입니다. 10.3.3 IOS 시뮬레이터가 없습니다. IOS11에는 CORS가 수정된 것 같습니다.

이제 iOS 11이 대중에게 공개되었으므로 몇 가지 테스트를 실행했으며 iPhone iOS 11(아직 iPad를 사용하지 않음)에 대한 이 스레드의 수정 사항을 사용할 수 없습니다.

HLS가 있는 iPhone 및 iPad의 iOS 10.3.3에서 CORS 핵, FlipY 및 색상 수정을 사용하여 작동하게 만들 수 있습니다.
iPhone iOS 11에는 HLS가 있는 검은색 화면이 있습니다(CORS 핵, FlipY 및 색상 수정 사용). 수정해야 할 것이 더 있다고 생각하지만 아직까지는 손가락을 대지 않았습니다.

CORS 문제와 관련하여 iOS 11에서는 최소한 MP4 점진적 다운로드에 대해 개선된 것으로 보이지만 위의 이유로 HLS에 대해 확인할 수 없습니다.

누군가가 더 운이 좋다면 업데이트하십시오 :/

IOS11도 받을 수 있는 새로운 ipad를 얻기 위해 최선을 다하고 있습니다.

에뮬레이터에는 수정 사항이 없으므로 실패했습니다.

거기에서 카운터 해킹을 해야 하는지 확인해야 합니다. 또는 rgb 색상 채널을 다시 전환할 수 있는 경우.

HLS의 검은색 렌더링은 좋은 시작이 아니며 회귀를 되돌리는 데 몇 년이 걸리는 일반적인 방해 행위입니다. 그것이 IOS9에서 일어나는 일입니다.

CORS는 IOS11에서 수정되어야 하며 프록시가 필요하지 않습니다.

@danrossi 저도 현재 iOS 11에서 이 문제에 직면하고 있습니다. 이 문제에 대한 해결책이 있으면 알려주세요. iOS 10은 여전히 ​​CORS 수정 및 Flip Y로 제대로 작동하지만 iOS 11은 오디오만 재생합니다.

IOS11이 설치된 새 ipad를 구입해야 합니다. HLS가 IOS11 베타 시뮬레이터에서 작동하고 있습니까? CORS와 관련된 것일 수 있습니다. rgb 채널 플립은 반전된 색상을 표시합니다. 그래서 검은색은 CORS와 관련이 있을 수 있습니까?

CORS 프록시 없이 시도했지만 여전히 동일한 문제가 있습니다. 나는 또한 그것을 위해 Flip Y 없이 시도했지만 아무 것도 바뀌지 않았습니다. 소리만 있고 영상은 없습니다 :/

ios11 장치에서 여전히 동일한 문제가 있고 소리만 있고 비디오가 없습니다. 이 문제를 해결한 사람이 있습니까?

비디오를 2D 캔버스에 그리고 해당 2D 캔버스를 webgl의 텍스처로 사용하여 작동하도록 했습니다.

ios11에서 2D 캔버스 텍스처를 올바르게 가져올 수 없습니다. 코드를 게시할 수 있습니까?

그것은 아주 나쁜 생각입니다. 캔버스 드로잉은 프로세서를 많이 사용합니다.

이 문제와 관련하여 웹킷 티켓을 업데이트했습니다. 그들은 그것을 전혀 다루지 않았습니다. 풀 셰이더와 소스 코드로 해결 방법을 제공하기도 했습니다. 당신이 주장하는 것은 지금 작동하지 않습니다.

다른 사람이 문제를 겪고 있다는 것을 알고 있습니다. 그러나 실제 새 장치를 얻을 때까지 아직 제대로 테스트할 수 없습니다. 시뮬레이터가 올바르게 표시하고 있습니다. Iphone 5조차도 IOS 11을 얻을 수 없는 계획된 노후화에 직면했습니다.

여기 티켓이 또 있습니다. https://bugs.webkit.org/show_bug.cgi?id=163866#c17

@LoveLetterIloveU는 여기 내 샘플 코드입니다: https://htmlvideocanvas-sibabi.c9users.io/hello-world.html (ios에서만 열기)
@danrossi 가 맞습니다. 최상의 솔루션은 아닙니다. 기본적으로 포인터를 바인딩하는 대신 바이트 배열의 memcopy를 수행합니다. 그러나 Apple이 프로젝트를 유지 관리하는 동안 작업을 수행합니다. 나는 여전히 이 접근 방식을 평가하고 있으며 mp4 대체 방법도 사용할 준비가 되어 있습니다.

나는 셰이더를 미세 조정하는 모든 사람의 도움으로 위의 솔루션을 찾는 데 두 달을 보냈습니다. 정말 감사합니다. 다른 해결 방법을 찾는 데 더 많은 시간을 할애해야 한다는 의미입니다.

하나가 있기를 바랍니다.

그들은 flipy / HLS / webgl 문제를 전혀 시도하고 수정하려고 애쓰지 않았습니다. 내가 만든 티켓에서 볼 수 있습니다.

그들은 결국 CORS 문제를 수정했을 뿐입니다. 비록 그들이 Dash를 작동시킬 수 있었는지 아직 확신할 수 없지만.

애플/웹킷은 내 편에 있는 가시다. 그것은 내가 직접 가서 고쳐야 하고 C++를 하지 않는다는 것을 의미할 수 있습니다. 고치면 정말 웃기겠지만 머리는 계속 유지하고 싶어요.

FlipY가 활성화/비활성화되어 있는지 확인하기 위해 누군가 저를 위해 코드를 게시할 수 있습니까?

여기 내 의견을 참조하십시오. 나는 이 방해 공작을 완전히 배부르게 먹었습니다. 텍스처에서 flipY를 비활성화하면 그림이 표시되지만 거꾸로 표시됩니다. 여기 검은색 프레임이 있습니다. 시작으로 돌아갑니다. 그들은 IOS9에서 문제였던 회귀를 일으켰습니다.

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

한 번도 보거나 처리되지 않은 원래 웹킷 티켓을 닫습니다. 그리고 증거를 모으는 데 시간이 걸리므로 곧 새로운 것을 시작하십시오.

원래 FlipY 문제를 넘어섰습니다. 그들은 OS를 출시하기 전에 HLS가 WebGL과 작동하는지 확인하는 것조차 귀찮게하지 않는 것 같습니다.

나는 새로운 것을 시작하기 위해 원래의 웹킷 티켓을 닫았습니다. 특히 webgl이 있는 HLS 비디오 텍스처는 아직 해결 방법이 없어 완전히 깨졌습니다. 원래 FlipY 해결 방법은 더 이상 관련이 없습니다.

나는 모든 webkit webgl 적합성 테스트가 Mp4를 사용한다는 것을 발견했습니다.

그들은 Apple의 자체 스트리밍 형식으로 테스트하는 것을 귀찮게 한 적이 없습니다. 따라서 새로운 IOS 11 업데이트로 고장 났고 여전히 고장난 이유는 무엇입니까?

자세한 내용은 여기를 참조하세요.

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

@danrossi 새로 오픈한 웹킷 티켓 링크 있나요? 저는 iOS11에서 이 문제를 우연히 발견했으며 모든 개발을 추적하고 싶습니다.

나는 그들을 위해 그들의 작업에 자체 자금을 지원하고 있습니다. Khronos 테스트 mp4 파일에서 생성된 HLS로 적합성 테스트를 실행하고 있습니다. 통과했다고 주장하지만 테스트는 아무것도 표시하지 않는지 증명하지 못합니다. 캔버스는 여기에 표시되지 않습니다. 사실 IOS에서는 테스트가 제대로 작동하지 않는다고 생각합니다. 로그가 없습니다.

HLS 텍스처가 작동하지 않는다는 것을 증명하기 위해 자체 테스트 파일을 사용해야 합니다. 나는 다른 테스트 파일을 구축했고 티켓을 만들기 위해 업로드할 것입니다.

webgl 매개변수가 필요하거나 지난번처럼 비활성화해야 하는 매개변수가 있기를 바랍니다.

내가 웹킷 테스트 파일을 보는 한 좋습니다. IOS 테스트용으로 설계되지 않았습니다. 재생할 사용자 클릭 기능이 없습니다. 속성이 지정되지 않았지만 HLS는 여전히 할 수 없지만 어떤 이유로 Mp4는 IOS 11에서 발견한 자동 재생이 가능합니다.

IOS를 위해 특별히 수행된 테스트는 없으며 HLS에 대한 테스트는 가장 확실하게 이루어지지 않았습니다.

따라서 문제. 그것은 나쁜 이상입니다.

티켓을 제출하는 데 필요한 것이 있습니다.

최대한 멀리 볼 수. webgl 웹킷 테스트에 결함이 있습니다. 그들은 webgl 캔버스 출력에 대해 신경 쓰지 않습니다. 그들은 매우 작은 크기로 미리보기 출력으로 캔버스에 비디오를 그리고 있습니다.

그들은 webgl 캔버스를 가지고 있지만 크기가 매우 작기 때문에 렌더링 여부도 알 수 없습니다.

HLS에 대한 테스트를 수정해야 했지만 통과하지 못했습니다. 그리고 이제 webgl 캔버스의 크기를 증가시켰습니다. 검은색입니다.

사용자를 추가하도록 코드를 수정한 후 테스트가 실제로 IOS에서 실행되기 시작합니다.

내가 볼 수있는 한 HLS에 대한 테스트가 수행되지 않았으며 테스트에 결함이 있습니다. 그래서 그것은 절대적으로 모두를 방해했습니다.

여기 있습니다. 나는 Apple과 그들의 문제를 수정하고 테스트를 실행하는 데 얼마나 많은 개인 작업이 필요한지 참을성을 잃고 있습니다.

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

이틀이고 볼 필요가 없습니다. 나는 이것이 결코 해결되지 않을 것이라고 생각합니다. CORS를 수정하는 데 몇 년이 걸렸고 여러 버전의 IOS와 장치 업그레이드가 필요했습니다.

나는 webgl 플래그와 셰이더 코드를 사용하여 수행할 수 있는 작업이 있는지 확인하려고 합니다.

사람들이 거기에 가서 약간의 소음을 일으킬 수 있습니까? 아직 살펴보지도 않았기 때문이다. 그들은 실제로 자체 브라우저에서 HLS를 테스트하는 것에 대해 전혀 신경 쓰지 않는 것처럼.

@jernoble 이 문제에 대해 웹킷 팀에서 누가 우리를 도울 수 있는지 지적해 주시겠습니까? 누군가가 그것을 조사하거나 우리에게 업데이트를 제공할 수 있다면 정말 감사할 것입니다. GitHub의 문제는 꽤 길지만 여기에 요약되어 있습니다: https://bugs.webkit.org/show_bug.cgi?id=179417. 미리 감사드립니다.

안녕하세요 @radiantmediaplayer입니다. @grorg 와 저는 모두 이 문제에 대해 핑할 수 있는 적임자입니다. 나는 WebKit 버그를 참조하고 이를 추적하는 레이더를 만들 것입니다.

얘들 아. @sorob에서 설명한 대로 임시 캔버스를 사용하여 iOS 11에 대한 샘플 해결 방법을 게시하고 있습니다. http://redgetan.cc/demo/ios_11_hls_webgl_canvas_workaround/index.html 에서 작동하는 것을 볼 수

캔버스 렌더러. 그것은 소프트웨어 렌더링입니다. 생산 가치가 없습니다.

나는 이것 에

@danrossi 방금 이 문제가 종료되었음을 알았습니다. 다시 열어주시겠습니까?

새로운 문제가 여기에 있습니다. Three.JS와 관련이 없으므로 아카이브용으로 보관됩니다.

요구되는 시험의 수준은 미쳤다. IOS10 해결 방법을 찾는 것처럼 허리가 부러졌습니다. 거기 좀 봐.

지금까지 아무 것도 작동하지 않습니다. 누군가 마침내 우리의 통제가 아닌 살펴보고 있습니다. HLS를 보는 텍스처의 컨텍스트에 대한 공유 참조와 관련이 있는 것은 문제를 해결할 수 있는 Mp4와 다릅니다. 내가 모으는 한 그들은 실제로 그것을하기 위해 시간을 보내야합니다. Windows에서와 같은 빌드 환경을 설정할 방법이 없습니다.

그러나 웹킷 코드를 보면 IOS10에 HLS에 이상한 색상 문제가 있었던 이유가 설명됩니다. 색상 공간 코드를 사용하지 않습니다. 따라서 IOS10/Safari에서 두 가지 문제를 모두 해결하는 코드입니다.

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

안녕하세요. IE11 비디오 텍스처 지원을 위해 캔버스 렌더러를 롤백하고 구현해야 하는 것 같습니다. WebGL에서는 작동하지 않습니다. 누군가 그것에 대해 묻고 있었습니다.

제 생각에는 수리하는 데 걸리는 속도를 생각하면 2년 정도 걸릴 수 있습니다.

IOS 11은 HLS에 대한 소프트웨어 렌더링으로 어려움을 겪을 것입니다. 휴지통에는 모든 IOS가 VR용입니다. 직접 구현하겠습니다.

@redgetan , three.js로 구현하는 방법에 대한 아이디어가 있습니까? CanvasRenderer를 사용하려고 시도했는데 텍스처 위에 메시 프레임이 표시되고 spheregeometry를 올바르게 렌더링하지 않습니다.

캔버스 3 데모는 렌더링되는 2D 비디오만 보여줍니다.

죄송합니다. webgl render를 사용하고 있지만 캔버스를 텍스처 이미지 소스로 사용하고 있습니다. 복제할 수 있는지 확인하는 중입니다. 캔버스를 텍스처로 사용할 때 올바르게 렌더링 및 회전되지 않습니다.

좋아, 어떤 이유로 나는 이것을해야했다.

webgl 렌더러를 정상적으로 사용하십시오. 그러나 캔버스 질감과 비디오 드로잉의 경우 치수를 설정해야 했습니다.

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

지금 올바르게 렌더링되고 있습니다. IOS 11에서 테스트를 실행합니다.

@danrossi 는 iOS 11에서 어떻게 진행되는지 알려 주었습니다. 실제로 어느 시점에서 그 길을 가야 할 수도 있습니다.

알았어요, 걱정하지 마세요. fps 통계 보기가 작동하는 것 같으면 곧 온라인으로 기본 테스트를 추가할 것입니다. 지금 당장 필요한 것이 있을 수 있습니다.

IOS에서 프로세서 성능을 확인하는 방법이 있습니까?

캔버스 질감 테스트를 해보았습니다. 작동하지만 더 큰 해상도의 비디오는 넘어질 수 있습니다.

이 HLS는 품질이 낮으므로 40fps로 유지됩니다. 더 큰 해상도의 mp4이지만 낮은 품질은 30fps로 유지되었습니다.

프로덕션 해상도 파일은 10fps를 얻을 수 있습니다. 이것은 새로운 아이패드용입니다.

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

이 문제는 지금 이 페이지에서 직면하고 있는 문제와 관련이 있습니까? https://digitalejulegaver.firebaseapp.com/#catarina

Mac의 Safari 브라우저 또는 macOS 장치에서 엽니다. 아이패드나 아이폰은 크롬 브라우저나 모질라에 있더라도 이 한 페이지를 처리할 수 없습니다.

검은색 페이지가 표시되지만 Mac의 일반 크롬에서는 작동합니다.

@vongohren 이 티켓에서 작업한 macOS Safari 및 셰이더와 함께 HLS에 대해 발견한 FlipY 해결 방법을 사용해야 합니다.

그러나 나는 웹킷 티켓으로 돌아왔고 그들은 10.13에 대한 FlipY 문제를 수정했다고 주장했습니다. 하이 시에라라고 생각합니다. 클라우드 기반 macOS를 사용하고 있으므로 테스트할 기회가 없습니다.

이를 위해서는 10.13에 대한 FlipY 해결 방법이 필요하지 않은 또 다른 플랫폼 버전 확인이 필요합니다. 따라서 버전 13 이하에서는 필요합니다. 여러 버그를 해결하기 위해 macOS 및 IOS에 대해 약 4개의 다른 플랫폼 및 브라우저 버전 확인이 있습니다. IOS 11 검사는 소프트웨어 텍스처 렌더링을 켜는 것입니다!

10.13을 확인할 수 있다면 도움이 될 것입니다.

여기 내 모든 티켓의 세부 정보가 있습니다.

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는 10.13을 얻었지만 테스트할 수 있는 데모가 있습니까?

지금 사용하고 있는 three.js 버전은 이러한 수정 사항의 새로운 것이므로 적용할 위치를 모릅니다.
나는 data.flipY라는 것을 발견하고 그것을 false로 설정했습니다. 하지만 내 앱에는 아무 것도 하지 않았습니다.

이 라이브러리를 통해 three.js를 사용하고 있습니다. https://github.com/iberezansky/flip-book-jquery

CORS 문제?

이것이 작동합니까?

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

아니면 이거

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

내 방대한 테스트 파일 목록이 해당 티켓에 있습니다.

텍스처에서 FlipY를 비활성화할 수 있습니다.

texture.flipY = false;

모든 것이 로컬에 있으므로 cors가 영향을 받아야 하는 이유를 알 수 없습니다. 그러나 이 두 링크는 ​​Mac 10.13에서 사파리와 크롬 모두에서 검은색으로 표시됩니다.

그리고 플립 기능은 단지 그림을 뒤집는 것보다 많은 일을 하지 않았습니다. 하지만 여전히 검은색이었다

10.13에서 FlipY 해결 방법이 손상된 IOS 11과 동일한 문제가 발생하는 것처럼 들립니다. 이것은 좋은 정보입니다. 보고해야 할 또 다른 버그. 너무 지저분해서 저를 미치게 합니다. IOS 티켓에서 업데이트하겠습니다. 10.12에서 FlipY 버그는 해결되어야 하며 이에 대한 별도의 티켓을 만들어야 합니다.

그래서 지금 내 VR 기능 에서처럼 . IOS 11 및 10.13에 대한 플랫폼 버전 확인을 수행하고 hls에 대한 소프트웨어 렌더링 캔버스 텍스처 모드를 제공해야 합니다.

여기에 기능 검사, 특히 cors 지원 또는 cors 프록시 소스 사용에 사용하는 몇 가지 정적 유틸리티가 있습니다. 분명히 이제 IOS 11과 같은 소프트웨어 렌더링을 일시적으로 켜기 위해 13보다 큰 버전을 확인해야 합니다.

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

당신은 이것에 대해 몇 가지 훌륭한 작업을 수행했습니다. 티켓이 정리되기를 바랍니다 :D

다음은 캔버스 질감 해결 방법입니다. IOS 11용으로 활성화해야 했습니다. macOS 13 버전 확인을 수행하고 활성화해야 할 수도 있습니다. 10.13에서 flipY 작업이 중단되었다고 생각한다면? 그들에게 다시 보고해야 합니다.

당신은 전혀 모르는 친구, 나는 자체 자금으로 그것으로부터 어떤 이익도 얻지 못합니다. 내 자신의 기능을 포함하여 모든 사람의 소프트웨어를 Apple OS에서 거의 작동하지 않게 만드는 것 외에는 haha.

여기에 지금 내 전체 통합이 있으며 사과 수정 및 해결 방법을 포함한 작업이 있습니다. 이제 큐브맵 비디오를 지원합니다.

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

이것은 내가 몇 년 전에 아무 것도 하지 않고 앉아 있는 것을 처음 보고한 이후로 계속 진행되고 있습니다!

이것이 당신을 위해 작동합니까?

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

여기 캔버스 질감이 해결되었다고 말할 때 어디를 가리킵니까?

그 플로우 플레이어는 달콤해 보입니다! 많이 사용하셨나요?

이 링크에서 무엇을 볼 수 있습니까? http://dev.electroteque.org/webgl/three-canvas.html?
Chrome - 버전 63.0.3239.84(공식 빌드)(64비트) - macOS 10.13.1에서 열 때:
왼쪽 모서리에 FPS 미터가 있는 검은색 배경과 가운데 하단에 AR 활성화 버튼이 표시됩니다.
그것을 클릭하면 설정 휠과 뒤로 버튼이 있는 분할 화면이 나타납니다. 하지만 캔버스 자체는 검은색일 뿐입니다.

macOS 10.13.1의 Safari 버전 11.0.1(13604.3.5)에서 열 때:
왼쪽 모서리에 FPS 미터가 있는 비행 동영상이 보이고 가운데 하단에 AR 활성화 버튼이 있습니다. 전체 360도 경험을 위해 스크롤할 수도 있습니다.
VR 버튼을 클릭하면 설정 휠과 뒤로 버튼이 있는 분할 화면이 나타납니다. 그리고 비디오 캔버스는 스크롤할 수 없지만 자이로가 제어하기 위한 것 같습니다.

하지만 VR 모드에서 뒤로 버튼을 누르면 비디오가 VR 모드에서 멈추고 더 이상 스크롤할 수 없으며 VR 모드가 시작된 보기에서 멈추게 됩니다.

해당 데모는 Safari에서 HLS 렌더링을 위한 것입니다. Safari에서 flipY 수정 데모가 작동하지 않는다고 생각되는 경우

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

그런 다음 10.13 및 IOS 11 Safari에서 캔버스 텍스처를 사용해야 합니까?

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

둘 사이를 알려주세요. 검정색 프레임이 아닌 렌더링되는 회전 컨트롤에 대해서는 관심이 없습니다.

지금 여기에서 참조하는 IOS 11 웹킷 티켓에 10.13을 추가했기 때문에 10.13에 대해 중요합니다. HLS 렌더링을 완전히 망가뜨린 "회귀"라고 가정합니다.

@danrossi는 둘 다 사파리에서 작동하며 hls 버전으로 더 높은 품질을 제공합니다. 궁금하다면 둘 다 올바른 방향입니다.

그러나 아무도 크롬에서 작동하지 않았습니다.

좋아요. 보고를 취소해야 합니다.

그래서 이것은 여전히 ​​문제가 맞습니까?

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

이 경우 macOS의 표준으로 FlipY 작업을 사용하십시오.

이 페이지의 HLS 데모는 두 브라우저 모두에서 작동해야 합니다. hls 플러그인과 함께 크롬용 미디어 소스 스트리밍을 사용합니다. 또한 macOS에 대한 FlipY 해결 방법이 있습니다.

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

당신이 올바른지
http://dev.electroteque.org/webgl/three-hls.html
이것은 크롬이나 사파리에서 작동하지 않습니다.

링크 flowplayer는 두 브라우저 모두에서 작동합니다.

감사합니다 챔피언. 티켓을 다시 업데이트하기에 충분한 정보가 있었습니다. macOS Safari 문제는 IOS 11 문제와 다릅니다.

IOS 11용 캔버스 텍스처 예제를 사용해야 합니다.

그리고 macOS Safari의 경우 텍스처에서 FlipY를 비활성화하고 셰이더에서 Y 위치를 바꿔 올바른 방향으로 돌립니다. IOS 10 HLS의 프래그먼트 셰이더에서도 색상 채널 반전을 수행해야 합니다. 셰이더 코드는 위에 있습니다.

그래서 저는 오늘 아침에 위의 해결 방법으로 iOS 11 케이스를 깨는 데 성공했을 때 약 1시간 동안 기뻤습니다( @danrossi 저는 http://dev.electroteque.org/webgl/three-canvas.html에 있는 귀하의 예에서 영감을 얻었습니다) ... 하지만 안경을 쓰고 사막의 태양 아래서 얼음 조각처럼 느껴졌습니다.

이것은 iOS 11.2.1이 설치된 iPhone 6 Plus에서 얻은 결과입니다. 애니메이션은 실제로 매우 부드럽지만 일반적으로 추악하고 픽셀 화되고 앨리어스가 있습니다 ...

예상되는 동작은 다음과 같습니다(Android 8 및 최신 Chrome의 Nexus 5X - 위의 해결 방법을 사용하지 않음).

우리의 사용 사례는 360 HTML5 플레이어이며 비디오 위의 두 샘플 모두 동일한 HLS 단일 비트 전송률 피드 http://www.rmp-streaming.com :1935/vod/sea360.mp4/playlist.m3u8입니다.

해결 방법(내 코드는 아래 참조)을 Android에 적용하면 동일한 못생긴 렌더링이 나타납니다. 이 새로운 해결 방법으로 얻을 수 있는 것입니까, 아니면 누락된 것이 있습니까?
일부 설정을 사용하여 재생하려고 했지만 눈에 띄는 개선이 보이지 않습니다.

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

나는 이것을 하고 있다. 나는 이것이 정확한 크기를 가져야 한다고 꽤 확신한다.

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

그래서 조금 찔러본 후 찍어봤습니다. 우리 구성에서 오프 돔 캔버스는 올바르게 렌더링되기 위해 재생 중인 현재 HLS 변환의 정확한 크기여야 하는 것으로 보입니다(따라서 ABR의 경우 변환이 변경될 때마다 업데이트해야 함). 우리의 테스트는 이것이 iOS 11에서 정상적으로 작동한다는 것을 보여줍니다. 다른 사람에게 도움이된다면 여기에 남겨 두십시오.

예, 따라서 비디오 너비를 얻기 위해 loaddata 이벤트에서 수행합니다. 나는 이것을 전에 알아 냈고 당신과 같은 문제가있었습니다.

그러나 기본 HLS의 경우 비트 전송률이 변경될 때 이벤트가 없습니다. 저는 개인적으로 한 번만 설정합니다. Apple을 위한 해결 방법의 양은 이미 믿을 수 없을 정도로 많습니다.

ABR HLS에 대한 변환 변경을 감지하는 데 사용할 수 있는 Safari에서 제공하는 이벤트가 없습니다. 우리는 단지 각 AnimationFrame의 video.videoWidth 및 video.videoHeight를 사용하여 오프돔 캔버스 너비와 높이를 업데이트합니다(성능 관점에서는 이상적이지 않을 수 있지만 이 단계에서는 작동하게 하고 다른 때까지 해결할 것입니다. 옵션을 사용할 수 있게 됩니다). 우리의 테스트는 새로운 변환이 표시될 때 video.videoWidth 및 video.videoHeight가 그에 따라 업데이트되어야 함을 보여줍니다.

네, 그만한 가치가 있는 만큼 충분히 해킹할 수 있습니다. 특히 프레임 콜백에 조건문이 있는 경우 그렇게 하는 것은 과도합니다. 지금은 무엇이든 효과가 있는 것 같습니다.

여전히 변환 변경 이벤트를 제공할 수 없습니다. 하나에 대한 사양이 있다고 생각하지만 구현되지 않았습니까?

이전 Safari 버그, HLS 플리피 수정 사항을 해결하기 위한 CORS 프록시, 이제 이것으로 충분합니다.

모두 잘 작동합니다. 나는 좋은 달 정도 동안 내 티켓에서 아직 업데이트를 보지 못했습니다.

HTML5 비디오 사양에서 품질 전환 이벤트에 대한 내용을 본 기억이 없습니다. Apple에서 유지 관리하는 HLS 사양이 있지만 품질 전환이 발생할 때 클라이언트가 수행해야 하는 작업에 대해서는 설명하지 않습니다. hls.js와 같은 라이브러리에는 이를 구현했지만 HLS에서 Safari의 기본 HTML5 비디오에 사용할 수 없습니다.

고정된 간격으로 video.videoWidth를 쿼리하고 변경이 감지되면 크기 조정 콜백을 호출하여 변환 변경을 감지하기 위해 해킹을 "폴리필"할 수 있다는 것을 깨달았습니다. 이것은 덜 과세됩니다. 나는 아마도 이것을 우리 플레이어의 나중 단계에서 구현할 것입니다.

@radiantmediaplayer "크기 조정" 이벤트를 사용하여 기본 .videoWidth 및 .videoHeight 속성의 변경 사항을 감지할 수 있어야 합니다.

안녕하세요 여러분 여기 내 의견을 참조하십시오. 작동 중입니다.

테스트를 하고 동작을 거치는 것이 얼마나 시련이었는지. 적절한 피드백이나 응답을 얻지 못할 뿐입니다. 난 심각하게 끝났어! 더 이상 회귀하지 마십시오 !!

OSX 11.3 베타를 설치하면 작동합니다. 이전 OSX 11은 소프트웨어 렌더링이 필요하고 OSX 10은 flipY 및 색상 수정이 필요합니다. 복잡한 호환성 혼란과 플랫폼 버전 감지가 필요합니다.

Safari macOS에는 여전히 FlipY 문제가 있으며 별도의 티켓에 응답이 없습니다. 내 PC 워크스테이션에 macOS를 설치하려고 시도할 수 있을 때까지 어쨌든 HLS를 제대로 테스트할 수 없습니다. HLS는 vmware에서 재생되지 않습니다.

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

FlipY 해결 방법은 OSX 11.3에서도 필요하지 않지만 이전에 언급한 것 같습니다.

다음은 이제 CORS로 시작하는 전체 IOS 및 Safari 호환성 검사입니다.

마음이 흔들립니다. 이건 미쳤어. 나는 미래를 증명해야 했고 IOS 12보다 더 많은 것을 포함해야 했습니다.

통합 작업 중입니다! 아직 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;
    }

용법

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

        }
    }

마지막으로 중요한 점을 수정합니다. IOS HLS 렌더링 구현은 신발끈에서 실행되고 있으며 매우 민감합니다. 렌더링은 loaddata 후에 시작해야 합니다.

teximage2d 오류가 발생하면 더 이상 렌더링이 발생하지 않고 검은색 렌더링만 발생하며 수정 사항이 발생하지 않은 것처럼 보입니다.

비디오 데이터가 있는 즉시 렌더링이 시작되면 괜찮습니다. 11.3 이전에는 문제가 되지 않았습니다.

비디오가 다시 작동하는 것 같습니다(임시 캔버스 수정 없이). 최신 ios 버전 11.3(iphone 6s, 7에서 테스트)을 확인했습니다.

예, 2월 15일에 업데이트한 것 같습니다. 11.3에서 다시 작업 중입니다. 업데이트를 받은 적이 없습니다. 나는 구체적으로 다시 확인해야했고 작동했습니다!

iOS 11.3(및 이에 상응하는 macOS 릴리스)에서 비디오 -> 텍스처와 관련된 많은 문제를 수정했습니다. 버그를 닫거나 업데이트하지 않았다면 죄송합니다.

여전히 문제가 발생하면 알려주세요. 나는 직접 스트림(예: mp4)과 HTTP 라이브 스트림이 모두 작동해야 하며 플리피가 정확하게 반영되어야 한다고 생각합니다.

신고가 접수된 2월부터 모두 완료되었습니다. 그러나 나는 원래 작년 언젠가 보고했다. 무작위로 IOS 베타를 11.3으로 업데이트했고 작동을 시작했습니다. 위의 호환성 검사 코드는 여러 플랫폼 해결 방법을 처리하는 데 필요합니다.

IOS 10에는 flipY 수정이 필요합니다. IOS 11.0 - 11.2에는 소프트웨어 렌더링 해결 방법이 필요합니다. 11.3 > 정상적으로 렌더링할 수 있습니다.

누구든지 이에 대한 작업 샘플, jsfiddle 등을 공유할 수 있습니까? IOS 11 Safari에서 여전히 검은색 화면을 볼 수 있었습니다. 오디오는 들을 수 있지만 HLS 스트리밍에 대한 비디오는 들리지 않습니다.

@dhanishapa iOS 버전이 무엇입니까? 11.3+인가요?

조금 전(~ 2018년 5월) 저도 HLS(? <= 11.2)에서 다음과 같은 문제를 경험했습니다.

• 재생 중에 비디오 세그먼트가 반복되는 경우가 있습니다.
• 비디오가 때때로 일시 중지되고 검은색 화면이 표시됨
• 비디오는 버퍼링되지만 오디오는 계속됩니다.

Vimeo에 연락한 후(저는 HLS 서비스를 사용하고 있습니다) Apple 개발 팀에 연락하여 문제를 함께 해결할 수 있었습니다.

Apple 개발 팀으로부터 귀하가 보고한 재생 문제에 대한 수정 사항이 포함된 새 버전의 iOS(11.3.1)가 출시되었다는 소식을 방금 받았습니다. 수정 사항은 비디오가 검은 화면에서 중지되거나 비디오 세그먼트가 반복되거나 무한 로드 상태에 걸리는 것을 방지해야 합니다.

업로드하는 동안 H264로 인코딩된 MP4를 소스로 제공했을 때 11.3.1 미만의 iOS 버전에서 재생 문제가 사라졌다는 것을 알았습니다. 업로드하는 동안 Quicktime을 입력 형식으로 사용할 때 문제가 발생했습니다.

각 비디오 파일에 의해 생성된 매니페스트 간의 몇 가지 차이점을 발견했습니다(비디오 코덱 즉, 작동하는 비디오 코덱은 "avc1.64001E,mp4a.40.2" 대 작동하지 않는 비디오 코덱 "hvc1.2.4.L63.90,mp4a.40.2"). ).

아마도 이 정보는 누구에게나 유용할 것입니다.

안녕하세요
IOS 사파리에서 HLS 스트리밍에 문제가 있습니다.
cors 프록시를 사용하고 있습니다. 기본 hls 플레이어와 html5 플레이어를 사용해 보았고 IOS에서 직접 m3u8 링크를 재생하려고 시도했지만 작동하지 않는 반면 사파리(데스크톱 - 맥), 크롬, 파이어폭스에서는 작동하지 않고 IOS(아이폰)에서는 작동하지 않습니다.

cors는 IOS 11.0에서 수정되었습니다. 내가 해결한 다른 큰 수정 사항은 11.3에 있습니다. 11.3은 지금 나와야 합니다. 프록시는 IOS 10 및 9에만 필요합니다.

🙆🏽‍♂️

다음은 구에 매핑된 HLS 스트림 playhouse-vr의 360도 비디오 ).

macOS v10.13.4 + Safari v11.1 및 iOS 11.4.1 + Safari에서 테스트됨

이제 iOS 14.0 Safari 및 iPadOS 14.0 Safari에서 새로운 검은색 화면 문제가 표시됩니다. 똑같은 플레이어가 iOS 13.7 Safari 및 iPadOS 13.7 Safari에서 작동합니다. three.js r120(r116에서)으로 업데이트를 시도했지만 소용이 없었습니다. macOS Safari 14는 괜찮습니다. 같은 것을 보고 있는 사람이 있습니까? iOS 14를 지원하기 위한 다음 단계에 대한 힌트가 있습니까?

예, iOS 14 회귀에 대해 https://bugs.webkit.org/show_bug.cgi?id=215908 및 https://bugs.webkit.org/show_bug.cgi?id=216250 을 모두 확인하십시오. 많은 사이트가 영향을 받을 수 있으므로 이 두 가지가 모두 빨리 해결되기를 바랍니다.

Safari와의 끝없는 전투입니다. 나는 내 자신의 360도 기능에 대한 불만을 다시 기대합니다. 그것들을 고치는 데 매번 몇 달이 걸립니다. 위의 원래 해결 방법을 찾았습니다. 그래서 더 많은 해결 방법을 찾을 시간입니다!! Webkit은 HLS를 테스트하지 않으며 WebGL에 대한 HLS 테스트가 없으므로 직접 만들어야 했습니다.

내 기능에서 다른 IOS에 대한 모든 부풀려진 해결 방법을 제거했습니다. 하지만 그 중 하나는 11.0용 캔버스 소프트웨어 렌더링을 사용해야 했습니다... 여전히 플랫폼 확인을 해야 합니다. IOS 13에서는 이제 플랫폼 검사가 중단되었습니다. 나는 판지 프로젝트에서 그것을 고쳐야 했다. HLS가 즉시 렌더링되지 않고 IOS 13에서 시간이 걸리지만 해당 문제를 해결한 방법을 다시 확인해야 합니다.

그들은 상관하지 않습니다. WebXR API가 없으며 Android와 같은 Wakelock API가 방금 구현되었습니다.

내 해결 방법에 따르면 변환 변경 시 재구성해야 합니다. 그리고 궤도 제어에서 확대/축소를 비활성화합니다. 이것은 IOS 13에서 검은색 렌더링을 중지합니다. IOS 14는 확인해야 합니다.

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

14.2를 테스트했습니다. 알겠습니다. 위의 수정은 그것을 할 것입니다 ...